Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.07.2011, 14:30
Новичок на форуме
Отправить личное сообщение для orendzi Посмотреть профиль Найти все сообщения от orendzi
 
Регистрация: 10.10.2010
Сообщений: 8

Как сделать 2 галереи JQuery на одной странице?
Всем привет =)
Я мало знакома с js и jquery, взяла код галереи s3Slider и по образцу встроила на страницу. однако у меня на странице два блока в каждом из которых должны быть разные галереи s3Slider. если подключить обе галереи к одному коду, то запускается сначала одна. проигрывается, потом завершается и только тогда начинается вторая... подскажите, пожалуйста, что сделать чтобы обе галереи загружались независимо друг от друга на одной странице и воспроизведение фото было бы зациклено? =)
Ответить с цитированием
  #2 (permalink)  
Старый 15.07.2011, 14:46
Аспирант
Отправить личное сообщение для ctpz Посмотреть профиль Найти все сообщения от ctpz
 
Регистрация: 30.06.2011
Сообщений: 63

Если можно, то приведите пожалуйста код html странички, где галлереи запускаются.
Ответить с цитированием
  #3 (permalink)  
Старый 15.07.2011, 14:56
Новичок на форуме
Отправить личное сообщение для orendzi Посмотреть профиль Найти все сообщения от orendzi
 
Регистрация: 10.10.2010
Сообщений: 8

ок,
триггер:
<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 файлах), то эта галерея не запускается.
Ответить с цитированием
  #4 (permalink)  
Старый 15.07.2011, 16:30
Аспирант
Отправить личное сообщение для ctpz Посмотреть профиль Найти все сообщения от ctpz
 
Регистрация: 30.06.2011
Сообщений: 63

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

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

Последний раз редактировалось ctpz, 15.07.2011 в 16:33.
Ответить с цитированием
  #5 (permalink)  
Старый 16.07.2011, 00:12
Аспирант
Отправить личное сообщение для lalala Посмотреть профиль Найти все сообщения от lalala
 
Регистрация: 04.03.2011
Сообщений: 87

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

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

это к тому что должно быть две галереи с разными ID
а по поводу зацыкливания, смотрите настройки
Ответить с цитированием
  #6 (permalink)  
Старый 16.07.2011, 00:24
Новичок на форуме
Отправить личное сообщение для orendzi Посмотреть профиль Найти все сообщения от orendzi
 
Регистрация: 10.10.2010
Сообщений: 8

большое спасибо за ответы! =))))))))
Ответить с цитированием
  #7 (permalink)  
Старый 16.07.2011, 11:50
Аспирант
Отправить личное сообщение для ctpz Посмотреть профиль Найти все сообщения от ctpz
 
Регистрация: 30.06.2011
Сообщений: 63

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>
Ответить с цитированием
  #8 (permalink)  
Старый 16.07.2011, 13:51
Новичок на форуме
Отправить личное сообщение для orendzi Посмотреть профиль Найти все сообщения от orendzi
 
Регистрация: 10.10.2010
Сообщений: 8

как оно делается в html и css понятно =) но как подключить его к твоему коду? чтобы всплывало во время показа картинки и уплывало в паузу?
Ответить с цитированием
  #9 (permalink)  
Старый 16.07.2011, 15:22
Аспирант
Отправить личное сообщение для ctpz Посмотреть профиль Найти все сообщения от ctpz
 
Регистрация: 30.06.2011
Сообщений: 63

Смотри этот код
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать такое fancy menu uonax Элементы интерфейса 2 22.05.2010 12:52
Как сделать просмотр большой картинки? greatilya Элементы интерфейса 7 20.05.2010 13:44
Многостраничная галерея на lightbox.js Как сделать? MASTER Общие вопросы Javascript 9 24.07.2009 14:38
Как сделать слой неактивным AlexMak Events/DOM/Window 3 04.12.2008 15:56
как сделать ссылку перехода на скрипт bazhan Общие вопросы Javascript 6 04.09.2008 10:56