Скрипт для смены изображений

автор Pyrk1 Октябрь 16th 2011, 21:19

Доброго времени суток!
Не могли бы вы подсказать скрипт, который можно вставить на персональную страницу HTML, который показывает несколько изображений с радикала по очереди с очередностью n, желательно, чтобы под каждым изображением мог быть текст, который меняется в зависимости от изображения.
Заранее благодарю за помощь!

автор gorezcaid Октябрь 16th 2011, 22:37

https://help.forum2x2.ru/t20438-topic
https://help.forum2x2.ru/t20019-topic

автор Pyrk1 Октябрь 17th 2011, 15:22

Спасибо, но есть ли такой вариант, чтобы изображения сменяли друг друга раз в 10 секунд в одном окне, а другие не показывались?

автор vvo Октябрь 17th 2011, 15:35

Вот это должно помочь.

автор Pyrk1 Октябрь 17th 2011, 16:08

Спасибо, но мне требуются одно изображение в одном окне с сопровождающей надписью и все.

автор Домовой Октябрь 17th 2011, 20:59

Такой вариант пойдёт?

http://12345.forum777.com/h4-page

автор Pyrk1 Октябрь 18th 2011, 06:27

О, вот что надо, кстати, там можно верхнюю надпись для каждой картинки менять?

автор Домовой Октябрь 18th 2011, 07:42

Pyrk1 пишет:О, вот что надо, кстати, там можно верхнюю надпись для каждой картинки менять?

В скрипте каждая картинка прописыватся отдельно, соответственно и текст для каждой свой.

Код:: <style> /* размер картинок*/ #slider { width: 636px !important ; height: 400px !important ; } /* оформление поля подсказки*/ .sliderImage span { background-color:#000 !important ; color:#FFF !important ; font-size:16px !important ; font-family:Georgia !important ; opacity: 0.5!important ; width:636px !important; padding:10px 13px !important ; } </style> <link href="http://domovoy063.nxt.ru/demonstration.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="http://domovoy063.nxt.ru/s3Slider.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#slider').s3Slider({ timeOut: 5000 }); }); </script> <div id="slider"> <ul id="sliderContent"> <li class="sliderImage"> <img src="ссылка на картинку 1" /> <span class="top"><strong>Текст подсказки для картинки 1</strong></span> </li> <li class="sliderImage"> <img src="ссылка на картинку 2" /> <span class="top"><strong>Текст подсказки для картинки 2</strong></span> </li> <li class="sliderImage"> <img src="ссылка на картинку 3" /> <span class="top"><strong>Текст подсказки для картинки 3</strong></span> </li> <div class="clear sliderImage"></div> </ul> </div>

автор Pyrk1 Октябрь 20th 2011, 19:40

Спасибо, вроде работает.

автор Домовой Октябрь 20th 2011, 20:11

Я рад за вас))

автор Pyrk1 Октябрь 20th 2011, 21:03

Странно как то работает.
Не могли бы вы дать полный код (от хтмл до /хтмл)?
А то запутался сильно.

автор Домовой Октябрь 20th 2011, 22:39

я делал так:

Код HTML * : (вставил следующее)

Код:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru" xml:lang="ru" ><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> </head><body> <style> body { background : #BBEAFC url(http://dizayn.mybb.ru/uploads/000a/45/08/287-2-f.jpg) repeat-y fixed top center !important ; } </style> <style> /* размер картинок*/ #slider { width: 636px !important ; height: 400px !important ; } /* оформление поля подсказки*/ .sliderImage span { background-color:#000 !important ; color:#FFF !important ; font-size:16px !important ; font-family:Georgia !important ; opacity: 0.5!important ; width:636px !important; padding:10px 13px !important ; } </style> <link href="http://domovoy063.nxt.ru/demonstration.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="http://domovoy063.nxt.ru/s3Slider.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#slider').s3Slider({ timeOut: 5000 }); }); </script> <center> <div id="slider"> <ul id="sliderContent"> <li class="sliderImage"> <img src="http://savepic.su/370629.jpg" /> <span class="top"><strong>Текст подсказки</strong></span> </li> <li class="sliderImage"> <img src="http://savepic.su/348101.jpg" /> <span class="top"><strong>Текст подсказки</strong></span> </li> <li class="sliderImage"> <img src="http://savepic.su/337861.jpg" /> <span class="top"><strong>Текст подсказки</strong></span> </li> <div class="clear sliderImage"></div> </ul> </div> </center> </body></html>

автор Pyrk1 Октябрь 21st 2011, 07:24

Спасибо, сейчас попробую.

автор Pyrk1 Октябрь 21st 2011, 20:37

А джава скрипт и цсс где брать?
Как ты на http://domovoy063.nxt.ru/demonstration.css залил, я не пойму.

автор gorezcaid Октябрь 21st 2011, 20:59

Как ты на http://domovoy063.nxt.ru/demonstration.css залил, я не пойму.

Через хостинг http://nextmail.ru/
Можно подключить CSS напрямую, а не через хостинг:
В коде заменить

Код:: <link href="http://domovoy063.nxt.ru/demonstration.css" rel="stylesheet" type="text/css" media="screen" />

На

Спойлер:

автор gorezcaid Октябрь 21st 2011, 21:03

И скрипт

Код:: <script type="text/javascript" src="http://domovoy063.nxt.ru/s3Slider.js"></script>

http://domovoy063.nxt.ru/s3Slider.js Поместить в "Управление кодами Javascript" Без расположения
И код заменить на:

Код:: <script type="text/javascript" src="http://адрес_скрипта_с_форума.js"></script>

автор Pyrk1 Октябрь 23rd 2011, 11:56

Код:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru" xml:lang="ru" ><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> </head><body> <style> body { background : #BBEAFC url(http://dizayn.mybb.ru/uploads/000a/45/08/287-2-f.jpg) repeat-y fixed top center !important ; } </style> <style> /* размер картинок*/ #slider { width: 636px !important ; height: 400px !important ; } /* оформление поля подсказки*/ .sliderImage span { background-color:#000 !important ; color:#FFF !important ; font-size:16px !important ; font-family:Georgia !important ; opacity: 0.5!important ; width:636px !important; padding:10px 13px !important ; } </style> <style type="text/css">#slider { width: 410px; /* important to be same as image width */ height: 300px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ } #slider1, #slider2 { width: 720px; /* important to be same as image width */ height: 300px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ } #sliderContent, #slider1Content, #slider2Content { width: 720px; position: absolute; top: 0; margin-left: 0; } .sliderImage, .slider1Image, .slider2Image { float: left; position: relative; display: none; } .sliderImage span { position: absolute; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 384px; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none; } .slider1Image span, .slider2Image span { position: absolute; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 694px; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none; } .clear { clear: both; } .sliderImage span strong, .slider1Image span strong, .slider2Image span strong { font-size: 14px; } .top { top: 0; left: 0; } .bottom { bottom: 0; left: 0; } .left { top: 0; left: 0; width: 110px !important; height: 280px; } .right { right: 0; bottom: 0; width: 90px !important; height: 290px; } </style> <script type="text/javascript" src="http://gimnazia205.forum2x2.ru/10452.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#slider').s3Slider({ timeOut: 5000 }); }); </script> <center> <div id="slider"> <ul id="sliderContent"> <li class="sliderImage"> <img src="http://www.lotro-russia.com/forums/attachment.php?attachmentid=39422&d=1318768812" /> <span class="top"><strong>Текст подсказки</strong></span> </li> <li class="sliderImage"> <img src="http://www.lotro-russia.com/forums/attachment.php?attachmentid=39422&d=1318768812" /> <span class="top"><strong>Текст подсказки</strong></span> </li> <li class="sliderImage"> <img src="http://www.lotro-russia.com/forums/attachment.php?attachmentid=39422&d=1318768812" /> <span class="top"><strong>Текст подсказки</strong></span> </li> <div class="clear sliderImage"></div> </ul> </div> </center> </body></html>

Так должно выглядеть? У меня все равно не работает

автор Домовой Октябрь 23rd 2011, 12:18

я вам дал рабочий туториал, что вас не устраивает?

Вы нагородили не понять что, и ссылки на картинки у вас не понять куда перебрасывают.

автор gorezcaid Октябрь 23rd 2011, 12:23

Вот вся html страница.Посмотрите в блокноте.
Вставьте в новую страницу html (скрипты и стиль уже подключены)

Код:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru" xml:lang="ru" ><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <style type="text/css">#slider { width: 410px; /* important to be same as image width */ height: 300px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ } #slider1, #slider2 { width: 720px; /* important to be same as image width */ height: 300px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ } #sliderContent, #slider1Content, #slider2Content { width: 720px; position: absolute; top: 0; margin-left: 0; } .sliderImage, .slider1Image, .slider2Image { float: left; position: relative; display: none; } .sliderImage span { position: absolute; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 384px; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none; } .slider1Image span, .slider2Image span { position: absolute; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 694px; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none; } .clear { clear: both; } .sliderImage span strong, .slider1Image span strong, .slider2Image span strong { font-size: 14px; } .top { top: 0; left: 0; } .bottom { bottom: 0; left: 0; } .left { top: 0; left: 0; width: 110px !important; height: 280px; } .right { right: 0; bottom: 0; width: 90px !important; height: 290px; } </style> </head><body> <style> body { background : #BBEAFC url(http://dizayn.mybb.ru/uploads/000a/45/08/287-2-f.jpg) repeat-y fixed top center !important ; } </style> <style> /* размер картинок*/ #slider { width: 636px !important ; height: 400px !important ; } /* оформление поля подсказки*/ .sliderImage span { background-color:#000 !important ; color:#FFF !important ; font-size:16px !important ; font-family:Georgia !important ; opacity: 0.5!important ; width:636px !important; padding:10px 13px !important ; } </style> <script type="text/javascript"> /* ------------------------------------------------------------------------ s3Slider Developped By: Boban Karišik -> http://www.serie3.info/ CSS Help: Mйszбros Rуbert -> http://www.perspectived.com/ Version: 1.0 Copyright: Feel free to redistribute the script/modify it, as long as you leave my infos at the top. ------------------------------------------------------------------------- */ (function($){ $.fn.s3Slider = function(vars) { var element = this; var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000; var current = null; var timeOutFn = null; var faderStat = true; var mOver = false; var items = $("#" + element[0].id + "Content ." + element[0].id + "Image"); var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span"); items.each(function(i) { $(items[i]).mouseover(function() { mOver = true; }); $(items[i]).mouseout(function() { mOver = false; fadeElement(true); }); }); var fadeElement = function(isMouseOut) { var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut; thisTimeOut = (faderStat) ? 10 : thisTimeOut; if(items.length > 0) { timeOutFn = setTimeout(makeSlider, thisTimeOut); } else { console.log("Poof.."); } } var makeSlider = function() { current = (current != null) ? current : items[(items.length-1)]; var currNo = jQuery.inArray(current, items) + 1 currNo = (currNo == items.length) ? 0 : (currNo - 1); var newMargin = $(element).width() * currNo; if(faderStat == true) { if(!mOver) { $(items[currNo]).fadeIn((timeOut/6), function() { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } else { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } }); } } else { if(!mOver) { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } else { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } } } } makeSlider(); }; })(jQuery); </script> <script type="text/javascript"> $(document).ready(function() { $('#slider').s3Slider({ timeOut: 5000 }); }); </script> <center> <div id="slider"> <ul id="sliderContent"> <li class="sliderImage"> <img src="http://savepic.su/370629.jpg" /> <span class="top"><strong>Текст подсказки</strong></span> </li> <li class="sliderImage"> <img src="http://savepic.su/348101.jpg" /> <span class="top"><strong>Текст подсказки</strong></span> </li> <li class="sliderImage"> <img src="http://savepic.su/337861.jpg" /> <span class="top"><strong>Текст подсказки</strong></span> </li> <div class="clear sliderImage"></div> </ul> </div> </center> </body></html>

автор gorezcaid Октябрь 23rd 2011, 12:27

офф:

автор Pyrk1 Октябрь 23rd 2011, 16:43

Спасибо, оказывается это все работает, но только без предпросмотра и на стандартном верхе/низе.
Кстати, где изменить время показа картинки?

автор gorezcaid Октябрь 23rd 2011, 17:32

Кстати, где изменить время показа картинки?

Наверное timeOut: 1000 в миллисекундах. 1000 = 1 секунда

автор Pyrk1 Октябрь 23rd 2011, 17:38

Подскажите пожалуйста, как правильно убрать поле с текстов в верху картинки, когда я убираю:
<span class="top"><strong></strong></span>
Картинки больше не чередуются.

Скрипт для смены изображений

Скрипт для смены изображений

Re: Скрипт для смены изображений

Re: Скрипт для смены изображений

Re: Скрипт для смены изображений

Re: Скрипт для смены изображений

Re: Скрипт для смены изображений

Re: Скрипт для смены изображений

Re: Скрипт для смены изображений

Re: Скрипт для смены изображений

Re: Скрипт для смены изображений

Re: Скрипт для смены изображений

Re: Скрипт для смены изображений

Re: Скрипт для смены изображений

Re: Скрипт для смены изображений

Re: Скрипт для смены изображений

Re: Скрипт для смены изображений

Re: Скрипт для смены изображений

Re: Скрипт для смены изображений

Re: Скрипт для смены изображений

Re: Скрипт для смены изображений

Re: Скрипт для смены изображений

Re: Скрипт для смены изображений

Re: Скрипт для смены изображений