2

So, here's the scenario: I'm trying to make a gallery of sorts where there is a 'main' image that has Fancybox enabled ( with a class of .fancybox ) and below this main image is a few thumbnails which, when clicked, update the href and src of the main <a> and <img> elements, respectively.

Now, when the page loads, if you click the main image, the Fancybox fires with no issue as expected. However, when I click one of the thumbnails below, the main image and link update with the thumbnails content -- if I click the main image now, it just goes to the specified URL; no Fancybox.

Even if I were to re-call the $('.fancybox').fancybox(); after the swap has taken place; nothing still.

At any rate, here's the code and jsFiddle:

Fiddle

http://jsfiddle.net/sbeliv01/jRsjK/4481/

HTML

<!-- The "Main" Photo -->
<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg">
    <img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/>
</a>

<!-- The thumbnails that update the main photo -->
<ul>
    <li>
        <a class="update" href="http://placekitten.com/600/300" title="This is the test title.">
            <img src="http://placekitten.com/150/150" width="45" width="45" title="This is the test title." />
        </a>
    </li>
    <li>
        <a class="update" href="http://placekitten.com/600/300" title="This is the test title.">
            <img src="http://placekitten.com/150/149" width="45" width="45" title="This is the test title." />
        </a>
    </li>
    <li>
        <a class="update" href="http://placekitten.com/600/300" title="This is the test title.">
            <img src="http://placekitten.com/g/150/150" width="45" width="45" title="This is the test." />
        </a>
    </li>
</ul>

JS

$(".fancybox").fancybox({
    live: true
});

$('.update').on('click', function(e) {

    e.preventDefault();

    var main      = $('.fancybox'),
        href      = $(this).prop('href'),
        title     = $(this).prop('title'),
        img_src   = $(this).find('img').prop('src'),
        img_title = $(this).find('img').prop('title');

    main
        .prop('title', title)
        .prop('href', href)
        .find('img')
        .prop('src', img_src)
        .prop('title', img_title);

    $(".fancybox").fancybox();

});

I'm probably too focused to pick up anything obvious so thanks for any help.

4

1 回答 1

3

fancybox 第一次工作的原因是，第一个链接的 URL 以图像为目标，例如：

http://fancyapps.com/fancybox/demo/1_b.jpg

...而其他人到一个位置，例如：

http://placekitten.com/600/300

...没有任何图像扩展名。在第二个 URL 中，fancybox 不知道type要处理什么内容，这就是链接在新窗口/选项卡中打开的原因。

你必须强迫type内容image喜欢

$(".fancybox").fancybox({
    type : "image"
});

你实际上不需要re-call the $('.fancybox').fancybox(); after the swap has taken place

见jsfiddle

于 2013-04-19T01:30:12.750 回答