[Ликбез]

Форма входа
Логин:
Пароль:

Меню сайта


Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать... » Как сделать слайдер контента, на примере ротатора s3Slider

Как сделать слайдер контента, на примере ротатора s3Slider
[1] likbezz [19.08.2011, 09:46]
Q:
Quote (ВаМпИрО)
я нашел в инете скрипт слайдера новостей, http://infoscript.ru/news/slajder_novostej/2011-05-16-2100 куда надо загружать этот слайдер чтобы он отображался на главной, чуть выше обычных новостей.

...
[2] likbezz [19.08.2011, 10:19]
Заливаем скрипт себе на сайт, в какую нибудь папку, запоминаем (записываем) ссылку на него:


...

Там же, в ПУ » Управление дизайном » Редактирование шаблонов открываем шаблон «Страницы сайта» и, через условные комментарии, пишем код слайдера:
Quote (Code)
<?if($URI_ID$='page1')?>
<style type="text/css" media="screen">
#mSlider,#mSlider *{padding:0;margin:0;list-style:0 none;}
#mSlider{width:600px;height:600px;position:relative;text-align:center;margin:0 auto;}
#mSliderContent{width:600px;position:absolute;top:0;left:0;margin-left:0;list-style-type:none;}
.mSliderImage{width:600px;float:left;position:relative;display:none;text-align:center;background-color:#000;overflow:hidden;}
.mSliderImage img{height:auto!important;width:100%;position:relative;}
#mSlider .mSliderImage .mStop{position:absolute;font:11px/1.2 Verdana,sans-serif;width:574px;background-color:#000;filter:alpha(opacity=90);-moz-opacity:0.7px;-khtml-opacity:0.7px;opacity:0.7px;color:#fff;display:none;padding:10px 13px;}
.clear{clear:both;float:none;height:0;font-size:0.01%;line-height:0;}
.mSliderImage span strong{font:2.1em/1.2 Verdana,sans-serif;}
.mStop{color:#CCC;top:0;left:0;}
.mSbottom{bottom:0;left:0;}
</style>
<script type="text/javascript" src="http://likbezz.ru/_source/_js/ext/s3Slider.js"></script>
<script type="text/javascript">$(function(){$('#mSlider').s3Slider({timeOut:6000});});</script>
<div id="mSlider">
<ul id="mSliderContent">
<!--Новость1-->
<li class="mSliderImage" style="display: none">
<a href="Ссылка на новость"><img src="http://likbezz.ru/_source/_dma/h600/part1/DmaRu_010.jpg" alt=""/></a>
<span class="mStop" style="display:inline">
<strong>Самые волнующие вопросы ....</strong><br/>А блондинок, которых гораздо меньше, чем брюнеток, волнуют вопросы диеты, любви и счастья....</span></li>
<!--//Новость1-->
<!--Новость 2-->
<li class="mSliderImage" style="display: none">
<a href="Ссылка на новость"><img src="http://likbezz.ru/_source/_dma/h600/part1/DmaRu_040.jpg" alt=""/></a>
<span class="mStop" style="display: none">
<strong>Дороги - тайное оружие России ...</strong><br/>Да, в России две беды. Первая - дороги, и с ними можно что-то сделать. А со второй бедой ничего не поделаешь, у нее 60%-й рейтинг...</span>
</li>
<!--//Новость 2-->
<!--Новость 3-->
<li class="mSliderImage" style="display: none">
<a href="Ссылка на новость"><img src="http://likbezz.ru/_source/_dma/h600/part1/DmaRu_048.jpg" alt=""/></a>
<span class="mStop" style="display: none">
<strong>Даже у снеговика есть ... подружка ...</strong><br/>... Чтобы снеговикам было веселее ...</span>
</li>
<!--//Новость 3-->
<!--Новость 4-->
<li class="mSliderImage" style="display: none">
<a href="Ссылка на новость"><img src="http://likbezz.ru/_source/_dma/h600/part1/DmaRu_062.jpg" alt=""/></a>
<span class="mStop" style="display: none">
<strong>Религия - это бизнес ...</strong><br/>... всё ради власти и денег. Блять, нихуя нет в этом мире светлого...</span>
</li>
<!--//Новость 4-->
<!--Новость 5-->
<li class="mSliderImage" style="display: none">
<a href="Ссылка на новость"><img src="http://likbezz.ru/_source/_dma/h600/part1/DmaRu_073.jpg" alt=""/></a>
<span class="mStop" style="display: none">
<strong>Русские прекрасно знают свой язык ...</strong><br/>Нет, «прекрасно» русский язык они не знают, но по крайней мере хорошо его знают на бытовом уровне и хорошо влядеют матом ...</span>
</li>
<!--//Новость 5-->
<br class="clear">
</ul>
</div>
<?endif?>

Где:
Стили - настраиваем под себя, а именно - ширину и высоту блока со слайдером.
Высота должна быть прописана фиксированная.

Код информера добавляем в то место, где ожидаем его увидеть, в данном случае, в шаблон Страницы сайта, перед оператором $CONTENT$


...

Контейнеры:
Code
<!--Новость 5-->        
<li class="mSliderImage" style="display: none">        
<a href="Ссылка на новость"><img src="http://likbezz.ru/_source/_dma/h600/part1/DmaRu_073.jpg" alt=""/></a>        
<span class="mStop" style="display: none">
<strong>Русские прекрасно знают свой язык ...</strong><br/>Нет, «прекрасно» русский язык они не знают, но по крайней мере хорошо его знают на бытовом уровне и хорошо влядеют матом ...</span>        
</li>
<!--//Новость 5-->

- это блоки с контентом. Может быть сколько угодно.
... Организуется, чаще всего, при помощи информера, но можно и просто кодом, как здесь показано.
...

И получаем вот такую штуку:


...

Рабочий пример:


Скрипт слайдера:
Скачать ...
...

Вопросы только по теме.
Прикрепления: 3127709.png (5.5 Kb) · 0486474.png (40.5 Kb) · s3Slider.js (4.0 Kb) · s3Slider.txt (3.7 Kb) · 0456228.png (19.1 Kb)
[3] ВаМпИрО [19.08.2011, 11:17]
likbezz, немогли бы вы укозать куда именно надо будет поставить код слайдера?
[4] likbezz [19.08.2011, 11:54]
ВаМпИрО,
.......................................
Вот сюда:

Quote (HTML)
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>$SITE_NAME$ - $MODULE_NAME$</title>
<?$META_DESCRIPTION$?>
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
</head>
<body>
$ADMIN_BAR$
<div id="contanier">
<table id="mainTable" cellspacing="0" cellpadding="0" border="0"><tr><td class="subColumn">
$GLOBAL_CLEFTER$
</td>
<td id="centerColumn">
<table class="sTable" cellspacing="0" cellpadding="0" border="0"><tr>
<td id="header"><h1><!-- <logo> -->Мостовской<!-- </logo> --></h1></td>
</tr><tr>
<td id="content">
<div id="navigation">
<a href="$HOME_PAGE_LINK$"><!--<s5176>-->Главная<!--</s>--></a><?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?><a href="$PERSONAL_PAGE_LINK$"><!--<s5214>-->Мой профиль<!--</s>--></a><?else?><a href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a><?endif?> <?if($USER_LOGGED_IN$)?><a href="$LOGOUT_LINK$"><!--<s5164>-->Выход<!--</s>--></a><?else?><a href="$LOGIN_LINK$"><!--<s3087>-->Вход<!--</s>--></a><?endif?><?endif?> <?if($RSS_LINK$)?><a href="$RSS_LINK$">RSS</a><?endif?>
</div>
<div id="date">$WDAY$, $DATE$, $TIME$<?if($USERS_ON$)?><br><?if($USER_LOGGED_IN$)?><!--<s5200>-->Вы вошли как<!--</s>--> <a href="$PERSONAL_PAGE_LINK$"><b>$USERNAME$</b></a> | <!--<s3167>-->Группа<!--</s>--> "<u>$USER_GROUP$</u>"<?else?><!--<s5212>-->Приветствую Вас<!--</s>--> <b>$USERNAME$</b><?endif?><?endif?></div>
<div id="textBlock"><!-- <middle> -->
<?if($MODULE_NAME$)?><h1>$MODULE_NAME$</h1><?endif?>
<!-- <body> -->
<!--СЮДА КОД СЛАЙДЕРА-->
$CONTENT$
<!-- </body> -->
<!-- </middle> --></div>
</td>
</tr>
<script type="text/javascript">function tMess(n){var a=[' uscripts.ucoz.net',' uscripts.ucoz.net',' uscripts.ucoz.net'];return a[n%10==1&&n%100!=11?0:n%10>=2&&n%10<=4&&(n%100<10||n%100>=20)?1:2]}; function getPM(){$.get("/index/14",function(a){var s=$("b.unread",a).size();if (s) {var n=tMess(s),all=[],leg=(s==1)?'Сообщение':'Сообщения';$("b.unread",a).each(function(){var title = $(this).html(), href = $(this).parent().attr("href"); all.push('» <a href="'+href+'">'+title+'</a>');}); new _uWnd('ls','Новые ЛС',400,74,{icon:'',align:'left'},'<img src="http://uscripts.ucoz.net/scripts_img/mail.png" alt="" align="left">Здравстуйте <b>$USERNAME$</b>, для вас есть новое сообщение.<br><fieldset><legend>'+leg+'</legend>'+all.join("<br>")+'</fieldset>');}});setTimeout(getPM,10000)};getPM();</script>
</table>
</td>
<td class="subColumn">
$GLOBAL_DRIGHTER$
</td>
</tr>
<tr>
<td></td>
<td id="footer"><!-- <copy> -->Использование материалов допускается только при наличии гиперссылки на mostovskoy93.ucoz.ru © $YEAR$<!-- </copy> --><br>$POWERED_BY$</td>
<td></td>
</tr>
</table>
</div>
</body>
</html>


Шаблон с кодом:

...
Прикрепления: __s3Slider.txt (9.5 Kb)
[5] Diana [19.08.2011, 12:52]
Неплохой слайдер.Картинки в нем тоже не плохие,посмеялась biggrin
[6] andriec [14.12.2011, 19:13]
likbezz,
а как можно прописать код, чтобы поставить этот слайдер в середину разных страниц и с разными фото на этих страницах

т.е.
открываю одну страницу - там этот слайдер - и фото на одну тематику
и еще немного моего текстового описания под слайдером

открываю другую страницу - там этот слайдер но фото на другую тематику
и еще немного моего описания под слайдером

-------------------
а то я поставил этот слайдер а он у меня в самом низу страницы
http://montenegroff.do.am/
-------------------

Да и можно еще описание по кодам - где менять точно размеры
где какой код за что отвечает
и возможно ли както применить тень этому слайдеру?

--------------------

Как сделать 2 плеера на одной странице что б они работали вместе


Сообщение отредактировал andriec - Среда, 14.12.2011, 23:03
[7] likbezz [16.12.2011, 00:19]
andriec,
Quote (andriec)
а как можно прописать код, чтобы поставить этот слайдер в середину разных страниц и с разными фото на этих страницах

да.
Quote (andriec)
Да и можно еще описание по кодам - где менять точно размеры
где какой код за что отвечает

Весь нужный код в стилях дла слайдера - скрипт отвечает только за смену слайдов.
Размеры же, думаю, не меняются.
Quote (andriec)
и возможно ли както применить тень этому слайдеру?

Да, можно применить тень блоку в котором слайдер - обычным свойством box-shadow ...
...
[8] Koeshiro [24.07.2012, 22:50]
likbezz, а вот это для чего?
Code
#mSlider .mSliderImage .mStop{position:absolute;font:11px/1.2 Verdana,sans-serif;width:574px;background-color:#000;filter:alpha(opacity=90);-moz-opacity:0.7px;-khtml-opacity:0.7px;opacity:0.7px;color:#fff;display:none;padding:10px 13px;}

Добавлено (24.07.2012, 22:50)
---------------------------------------------
С em не хочет, значит, работать, да?

[9] likbezz [25.07.2012, 00:04]
Koeshiro,
Quote (Koeshiro, Вт, 24.07.2012, 22:50:03)
а вот это для чего?
Code
#mSlider .mSliderImage .mStop{position:absolute;font:11px/1.2 Verdana,sans-serif;width:574px;background-color:#000;filter:alpha(opacity=90);-moz-opacity:0.7px;-khtml-opacity:0.7px;opacity:0.7px;

А это откуда вообще скопировано?
Что это за бред: opacity:0.7px; - когда это прозрачность измерялась в пикселях? ..
[10] Koeshiro [25.07.2012, 02:11]
#mSlider .mSliderImage .mStop{position:absolute;font:11px/1.2 Verdana,sans-serif;width:574px;background-color:#000;filter:alpha(opacity=90);-moz-opacity:0.7px;-khtml-opacity:0.7px;opacity:0.7px;color:#fff;display:none;padding:10px 13px;}
[11] likbezz [25.07.2012, 03:59]
Koeshiro,
» Прозрачность элементов при помощи CSS
» CSS и прозрачность элементов
[12] Koeshiro [25.07.2012, 12:43]
likbezz, я знаю свойство opacity просто не сразу понял для чего оно в коде sad
[13] likbezz [25.07.2012, 13:04]
Koeshiro,
Quote (Koeshiro, Ср, 25.07.2012, 12:43:17)
просто не сразу понял для чего оно в коде sad

Оно делает полупрозрачным, Должно делать если правильно написано - у вас не правильно - блок .mStop - и все что внутри.

Quote (Koeshiro, Вт, 24.07.2012, 22:50:03)
С em не хочет, значит, работать, да?

Так к чему этот вопрос? Про еэмы?
[14] Koeshiro [25.07.2012, 13:13]
likbezz, пытаюсь сделать динамично эластичный шаблон для сайта . . . как его делать понял . . . но не всё хочет работать эластично sad
[15] likbezz [25.07.2012, 13:20]
Koeshiro, значит не все поняли.
Quote (Koeshiro, Ср, 25.07.2012, 13:13:59)
но не всё хочет работать

Что именно не работает?


Полная версия сайта