1

式エンジンで fancybox を使用すると問題が発生します。

基本的に、マトリックスプラグインを使用してさまざまなギャラリーをセットアップしています。各ギャラリーには約 10 枚の画像があります。基本的に、サムネイルでファンシーボックスとファンシーボックスを開いて、そのマトリックスエントリ/ギャラリーの画像をスクロールできるようにしたいと考えています。

シンプルに聞こえますが、fancyboxで画像をスクロールできないようです。最初の画像にとどまります。

これはサムネイルの私のコードです:

<ul id="image_gallery">
              {exp:channel:entries channel="gallery_images"}
               <li>
                    <a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title}">
                    {gallery_image limit="1"}
                        {exp:imgsizer:size src="{image}" width="200px" height="180px"}
                            <img src="{sized}" width="{width}" height="{height}" alt="" />
                    {/exp:imgsizer:size}
                    {/gallery_image}
                    </a>
                    <h1>{title}</h1>
                </li>
                {/exp:channel:entries}
        </ul>

これは fancybox テンプレートの私のコードです:

{exp:channel:entries channel="gallery_images"}
<ul id="img_gallery">
{gallery_image}
<li>
    {exp:imgsizer:size src="{image}" width="650px" height="500px"}
    <img src="{sized}" width="{width}" height="{height}" alt=""/>
    {/exp:imgsizer:size}
</li>
{/gallery_image}
</ul>{/exp:channel:entries}

画像のスクロールを除いて、すべて正常に動作します。

助けていただければ幸いです！

4

1 に答える 1

2

ExpressionEngine タグの出力を見ないと、どこに問題があるのか​​を理解するのは困難です。ただし、問題は、ギャラリー内のすべての画像が同じHTML 関係属性を共有していることを確認するのと同じくらい簡単な場合があります。

Fancybox ギャラリーrel=""は、同じ属性を共有する要素から作成されます。

<a class="gallery" rel="set_1" href="#"><img src="1.jpg" alt=""/></a>
<a class="gallery" rel="set_1" href="#"><img src="2.jpg" alt=""/></a>
<a class="gallery" rel="set_1" href="#"><img src="3.jpg" alt=""/></a>

<script>
    $('a.gallery').fancybox();
</script>

コードを確認すると、ExpressionEngine{title}タグをrel=""属性として使用しています。

チャンネル エントリのタイトルにはスペースやその他の特殊文字が含まれている可能性が高いため、 URL タイトルフィールドを使用することをお勧めします{title_permalink}。

この{title_permalink}タグは、ハイフンまたはアンダースコアを文字区切り文字として使用して、チャネル エントリ タイトルをURL セーフに変換します ( [グローバル チャネル設定]の [ URL タイトルの単語区切り] 設定を使用)。

更新されたサムネイル コードは次のようになります。

<a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title_permalink}">
    <img src="{sized}" width="{width}" height="{height}" alt="" />
</a>

これで問題が解決しない場合は、 jsFiddleやPastieなどのより完全なコード サンプルを提供して、問題がどこにあるのかを理解できるようにしてください。

于 2011-05-26T15:46:07.000 に答える