Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Архив » News slider (свои новости и реклама на форуме)


News slider (свои новости и реклама на форуме)

Сообщений 1 страница 16 из 16

1

думаю, что многим бы хотелось иметь у себя на форуме
динамически меняющийся блок новостей  или даже собственную рекламу

News slider

в html-верх плагин слайдера и стиль:

<script type="text/javascript" src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>

<style type="text/css">
#slider {width:400px;
height:250px;
position:relative;
overflow:hidden;
              left:250px;}

#buttons {margin-left:250px;}

#mask-gallery {overflow:hidden;}

#gallery {/* Clear the list style */
list-style:none;
margin:0;
padding:0;
z-index:0;
/* width = total items multiply with #mask gallery width */
width:900px;
overflow:hidden;}

#gallery li {float:left;}

#mask-excerpt {position:absolute;
top:0;
left:0;
z-index:500px;
width:100px;
overflow:hidden; }

#excerpt {filter:alpha(opacity=60);
-moz-opacity:0.6; 
-khtml-opacity: 0.6;
opacity: 0.6;
list-style:none;
margin:0;
padding:0;
z-index:10;
position:absolute;
top:0;
left:0;

/* Set the style */
width:100px;
background-color:#000;
overflow:hidden;
font-family:arial;
font-size:14px;
color:#fff;}

#excerpt li {padding:5px;}

.clear {clear:both; }
</style>

в html-низ:

Код:
<script type="text/javascript">
$(document).ready(function() {
//Speed of the slideshow
	var speed = 5000;
	
	//You have to specify width and height in #slider CSS properties
	//After that, the following script will set the width and height accordingly
	$('#mask-gallery, #gallery li').width($('#slider').width());	
	$('#gallery').width($('#slider').width() * $('#gallery li').length);
	$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
	
	//Assign a timer, so it will run periodically
	var run = setInterval('newsslider(0)', speed);	
	
	$('#gallery li:first, #excerpt li:first').addClass('selected');

	//Pause the slidershow with clearInterval
	$('#btn-pause').click(function () {
clearInterval(run);
return false;
	});

	//Continue the slideshow with setInterval
	$('#btn-play').click(function () {
run = setInterval('newsslider(0)', speed);	
return false;
	});
	
	//Next Slide by calling the function
	$('#btn-next').click(function () {
newsslider(0);	
return false;
	});	

	//Previous slide by passing prev=1
	$('#btn-prev').click(function () {
newsslider(1);	
return false;
	});	
	
	//Mouse over, pause it, on mouse out, resume the slider show
	$('#slider').hover(
	
function() {
	clearInterval(run);
}, 
function() {
	run = setInterval('newsslider(0)', speed);	
}
	); 	
	
});

function newsslider(prev) {

	//Get the current selected item (with selected class), if none was found, get the first item
	var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
	var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

	//if prev is set to 1 (previous item)
	if (prev) {

//Get previous sibling
var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
	
	//if prev is set to 0 (next item)
	} else {

//Get next sibling
var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
	}

	//clear the selected class
	$('#excerpt li, #gallery li').removeClass('selected');
	
	//reassign the selected class to current items
	next_image.addClass('selected');
	next_excerpt.addClass('selected');

	//Scroll the items
	$('#mask-gallery').scrollTo(next_image, 800);
	$('#mask-excerpt').scrollTo(next_excerpt, 800);	
	
}
</script>

и собственно сами новости или реклама

в Объявление:

<div id="slider">
  <div id="mask-gallery">

<ul id="gallery">
    <li><img src="фоновое изображение для первой новости" width="400" height="250" alt=""/></li>
    <li><img src="фоновое изображение для второй новости" width="400" height="250" alt=""/></li>
    <li><img src="фоновое изображение для третьей новости" width="400" height="250" alt=""/></li>

</ul>
</div>

<div id="mask-excerpt">
<ul id="excerpt">
    <li>Текст первой новости.</li>
                <li>Текст второй новости.</li>
    <li>Текст третьей новости.</li>
</ul>
</div>

</div>

<div id="buttons">
<a href="#" id="btn-prev">prev</a>
<a href="#" id="btn-pause">pause</a>
<a href="#" id="btn-play">play</a>
<a href="#" id="btn-next">next</a>

</div>

сам блок новостей можно сделать по центру Объявления или сместить куда вам нужно
можно так же менять его размеры (выделил жёлтым)
надписи Next - Prev - Play - Pause тоже можно сменить на картинки
цвет шрифта в новостях можно менять
количество новостей с трёх увеличить до нужного вам
можно так же любую новость сделать кликабельной (нажав переходишь к более подробному прочтению)
и т.д.

ПРИМЕР
ПРИМЕР 2

Отредактировано Romych (Пн, 11 Ноя 2013 23:12:21)

+3

2

Romych написал(а):

сам блок новостей можно сделать по центру Объявления или сместить куда вам нужно

а как сместить куда нужно?

0

3

madpilot57rus написал(а):

а как сместить куда нужно?

имеется ввиду влево, вправо, сделать по-центру?

0

4

Romych написал(а):

имеется ввиду влево, вправо, сделать по-центру?

ну хоть так... как его сделать в объявлении слева?

0

5

Romych
Здравствуйте!
Хотелось бы знать ответ на пару-тройку вопросов:
- можно ли менять размер изображений допустим до 900 пикселей в ширину (если нельзя - то какое ограничение есть?) и не вызовет ли это сбоев каких-нибудь в работе скрипта?
-можно ли менять длительность демонстрации изображения (и как это можно сделать)?

Отредактировано Cartomant (Вт, 4 Мар 2014 14:37:19)

0

6

Cartomant написал(а):

Romych
Здравствуйте!
Хотелось бы знать ответ на пару-тройку вопросов:
- можно ли менять размер изображений допустим до 900 пикселей в ширину (если нельзя - то какое ограничение есть?) и не вызовет ли это сбоев каких-нибудь в работе скрипта?
-можно ли менять длительность демонстрации изображения (и как это можно сделать)?

Отредактировано Cartomant (Сегодня 14:37:19)

- Можно
- Изменить значение var speed

0

7

ДОМИНИОН
Спасибо за ответ!

0

8

ДОМИНИОН
Romych
Здравствуйте!
Возник вопрос по слайдеру (форум - http://tanyago2010.mybb.ru/ ) - подскажите, пожалуйста, как установить его точно по центру блока "Объявления"
Получилась вот такая картина у меня (ссылки сползли в шапку и сам слайдер сместился очень неудачно)

http://s8.uploads.ru/t/XwGRB.png

Менял в скрипте:
<script type="text/javascript" src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<style type="text/css">
#slider {width:950px;
height:100px;
position:center; вместо relative, поскольку в предыдущем варианте слайдер сместился очень резко вправо и исчез на треть из видимости.
Можно ли выровнять положение слайдера? И как это сделать?
Ещё один вопрос интересует: как можно прицепить ссылки к надписям? В описании говорилось, что их можно сделать кликабельными...

Огромное спасибо заранее за ответ!

0

9

Cartomant
Попробуйте добавить

<center>
    <div id="slider">
  <div id="mask-gallery">
<ul id="gallery">
    <li><img src="https://forumstatic.ru/files/000e/2d/2b/70320.jpg" width="950" height="100" alt=""/></li>
    <li><img src="https://forumstatic.ru/files/000e/2d/2b/63571.jpg" width="950" height="100" alt=""/></li>
    <li><img src="https://forumstatic.ru/files/000e/2d/2b/43544.jpg" width="950" height="100" alt=""/></li>
</ul>
</div>
<div id="mask-excerpt">
<ul id="excerpt">
    <li>Сайт о магии для всех.</li>
                <li>Ищите нас ВКонтакте!</li>
    <li>Заказать гадания</li>
</ul>
</div>
</div>
<div id="buttons">
<a href="#" id="btn-prev">prev</a>
<a href="#" id="btn-pause">pause</a>
<a href="#" id="btn-play">play</a>
<a href="#" id="btn-next">next</a>
</div>
</center>

0

10

Deff
Спасибо за совет...сейчас попробую...

0

11

Cartomant
Ксать есть скриптег про Вам (одесский сленг)

Супер - Дайсы!
К примеру пишите такую строку
валет треф, дама бубей, валет червей, десятка пик
Выделяете курсором и жмёте кнопку кубика

Отредактировано Deff (Ср, 5 Мар 2014 15:56:19)

0

12

Deff
Выровнять получилось, но текст объявлений так и остался в шапке почему-то...

http://s9.uploads.ru/t/5YXL9.png

За дайсы спасибо! Забавная штучка, ничего не скажу...теперь только применение нужно найти и донести в массы смысел))))

Отредактировано Cartomant (Ср, 5 Мар 2014 16:07:57)

0

13

Cartomant
Вот эту фигню уберите из стиля в HTML верх

#excerpt {filter:alpha(opacity=60);
-moz-opacity:0.6; 
-khtml-opacity: 0.6;
opacity: 0.6;
list-style:none;
margin:0;
padding:0;
z-index:10;
position:absolute;
top:0;
left:0;
/* Set the style */
width:100px;
background-color:#000;
overflow:hidden;
font-family:arial;
font-size:14px;
color:#fff;}

Запись неверна

0

14

Deff написал(а):

Cartomant
Вот эту фигню уберите из стиля в HTML верх

Убрал...вместе с ней и текст новостей пропал, что - хорошо, но и возможности новость к слайду добавить тоже нет, что плохо...и что же теперь делать? )))

0

15

Cartomant написал(а):

Убрал...вместе с ней и текст новостей пропал, что - хорошо, но и возможности новость к слайду добавить тоже нет, что плохо...и что же теперь делать? )))

Суть в том, что текст расчитан на положение слайдера в начале страницы слево,
Ждите Ромыча, он Автор

Или есть простенький слайдер с автопрокруткой
Простой Слайдер картинок и контента
Там мон и новости и картинки (Нижний Вариант

0

16

Deff
Спасибо большое за помощь!А для решения вопроса окончательно (если такое возможно будет), буду ждать автора тогда, как вы и советуете...Но и второй слайдер мне понравился - отдельное спасибо за информацию!)))

0


Вы здесь » Единый форум поддержки » Архив » News slider (свои новости и реклама на форуме)