ファンシーボックスにギャラリーを作りました。
ギャラリーは動的に読み込まれたタイトルを生成し、クリックされた画像の 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 + '&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 を含む隠し入力があります。やりたいことは、クリックした各要素の URL と画像の src にアクセスすることだけですが、何をクリックしてもコレクション内の最初の画像しか得られません。
これについてどんな助けも素晴らしいでしょう