Несколько галерей на странице
Есть две галереи на странице (бывает нужно и больше), при нажатии на миниатюры во втором, переключение изображений происходит в первом. Как их сделать независимыми друг от друга и сохранить весь функционал? Смена id элементов галерей не помогает. Сам в jquery не разбираюсь, может поможете, друзья?
Вот ссылка на это дело: слайдер. Заранее спасибо всем, кто сможет помочь |
pavlovskyA,
уберите onclick='setBigImage(this);' и замените скрипт на этот, ссылки тоже не нужны, кроме для большой картинки $(function() { $(".img").each(function(indx, el) { $(el).next().find("img").on("click", function() { $("img",el)[0].src = $("a",el)[0].href = this.src }) }) }); |
Спасибо огромное! Сделал как вы написали, все работает так, как я и хотел. А ссылки получается нужны только, чтобы увеличенные изображения каждого блока просматривать как галерею?
|
pavlovskyA,
нужны ссылки только в блоках div.img и код правился посмотрите такой ли у вас -- пост 2 |
pavlovskyA, что должно остатся
<div class="img"> <a href="img/1.jpg" rel="example_group" id="adpdp14"> <img src="img/1.jpg" id="dp14" style="margin-bottom: 3px;" alt="" /></a> </div> <div class="thumbs"> <div class="it"><img src="img/1.jpg" alt="" /></div> <div class="it"><img src="img/3.jpg" alt="" /></div> <div class="it"><img src="img/4.jpg" alt="" /></div> <div class="it"><img src="img/5.jpg" alt="" /></div> <div class="it"><img src="img/6.jpg" alt="" /></div> <div class="it"><img src="img/7.jpg" alt="" /></div> <div class="clr"></div> </div> |
Да, все так. Еще я убрал id="adpdp14" и id="dp14" - они не несли никакой стилевой нагрузки, нужны были только для работы старого скрипта.
|
Перезалил файл: первый вариант без ссылок, второй со ссылками.
|
pavlovskyA,
и? |
Это тестовый вариант. Помещу в рабочую страницу, посмотрю, как лучше будет. Проще и быстрее в реализации, конечно первый способ без ссылок, но на каком остановлюсь, пока не решил еще. Спасибо еще раз
|
pavlovskyA,
на всякий случай, не нужны ссылки и дополнительная инициализация fancybox, плюс показ галереи начинается с той большой картинки по которой кликнули. $(function() { $(".img").each(function(indx, el) { var img = $(el).next().find("img"); var index = 0; img.on("click", function() { index = img.index(this); $("img", el)[0].src = $("a", el)[0].href = this.src }); var map = $.map(img, function(el) { return { href: el.src } }); $(el).click(function(event) { event.preventDefault(); $.fancybox(map, { index: index, "titleFormat": function(title, currentArray, currentIndex, currentOpts) { return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + " / " + currentArray.length + (title.length ? " " + title : "") + "</span>" } }) }) }) }); |
Часовой пояс GMT +3, время: 08:55. |