Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как сделать 2 галереи JQuery на одной странице? (https://javascript.ru/forum/jquery/18785-kak-sdelat-2-galerei-jquery-na-odnojj-stranice.html)

orendzi 15.07.2011 14:30

Как сделать 2 галереи JQuery на одной странице?
 
Всем привет =)
Я мало знакома с js и jquery, взяла код галереи s3Slider и по образцу встроила на страницу. однако у меня на странице два блока в каждом из которых должны быть разные галереи s3Slider. если подключить обе галереи к одному коду, то запускается сначала одна. проигрывается, потом завершается и только тогда начинается вторая... подскажите, пожалуйста, что сделать чтобы обе галереи загружались независимо друг от друга на одной странице и воспроизведение фото было бы зациклено? =)

ctpz 15.07.2011 14:46

Если можно, то приведите пожалуйста код html странички, где галлереи запускаются.

orendzi 15.07.2011 14:56

ок,
триггер:
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
блок с галереей:
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<a href="#"><img src="img/left_bun/1.jpg" alt="1" /></a>
<span class="top"><strong>Гарантия качества</strong></span></li>
<li class="sliderImage">
<a href="#"><img src="img/left_bun/2.jpg" alt="2" /></a>
<span class="top"><strong>Доставка</strong></span></li>
<li class="sliderImage">
<a href="#"><img src="img/left_bun/3.jpg" alt="3" /></a>
<span class="top"><strong>Оптимальная цена</strong></span></li>
<li class="sliderImage">
<a href="#"><img src="img/left_bun/4.png" alt="4" /></a>
<span class="top"><strong>Новейшие технологии</strong></span></li>
<div class="clear sliderImage"></div>
</ul>
</div>
и второй блок с галереей аналогичный. если в нём не менять имена, то получается вышеописанная ситуация, если менять (параллельно в js и css файлах), то эта галерея не запускается.

ctpz 15.07.2011 16:30

А страница с сим делом имеется? Если да, то пришлите пожалуйста ссылку на нее. Единственное, что я вам могу подсказать - это то, что надо просто дать слайдерам разные идентификаторы и внести некоторые изменения в триггер.

Если не сложно, то напишите в icq: 6259 84 597 (без пробелов).

lalala 16.07.2011 00:12

$(document).ready(function() {
    $('#slider_1').s3Slider({
          timeOut: 3000
    });
    $('#slider_2').s3Slider({
          timeOut: 3000
    });
     
});

<div id="slider_1"></div>
<div id="slider_2></div>

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

orendzi 16.07.2011 00:24

большое спасибо за ответы! =))))))))

ctpz 16.07.2011 11:50

orendzi, если будешь использовать то, что тебе прислал я, то плагин s3slider можешь удалить.

забыл вчера ответить, серое поле делается так:
<div style="width:100px; height:100px; background:#f00f00;">
<div style="margin-top:80px; width:100px; height:20px; position:absolute; opacity:0.75; background:#000000; color:#ffffff;">Текст блока</div>
</div>

orendzi 16.07.2011 13:51

как оно делается в html и css понятно =) но как подключить его к твоему коду? чтобы всплывало во время показа картинки и уплывало в паузу?

ctpz 16.07.2011 15:22

Смотри этот код


Часовой пояс GMT +3, время: 03:54.