0

これは、FancyBox を呼び出すスクリプトです。

<script type="text/javascript">
jQuery(document).ready(function() {
 jQuery(".fancybox").fancybox({
  helpers : { 
   title : { type : 'float' }
  },
      beforeShow: function(){
       this.title = '<div>'+jQuery(this.element).next('div').html()+'</div>';
      }
 });
});
</script>

そして、これらはHTMLの私の6つの画像です

<div id="mydiv">
<a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"><img id="thumb1" src="THUMB_URL" /></a><div style="display: none;">DESCRIPTION</div>
<a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"><img id="thumb2" src="THUMB_URL" /></a><div style="display: none;">DESCRIPTION</div>
<a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"><img id="thumb3" src="THUMB_URL" /></a><div style="display: none;">DESCRIPTION</div>
<a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"><img id="thumb4" src="THUMB_URL" /></a><div style="display: none;">DESCRIPTION</div>
<a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"><img id="thumb5" src="THUMB_URL" /></a><div style="display: none;">DESCRIPTION</div>
<a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"><img id="thumb6" src="THUMB_URL" /></a><div style="display: none;">DESCRIPTION</div>
</div>

私がやりたいことは、これらの6つの画像のみをページに表示することですが、ユーザーが次のアイコン(fancybox内)をクリックすると、他の画像がギャラリーに読み込まれます(したがって、5番目の画像に到達すると再起動しますが、他のイメージに進みます)。display:noneたくさんの画像になるので、次にクリックするときに削除してこれを行うことはできません。の画像display:noneは、読み込み時に読み込まれます。これをきれいな方法で行う方法の例を教えてください。:)

4

1 に答える 1

1

div追加の画像については、次のような追加の非表示内にリンクを配置するだけです。

<div style="display: none;">
 <a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"></a><div>DESCRIPTION</div>
 <a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"></a><div>DESCRIPTION</div>
 <a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"></a><div>DESCRIPTION</div>
 <a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"></a><div>DESCRIPTION</div>
 ... etc
</div>

非表示のリンク内のリンクにはサムネイル画像 ( ) がdiv ないため、実際にはページの読み込みにオーバーヘッドを追加していないことに注意<img />してください....そしてリンクに関しては、ギャラリーにさらに画像が必要な場合は、それらをハードコーディングする必要があります。たとえば、スクリプト内のように、ここまたはどこでも。

于 2013-06-08T17:14:42.187 に答える