こんにちは私はphpとjQueryで動的ギャラリーを作成するのに問題があります。簡単に言えば、私は（写真家のウェブサイトのために）素敵な形で表示したい100枚の写真を持っています。写真は最適化されているため、ギャラリー全体の重みは約10MBです。
galleryViewプラグインを使用しています。phpは、画像のフォルダからすべてのファイル名を取得し、順序付けされていないsのリストを作成するために使用されます。次に、GalleryViewはリストを取得し、きちんとしたギャラリーを作成します。
私が抱えている問題は、すべての写真がダウンロードされるまでギャラリーが表示されるのを待たなければならないということです。10mbsで、それは年齢がかかります。
ほんの数個のファイルがダウンロードされた後にギャラリーを実行する簡単なオプションはありますか？
それとも誰かがそれを行うためのより良い方法を知っているでしょうか？多くの画像を処理できる素晴らしいjQueryギャラリープラグインはありますか？私は1つを探すのにかなり失敗しました。
前もって感謝します
JQueryCycleプラグインは非常にカスタマイズ可能なオプションです。@ http：//jquery.malsup.com/cycle/をチェックしてください。
プリロードの例もあります@http ://jquery.malsup.com/cycle/add3.html
galleryViewでの画像のプリロードのネイティブサポートはないようです。仕様から：
将来のバージョンで画像のプリロードを検討します
だからあなたはあなた自身を転がさなければなりません。
jQuery.load()関数を見てください。
ロードされたら最初の画像を表示し、次に他の画像をバックグラウンドでロードします。
id最初の画像が=にあるとしましょうfirst
$(function() { // <== doc ready
// do something after first image is loaded
$("#first").load( /* show the first image */ );
// do something after all images loaded
$("img").load( /* do the main gallery loop */ )
});
必要に応じて上記を変更してください。最初の大きな画像と最初の5つのサムネイルなどを表示したい場合を考えてみましょう。
これが私が始める方法です。最初の画像だけでなく、最初の親指の列を埋めるのに必要な数の画像をプリロードすると、おそらくスムーズに見えると思います。
divすべての画像が読み込まれるまで、1つの画像だけで一時的な画像を表示します。
<div id="temp"></div>
<div id="photos" class="galleryview">
<img id="first" ... />
<img ... />
<img ... />
<img ... />
...
</div>
$(function() { // <== doc ready
var $photos = $("#photos"), $temp = $("#temp"),
$first = $("#first");
// Hide gallery:
$photos.hide();
// show temp when 1st img loaded
$first.load( $temp.append( $first.clone() ) );
// To make things look smooth you can also make
// a quick gallery view out of temp. This only has 1 image.
$temp.galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 100,
});
// do full gallery when all imgs loaded
$("img").load(
// remove the temp gallery
$temp.remove();
// show gallery
$photos.galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 100,
});
);
});
@Peterajtai
いいえ、その通りです。わかりません。私にとって最善の方法は、いくつかの画像を配置することから始めることです:(以下はgalleryviewのデフォルトの実装例からのものです）：
<div id="photos" class="galleryview">
<div class="panel">
<img src="img/gallery/01.jpg" />
<div class="panel-overlay">
<h2>Effet du soleil sur le paysage</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/tomharry" target="_blank">tomharry</a>. View full-size photo <a href="http://www.sxc.hu/photo/158829" target="_blank">here</a>.</p>
</div>
</div>
<div class="panel">
<img src="img/gallery/02.jpg" />
<div class="panel-overlay">
<h2>Eden</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/emsago" target="_blank">emsago</a>. View full-size photo <a href="http://www.sxc.hu/photo/152865" target="_blank">here</a>.</p>
</div>
</div>
<div class="panel">
<img src="img/gallery/03.jpg" />
<div class="panel-overlay">
<h2>Snail on the Corn</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/baines" target="_blank">baines</a>. View full-size photo <a href="http://www.sxc.hu/photo/34453" target="_blank">here</a>.</p>
</div>
</div>
<div class="panel">
<img src="img/gallery/04.jpg" />
<div class="panel-overlay">
<h2>Flowers</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/jazza" target="_blank">jazza</a>. View full-size photo <a href="http://www.sxc.hu/photo/990169" target="_blank">here</a>.</p>
</div>
</div>
<div class="panel">
<img src="img/gallery/06.jpg" />
<div class="panel-overlay">
<h2>Alone Beach 2B</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/sgursozlu" target="_blank">sgursozlu</a>. View full-size photo <a href="http://www.sxc.hu/photo/738279" target="_blank">here</a>.</p>
</div>
</div>
<div class="panel">
<img src="img/gallery/05.jpg" />
<div class="panel-overlay">
<h2>Sunrise Trees</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/a_glitch" target="_blank">a_glitch</a>. View full-size photo <a href="http://www.sxc.hu/photo/289581" target="_blank">here</a>.</p>
</div>
</div>
<div class="panel">
<img src="img/gallery/07.jpg" />
<div class="panel-overlay">
<h2>Waterfall</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/thesaint" target="_blank">thesaint</a>. View full-size photo <a href="http://www.sxc.hu/photo/174331" target="_blank">here</a>.</p>
</div>
</div>
<div class="panel">
<img src="img/gallery/08.jpg" />
<div class="panel-overlay">
<h2>Death Valley</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/djkmart" target="_blank">djkmart</a>. View full-size photo <a href="http://www.sxc.hu/photo/270109" target="_blank">here</a>.</p>
</div>
</div>
<ul class="filmstrip">
<li><img src="img/gallery/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
<li><img src="img/gallery/frame-02.jpg" alt="Eden" title="Eden" /></li>
<li><img src="img/gallery/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></li>
<li><img src="img/gallery/frame-04.jpg" alt="Flowers" title="Flowers" /></li>
<li><img src="img/gallery/frame-06.jpg" alt="Alone Beach" title="Alone Beach" /></li>
<li><img src="img/gallery/frame-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" /></li>
<li><img src="img/gallery/frame-07.jpg" alt="Waterfall" title="Waterfall" /></li>
<li><img src="img/gallery/frame-08.jpg" alt="Death Valley" title="Death Valley" /></li>
</ul>
</div>
次に、次のようにajaxを実行します。
$.ajax({
url: 'getImgSrcs.php', //this will access the server and return srcs for remaining images, let's say pipe delimited for example
data: {'getimages': 'true'}, // this could easily be {getimages: 'block 1'}
type: 'post',
success function(data) {
imgarray = data.split("|"); // split into array giving thumbsrc:fullsrc:title;
$.each(imgarray, function(index) {
var thumbsrc = data[index].split(":")[0];
var fullsrc = data[index].split(":")[1];
var title = data[index].split(":")[2];
$('<div class="panel"></div>')
.append('<img src="' + thumbsrc + '" />')
.append('<div class="panel-overlay"></div>')
.append('<h2>' + title + '</h2>');
.append('<p>View full-size photo <a href="' + fullsrc + '" target="_blank">here</a>.</p>')
.appendTo('#photos');
})
}
})
同じ機能を使用して、リストアイテムとappendTo（'ul.filmstrip'）;を作成できます。
個人的には、php側でforループを使用して画像ブロックを作成し、挿入できるようにします。
success: function(data) {
$("#photos").append(data);
}
または、xmlフィードまたはjsonオブジェクトを作成して、それを実行することもできます。あなたの個人的な選択。