フォト ギャラリーがページの更新時にしか読み込まれないという問題があります。運がないことを除けば、修正は非常に簡単だと思います..append（）関数がロードされた後に関数を呼び出す必要があると思います。
フォト ギャラリーは非常に複雑です。4 つのコンポーネントがあります。
- 3 つの異なる xml ファイルから取得した画像を div で追加します。
- 画像 div には css が与えられ、モザイク jquery プラグインからのオーバーレイが提供されます。
- 画像は、特定の写真を表示および非表示にする isotope jquery プラグインによってグループに配置されます。
- 画像をクリックすると、fancybox jquery プラグインが使用されます。
まず、3 つの異なる xml フィードからページに読み込まれた画像を追加します。このコードは正常に機能し、ページに表示されない場合でも画像が追加されます (div とサイズの検査を使用します)。
コードを追加
$(document).ready(function(){
$.ajax({
type: "GET",
url:'/gallery/apartment/PhotoGallery.xml', // Add your url to your photo gallery xml feed
dataType: 'xml',
success: xmlParser1
});
// don't touch anything under me
function xmlParser1(xml) {
$(xml).find("img").each(function () {
$(".apartment-images").append('<div class="mosaic-block third fade"><a href="/gallery/apartment/' + $(this).attr('src') + '" class="mosaic-overlay fancybox" data-fancybox-group="gallery" title="' + $(this).attr('alt') + '"></a><div class="mosaic-backdrop"><img src="/gallery/apartment/' + $(this).attr('src') + '?Action=thumbnail&Width=500&Height=375&algorithm=fill_proportional" alt="' + $(this).attr('alt') + '" /></div></div></div>');
});
// don't touch anything above me
}
$.ajax({
type: "GET",
url:'/gallery/views/PhotoGallery.xml', // Add your url to your photo gallery xml feed
dataType: 'xml',
success: xmlParser2
});
// don't touch anything under me
function xmlParser2(xml) {
$(xml).find("img").each(function () {
$(".the-views-images").append('<div class="mosaic-block third fade"><a href="/gallery/views/' + $(this).attr('src') + '" class="mosaic-overlay fancybox" data-fancybox-group="gallery" title="' + $(this).attr('alt') + '"></a><div class="mosaic-backdrop"><img src="/gallery/views/' + $(this).attr('src') + '?Action=thumbnail&Width=500&Height=375&algorithm=fill_proportional" alt="' + $(this).attr('alt') + '" /></div></div></div>');
});
// don't touch anything above me
}
$.ajax({
type: "GET",
url:'/gallery/moana/PhotoGallery.xml', // Add your url to your photo gallery xml feed
dataType: 'xml',
success: xmlParser3
});
// don't touch anything under me
function xmlParser3(xml) {
$(xml).find("img").each(function () {
$(".moana-images").append('<div class="mosaic-block third fade"><a href="/gallery/moana/' + $(this).attr('src') + '" class="mosaic-overlay fancybox" data-fancybox-group="gallery" title="' + $(this).attr('alt') + '"></a><div class="mosaic-backdrop"><img src="/gallery/moana/' + $(this).attr('src') + '?Action=thumbnail&Width=500&Height=375&algorithm=fill_proportional" alt="' + $(this).attr('alt') + '" /></div></div></div>');
});
// don't touch anything above me
}
});
次に、main.js ファイル内に 3 つのコードがあり (これらは js ファイル内の関数を参照していると思います)、画像に jQuery 機能を提供します。
モザイク機能
mosaic : function(){
$('.fade').mosaic();
}, // mosaic
同位体機能
isotype: function() {
$(window).load(function(){
if($('#thumb-gallery').size() === 0){return;}
var $container = $('#thumb-gallery');
$container.isotope({
masonry: {
columnWidth: 1 //was 26
},
sortBy: 'number',
getSortData: {
number: function($elem) {
var number = $elem.hasClass('element') ? $elem.find('.number').text() : $elem.attr('data-number');
return parseInt(number, 10);
},
alphabetical: function($elem) {
var name = $elem.find('.name'),
itemText = name.length ? name : $elem;
return itemText.text();
}
}
});
var $optionSets = $('.meta.option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function() {
var $this = $(this);
// don't proceed if already selected
if ($this.hasClass('selected')) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[key] = value;
if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
// changes in layout modes need extra logic
changeLayoutMode($this, options)
} else {
// otherwise, apply new options
$container.isotope(options);
}
return false;
});
}); // window.load()
} // isotope()
ファンシーボックス機能
fancyBox : function(){
$('.fancybox').fancybox();
}
これらの各参照関数は次のとおりです。
- http://moanabeach.businesscatalyst.com/js/mosaic.1.0.1.min.js
- http://moanabeach.businesscatalyst.com/js/jquery.isotope.js
- http://moanabeach.businesscatalyst.com/js/fancybox/jquery.fancybox.js?v=2.1.4
最初の読み込みとページの更新時にのみ正しく読み込まれるライブ ギャラリーをここで表示できます。
Web サイトの他のリンクをクリックした後、またはブラウザの [戻る] ボタンを使用した後に読み込まれません。
起こっているように見えるのは、画像の前に #thumb-gallery の高さが読み込まれるため、高さが小さすぎて画像が表示されないことです。左側のメニューをクリックすると、高さが更新され、ギャラリーが正常に機能します。変更される 2 つの値は、#thumb-image の高さです。
**PAGE LOAD:**
<div class="four-fifths right last thumb-gallery super-list variable-sizes isotope" id="thumb-gallery" style="position: relative; overflow: hidden; height: 98px;">
**PAGE REFRESH:**
<div class="four-fifths right last thumb-gallery super-list variable-sizes isotope" id="thumb-gallery" style="position: relative; overflow: hidden; height: 1359px;">
注: 高さはブラウザ ウィンドウによって異なります。
また、.isotope-item -webkit-transform: translate3d(0px, 0px, 0px); ページを更新しない限り、各画像グループで正しく読み込まれません。通常のページ読み込みでは、すべての画像グループが互いの上に配置されますが、ページの更新時には -webkit-transform: translate3d(0px 123px 0px) があり、垂直方向に間隔が空けられます。
これはすべて、append 関数の最後に呼び出されるモザイク、アイソトープ、またはファンシーボックス関数 (すべての関数ではないにしても) の 1 つに帰着すると思います。そうすれば、他の処理が行われる前に画像が読み込まれて追加されます。ただし、これを行う方法がわかりません。
さらに情報が必要な場合は、迅速に対応します。
ライブページ: moanabeach.businesscatalyst.com/gallery
前もって感謝します。
注: jquery ファイル (main、isotope、mosaic、fancybox) は作成していないため、main.js と他のファイルとの接続についてはわかりません。テンプレートが付属していました。私が変更した唯一のコードは追加コードです。
試み：
- document.ready と window.load およびさまざまな関数をいじってみましょう。
- JavaScriptコードとファイルの位置