我在fancybox中创建了一个画廊。
图库会生成一个动态加载的标题，我正在尝试查找被点击的图像的网址，并在其中获取隐藏的输入值，其中包含该帖子本身的网址。
这是我的代码：
$('.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 + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&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 + '&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。所有我想做的就是访问每个被点击的元素和图像src的url，但无论我点击什么，我所得到的只是集合中的第一个图像。
任何帮助都会很棒
答案 0 :(得分：0)
如果您想访问网址，图片的src以及每个点击元素的隐藏input，那么您需要在fancybox回调中使用$(this.element)（您可能更愿意使用beforeShow代替afterLoad）所以：
$(".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