WordPress と Zurb Foundation を利用するカスタム ギャラリーを構築しています。
- テンプレートには、カスタム投稿のページ アーカイブが表示されます。カスタム クエリは、リンクされたサムネイルのグリッドをページに取り込みます。
- Foundation 4 の Reveal モーダル プラグインと WordPress の AJAX を使用して、コンテンツを Reveal-modal div に追加します。
.previous-sketchモーダル ウィンドウの,リンクをクリックすると.next-sketch、対応する隣接する投稿が表示されます。
上記の作業を行うことができましたが、1 つのモーダル ウィンドウを開いて投稿を循環すると、同期がずれ始めることがわかりました。モーダルウィンドウが表示されているときに暗い背景.reveal-modal-bgが表示されず、動作がやや奇妙です。
この問題について何か特別な洞察があれば、事前に感謝します。
更新:私はこれにもう少し取り組むことができました.ほとんどの場合、うまくいくようです. 私のソリューションは最もエレガントではないと感じていますが。
私のjQueryコードは以下です。
(function($) {
$.fn.displayPost = function() {
event.preventDefault();
var post_id = $(this).data("id");
var id = "#" + post_id;
// Check if the reveal modal for the specific post id doesn't already exist by checking for it's length
if($(id).length == 0 ) {
// We'll add an ID to the new reveal modal; we'll use that same ID to check if it exists in the future.
var modal = $('<div>').attr('id', post_id ).addClass('reveal-modal').appendTo('body');
var ajaxURL = MyAjax.ajaxurl;
$.ajax({
type: 'POST',
url: ajaxURL,
data: {"action": "load-content", post_id: post_id },
success: function(response) {
modal.empty().html(response).append('<a class="close-reveal-modal">×</a>').foundation('reveal', 'open');
modal.bind('opened', function() {
// Trigger window resize to reset the left margin.
$(window).trigger('resize');
var left;
left = Math.max($(window).width() - $(id).outerWidth(), 0) / 2;
$(id).css({
left:left + $(window).scrollLeft()
});
return false;
});
}
});
}
//If the div with the ID already exists we'll just open it.
else {
$(id).foundation('reveal', 'open');
}
// Recalculate left margin on window resize
$(window).resize(function(){
var left;
left = Math.max($(window).width() - $(id).outerWidth(), 0) / 2;
$(id).css({
left:left + $(window).scrollLeft()
});
});
}
})(jQuery);
// Apply the function when we click on the .reveal link
jQuery(document).on("click", ".reveal,.secondary", function() {
jQuery(this).displayPost();
});
// Use Reveal's built in function to close the div when we click our paging links
jQuery(document).on("click", ".secondary", function() {
var id = jQuery(this).closest("div").attr("id");
jQuery(id).foundation('reveal', 'close');
});