3

素晴らしいCycle2プラグインを使用していますが、この例のように、スライドショーの画像のサムネイルを自動的に作成したいと思います。

ただし、その例には、img毎回スライドとしてのそれ自体があります。私のレイアウトのため、毎回imgコンテナ内にある必要があります。figure以下またはこのフィドルを参照してください：

<div class="slideshow-listing cycle-slideshow"
     data-cycle-slides="figure"
     data-cycle-auto-height="4:3"
     data-cycle-pager-template="<span><img src='{{src}}' /></span>"
     data-pause-on-hover="true">

    <figure><img src="http://placehold.it/250x570"></figure>
    <figure><img src="http://placehold.it/250x570"></figure>
    <figure><img src="http://placehold.it/450x370"></figure>
    <figure><img src="http://placehold.it/250x570"></figure>
    <figure><img src="http://placehold.it/250x570"></figure>

    <div class="cycle-pager"></div>
</div><!-- /slideshow-listing -->

これは、私のページャーテンプレートが画像ソースにアクセスできないことを意味します。ドキュメントによると：

Cycle2は、デフォルトで単純なMustacheスタイルのテンプレートを使用します。

ですからimg src、毎回内にアクセスするようにテンプレートを修正する非常に簡単な方法があると思いfigureます…それが何であるかはわかりません。前もって感謝します。

4

2 に答える 2

2

更新：jsFiddleでこれを行う方法を理解しました。私が最初に投稿してから、例は少し変更されています。

問題は、テンプレートに渡されるオブジェクトがfigureHTML要素であるということです。Cycle2のテンプレートエンジンは、Figure要素自体の属性にのみアクセスできます。imgその属性にアクセスできる方法でタグにアクセスするためにinnerHTMLプロパティを調べる方法がわかりませんsrc。

figureHTML構造をそのまま（含む）にすることを主張する場合は、 src属性をタグimgに動的にコピーすることをお勧めします。HTMLをそのままにして、便利なjQueryを使用して動的にこれを行うことができます。また、これを実行するまで、Cycle2プラグインの実行を遅らせる必要があります。これがトリックを行うべき例です。imgfigure

HTML（これは同じですが、cycle-slideshowクラスをから削除しただけですdiv）：

<div class="slideshow-listing"
     data-cycle-slides="figure"
     data-cycle-auto-height="4:3"
     data-cycle-pager-template="<span><img src='{{src}}' /></span>"
     data-pause-on-hover="true">

    <figure><img src="http://placehold.it/250x570"></figure>
    <figure><img src="http://placehold.it/250x570"></figure>
    <figure><img src="http://placehold.it/450x370"></figure>
    <figure><img src="http://placehold.it/250x570"></figure>
    <figure><img src="http://placehold.it/250x570"></figure>
    <div class="cycle-pager"></div>
</div><!-- /slideshow-listing -->

JavaScript：

$(function() {
    var $slideshow = $(".slideshow-listing");
    var $figures = $slideshow.find("figure");
    var length = $figures.length;

    $figures.each(function() {
        var $this = $(this);
        var src = $this.find("img").attr("src");
        $this.prop("src", src);
        length--;

        if (!length) {
            $slideshow.cycle();
        }
    });
});

また、サムネイル画像の高さ/幅を制限するためにCSSを追加する必要があります。jsFiddleに簡単な例を示します。比例してスケーリングされませんが、アイデアは得られます。スタイルの問題はあなたに任せましょう。

リンク：図にコピーされたimgsrcを示すjsFiddle

あなた自身のスクリプトでそれを試してみて、それがうまくいくかどうか私に知らせてください！

于 2013-03-08T01:36:29.357 に答える
2

jQueryスクリプトを使用せずにimgのsrcを取得する簡単な方法があります。

高度なテンプレートに関するcycle2のドキュメント（http://jquery.malsup.com/cycle2/demo/tmpl2.php）によると

firstChild.srcを使用して、img要素のsrcプロパティにアクセスできます。

これがあなたの答えの別の解決策です（私はcycle2のオートセレクターが機能するようにcycle-slideshowクラスを維持しました）

<div class="slideshow-listing cycle-slideshow"
 data-cycle-slides="figure"
 data-cycle-auto-height="4:3"
 data-cycle-pager-template="<span><img src='{{firstChild.src}}' /></span>"
 data-pause-on-hover="true">

<figure><img src="http://placehold.it/250x570"></figure>
<figure><img src="http://placehold.it/250x570"></figure>
<figure><img src="http://placehold.it/450x370"></figure>
<figure><img src="http://placehold.it/250x570"></figure>
<figure><img src="http://placehold.it/250x570"></figure>
<div class="cycle-pager"></div>

于 2013-09-09T14:29:29.593 に答える