Несколько галерей на странице

[pavlovskyA]

Есть две галереи на странице (бывает нужно и больше), при нажатии на миниатюры во втором, переключение изображений происходит в первом. Как их сделать независимыми друг от друга и сохранить весь функционал? Смена 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]

Спасибо огромное! Сделал как вы написали, все работает так, как я и хотел. А ссылки получается нужны только, чтобы увеличенные изображения каждого блока просматривать как галерею?

[рони]

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>

[pavlovskyA]

Да, все так. Еще я убрал id="adpdp14" и id="dp14" - они не несли никакой стилевой нагрузки, нужны были только для работы старого скрипта.

[pavlovskyA]

Перезалил файл: первый вариант без ссылок, второй со ссылками.

[рони]

pavlovskyA,
и?

[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 ? " &nbsp; " +
                        title : "") + "</span>"
                }
            })
        })
    })
});