パネル内のGalleryViewフィルムストリップの写真
-
20-09-2019 - |
質問
私は GalleryView のプラグインは、バージョン2.0を使用して画像ギャラリーにフィルムストリップを追加しようとしています。私は、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>
</ul>
私のギャラリーでは、このようになります:
<div id="gallery_wrap">
<div id="photos" class="galleryview">
<div class="panel">
<img src="/upload/pic/IMG_02740_orig.jpg" />
</div>
<div class="panel">
<img src="/upload/pic/IMG_02740_orig.jpg" />
</div>
<ul class="filmstrip">
<li>
<img src="/upload/pic/IMG_02739_thumb.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
<li>
<img src="/upload/pic/IMG_02739_thumb.jpg" alt="Eden" title="Eden" /></li>
</ul>
</div>
</div>
私が間違っているのか?私は、例から、基本的には、全コピー&ペーストを持っており、それが機能していません。誰もが正常にGalleryViewで、このフィルムストリップ部分を実装していますか?
それがどのように見えるか:
http://img692.imageshack.us/img692/852/galleryviewfilmstripima .JPGする
あなたは明確パネルでサムネールPICの代わりに、元の(サムネイルとは全く別の画像)であることが確認できます。
私は、次の設定オブジェクトを使用しています:
<script type="text/javascript">
$(function() {
$('#photos').galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 38,
transition_speed: 1200,
background_color: '#222',
border: 'none',
easing: 'easeInOutBack',
pause_on_hover: true,
nav_theme: 'custom',
overlay_height: 52,
filmstrip_position: 'top',
overlay_position: 'top'
});
});
</script>
解決
念の問題には、 GalleryView 2.0 のに関連しているため、サンプルを参照してくださいそれは、画像のリスト作成の変化があります:あなたはもうサムネイルを使用する必要はありません... Your'eギャラリー記述は
のようになります。<div id="gallery_wrap">
<ul id="gallery">
<li>
<span class="panel-overlay">Effet du soleil</span>
<img src="/upload/pic/IMG_02740_orig.jpg" />
</li>
<li>
<span class="panel-overlay">Eden</span>
<img src="/upload/pic/IMG_02740_orig.jpg" />
</li>
</ul>
</div>
とにかく、参照 GalleryView 2.0サンプルの
他のヒント
カスタムサムネイルを持つことが可能です。
<ul id="gallery">
<li><img class="panel-content" src="path/to/image" /><img src="path/to/thumbnail" /></li>
</ul>
が、パネル・オーバーレイはもう動作しません。コード読み取りの5秒は、そこに私をもたらした:)
所属していません StackOverflow