点击每个fancybox画廊图像时如何获取图像数据？

Question

我在 fancybox 中创建了一个画廊。

图库会在其中生成一个动态加载的标题，我正在尝试查找被点击的图像的 url，并在其中获取隐藏的输入值，其中包含该帖子本身的 url。

这是我的代码：

$('.front .fancybox').attr('rel', 'gallery').fancybox({
    afterLoad: function (current, previous) {
            if (this.title) {
            var src = $('#fancybox-img').attr('src');
            console.log(src);

                var content = $('.front .fancybox').find('.perma_link').val();
                var textContent = $('.front .fancybox').find('.fancybox-title').text();
                var image = $('.front .fancybox').find('img').attr('src');
                var imageAlt = $('.front .fancybox').find('img').attr('alt');
                console.log(content);
                console.log(image);  

                //this.title += '<div class="lookbook-holder">'+ content +'</div>';
                $('.fancybox-title').css({'top':'0px', 'bottom':'auto'});
                // Lets create a social items holder
                this.title += '<div class="shared">';
                    this.title += '<div class="item">';
                    this.title += '<a class="icon-twitter"></a>';
                        this.title += '<div class="panel">';
                            this.title += '<div class="tweet"><a href="https://twitter.com/share" width="40" height="30" class="twitter-share-button" data-count="none" data-url="' + content + '">Tweet</a></div><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>';
                        this.title += '</div>';
                    this.title += '</div>';
                    this.title += '<div class="item">';
                    this.title += '<a class="icon-facebook"></a>';
                        this.title += '<div class="panel">';
                            this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + content + '&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
                            this.title += '</div>';
                    this.title += '</div>';
                    this.title += '<div class="item">';
                    this.title += '<a class="icon-google-plus"></a>';
                        this.title += '<div class="panel">';
                        this.title += '<div class="gplus"><g:plusone class="gplus" size="medium" annotation="none" href="' + content + '"></g:plusone><script type="text/javascript">(function() {var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);})();</script></div>';
                        this.title += '</div>';
                    this.title += '</div>';
                    this.title += '<div class="item">';
                    this.title += '<a class="icon-tumblr"></a>';
                        this.title += '<div class="panel">';
                            this.title += '<a class="tumbl-button" href="http://www.tumblr.com/share/photo?source=' + encodeURIComponent(image) + '&caption=' + encodeURIComponent(textContent) + '&clickthru=' + encodeURIComponent(content) +'" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:20px; height:20px; background:url("http://platform.tumblr.com/v1/share_4.png") top left no-repeat transparent;"></a>';
                        this.title += '</div>';
                    this.title += '</div>';
                    this.title += '<div class="item">';
                    this.title += '<a class="icon-pinterest"></a>';
                        this.title += '<div class="panel">';
                        this.title += '<a href="http://pinterest.com/pin/create/button/?url=' + content + '&media=' + image + '&description=' + imageAlt + '" class="pin-it-button" count-layout="none"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>';
                        this.title += '</div>';
                    this.title += '</div>';
                    this.title += '<div class="item">';
                    this.title += '<a class="icon-reddit"></a>';
                        this.title += '<div class="panel">';
                         this.title += '<a class="reddit" href="http://www.reddit.com/submit" onclick="window.location = "http://www.reddit.com/submit?url="' + content + '"> <img src="http://www.reddit.com/static/spreddit5.gif" alt="submit to reddit" border="0" /> </a>';
                        this.title += '</div>';
                    this.title += '</div>';
                    this.title += '<div class="item">';
                    this.title += '<a class="icon-mail"></a>';
                        this.title += '<div class="panel">';
                        this.title += '<a class="mail" target="_blank" href="mailto:?subject=' + textContent + '&amp;body=' + textContent + '" title="Share by Email"><p class="icon-mail"></p></a>';
                        this.title += '</div>';
                    this.title += '</div>';


                //Lets close the share holder here
                this.title += '</div>';

                // Start the request bar below

                    this.title += '<div class="request"><a href="#">request more information</a></div>';

            }


        },
        afterShow: function() {

            $('.fancybox-wrap .fancybox-title .shared .item').mouseenter(function() {
                $(this).find('.panel').stop(true, true).animate({'top': '-5px'}, 200);
            }).mouseleave(function() {
                $(this).find('.panel').stop(true, true).animate({'top': '30px'}, 200);
            });

        },
        helpers : {
            title : {
                type: 'outside'
            }
        },
    closeBtn  : false,
    aspectRatio : false,
    fitToView   : true,
    autoCenter  : true,
    autoHeight  : true,
    autoWidth   : true,
    autoResize  : true,
    openEffect  : 'fade',
    openSpeed   : 350,
    openEasing  : 'easeInOutQuart',
    closeEffect : 'fade',
    closeSpeed  : 350,
    closeEasing : 'easeInOutQuart',
    nextEffect : 'fade',        // 'elastic', 'fade', 'drop' or 'none'
    nextSpeed  : 350,
    nextEasing : 'easeInOutQuart',
    preload       : 3,          // Number of gallery images to preload
    mouseWheel    : true,
    overlay : {
        closeClick : true,      // if true, fancyBox will be closed when user clicks on the overlay
        css        : {'opacity': '1.0','backgroundColor': '#fdf6f0'}            // custom CSS properties
    }
});

** 这里是编辑区**

每个 fancybox 元素的 HTML：

<article class="two-four front">
    <div class="portfolio">
    {images}
    <a class="fancybox" href="{url}" title="{url_title}">
        <img class="{dimension} root" src="{url}" alt="{url_title}-image" />
        <input type="hidden" value="{url_title_path='ss13'}" class="perma_link" />          
    </a>
    {/images}
        </div>
</article>

在每个 fancybox 元素中都有图像，然后有一个带有 url 的隐藏输入。我想做的就是访问每个单击元素的 url 和图像 src，但无论我单击什么，我一直得到的只是集合中的第一张图像。

任何帮助都会很好

Answer 1

如果你想访问 URL、图片的src 和每个点击元素的隐藏input，那么你需要在fancybox 回调中使用$(this.element)（你可以使用beforeShow 而不是@ 987654326@) 所以：

$(".fancybox").attr('rel', 'gallery').fancybox({
    beforeShow: function () {
        if (this.title) {
            var src = this.href; // same as $('.fancybox-image').attr('src');
            var content = $(this.element).find('.perma_link').val();
            var textContent = this.title; // same as $(this.element).attr("title"); before you modify it using this.title +=
            var image = $(this.element).find('img').attr('src'); // this is the URL of the thumbnail
            var imageAlt = $(this.element).find('img').attr('alt');

            // validate each returned value
            console.log("src = " + src);
            console.log("content = " + content);
            console.log("textContent = " + textContent);
            console.log("image = " + image);
            console.log("imageAlt = " + imageAlt);
        }
    }
});

见JSFIDDLE