パネル内のGalleryViewフィルムストリップの写真

StackOverflow https://stackoverflow.com/questions/2266275

質問

私は 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秒は、そこに私をもたらした：）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top