Question

Добрый день, возник вопрос. Установила слайдер, работает, но когда хочу поставить второй слайдер на туже страницу, слайдер вставляется, но фотографии не показывает и когда нажимаю на прокрутку, возвращает к первому слайдеру. Поскажите пожалуйста,что нужно изменить. я пробовала менять названия и поставлять значение 2, но наверное не совсем умело.

JavaScript:

 <script type="text/javascript" src="/js/slides.js"></script> <script type="text/javascript"> $(function(){ $('#slides').slides({ preload: true, preloadImage: 'loading.gif', play: 5000, pause: 2500, hoverPause: true, animationStart: function(current){ $('.caption').animate({ bottom:-35 },100); if (window.console && console.log) { console.log('animationStart on slide: ', current); }; }, animationComplete: function(current){ $('.caption').animate({ bottom:0 },200); if (window.console && console.log) { console.log('animationComplete on slide: ', current); }; }, slidesLoaded: function() { $('.caption').animate({ bottom:0 },200); } }); });</script>

CSS:

 .container {width:580px;padding:10px;margin:0 auto;position:relative;z-index:0;} #example {width:600px;height:350px;position:relative;} #ribbon {position:absolute;top:-3px;left:-15px;z-index:500;} #frame {position:absolute;z-index:0;width:739px;height:341px;top:-3px;left:-80px;} #slides {position:absolute;top:15px;left:4px;z-index:100;} .slides_container {width:570px;overflow:hidden;position:relative;display:none;} .slides_container div.slide {width:570px;height:270px;display:block;} #slides .next, #slides .prev {position:absolute;top:107px;left:-39px;width:24px;height:43px;display:block;z-index:101;} #slides .next {left:585px;} .pagination {margin:26px auto 0;width:100px;} .pagination li {float:left;margin:0 1px;list-style:none;} .pagination li a {display:block;width:12px;height:0;padding-top:12px;background-image:url(paginati.png);background-position:0 0;float:left;overflow:hidden;} .pagination li.current a {background-position:0 -12px;} .caption {z-index:500;position:absolute;bottom:-35px;left:0;height:30px;padding:5px 20px 0 20px;background:#000;background:rgba(0, 0, 0, .5);width:540px;font-size:1.3em;line-height:1.33;color:#fff;border-top:1px solid #000;text-shadow:none;} .slide{position: absolute; top: 0px; left: 570px; display: none; z-index: 0;} 

HTML:

 <div class="container" id="example"><div id="slides"><div class="slides_container">  <div class="slide"> <a href="#"><img src="slide-10.jpg" width="570" height="270" alt="Slide 1"></a> <div class="caption" style="bottom:0"><p>Логотип uCoz</p> </div></div>  <div class="slide"> <a href="#"><img src="slide-20.jpg" width="570" height="270" alt="Slide 2"></a> <div class="caption"> <p>Тут описание</p> </div></div>    </div>  <a href="#" class="prev"><img src="arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a> <a href="#" class="next"><img src="arrow-next.png" width="24" height="43" alt="Arrow Next"></a>  </div> <img src="example-.png" width="739" height="341" alt="Example Frame" id="frame"> </div>

Спасибо заранее

Answer 1

второй попробуйте поставить так

 <div class="container" id="example"><div id="slides"><div class="slides_container"> 

замените в хтмл выделенное желтым на

 example2

Comments

изменила, но слайдер вообще в верх "уехал"

---

в стилях

 #example, #example2 

---

заменила в CSS *добавила второй слайдер* и на страничке, но не поменялось

 <!--- тут мой 2слайдер--->   .container {width:580px;padding:10px;margin:0 auto;position:relative;z-index:0;} #example2 {width:600px;height:350px;position:relative;} #ribbon {position:absolute;top:-3px;left:-15px;z-index:500;} #frame {position:absolute;z-index:0;width:739px;height:341px;top:-3px;left:-80px;} #slides {position:absolute;top:15px;left:4px;z-index:100;} .slides_container

 

---

в таблицу стилей не отдельно а тому что есть надо было добавить

---

тогда первый слайдер вверх уехал

---

Tiara,

<!--- тут мой 2слайдер--->   .container {width:580px;padding:10px;margin:0 auto;position:relative;z-index:0;} #example2, #example  {width:600px;height:350px;position:relative;} #ribbon {position:absolute;top:-3px;left:-15px;z-index:500;} #frame {position:absolute;z-index:0;width:739px;height:341px;

---

первый слайдер занял свое законное место, но второй обьявил забастовку и отказывается работать:(

---

Нашла решение, просто нужно поменять

 <div id="slides1">

также подправить

 $(function(){ $('#slides1').slides(.

и по тому же принципу подправить CSS. Теперь вопрос, как убрать внизу черную полоску с текстом

---

там только одна полска высплывающая с описанием

 <div class="caption"> <p>Тут описание</p> </div>

---

заработало!!! Эх, ведь удаляла, да не то :(( И еще маленький вопросик. Нашла вот https://www.ucoz.ru/qa/index.php/1252

2. Вариант.
При нажатие на изображение открывается новое окно с полным размером изображения.
Для этого нужно <a href="путь к файлу реального размера изображения" target="_blank"><img style="border: 0px solid ; width: 224px; height: 323px;" alt="" src="путь к файлу того же реального размера изображения"></a>

Будет ли это в моем случае со слайдером работать?