0

だから、私が得ていないのは反復的なものでなければなりません! 複数の cycle2 スライドショーを表示するテンプレート ファイルに for ループがあります。

<?php foreach ($foo as $bar) { ?>

    <div class="image">
        <a href="<?php echo $product['href']; ?>">
            <div class="cycle-slideshow"
                data-cycle-fx=scrollHorz
                data-cycle-timeout=0
                data-cycle-swipe=true
                >
                <div class="cycle-prev"></div>
                <div class="cycle-next"></div>
                <img class="productID_<?php echo $product['product_id']; ?>" src="<?php echo $product['thumb']; ?>" title="Click to see more details on <?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" />
            </div>
        </a>
    </div>

<?php } ?>

もともと私はこれをmouseenterで動作させていたので、forループ内の.imageごとに実行しました。今、私はそれをいじって、準備ができているすべての画像をロードします。これは私がこれまでに持っているものですが、cycle2 スライドショーのすべてのインスタンスに対して最初の画像配列のみをロードします。

$( document ).ready(function() {
    var image = $(".cycle-slideshow").find("img:first");
    var classList = image.prop('class').split(/\s+/);
    $.each( classList, function(index, item){
        if( item.indexOf('productID_') > -1 ) {
            product_id = item.replace("productID_","");

            $.ajax({
                url: 'index.php?route=product/product/images',
                type: 'post',
                data: 'product_id='+product_id + '&width='+image.width() + '&height='+image.height(),
                dataType: 'json',
                success: function(json) {
                    if (json['images']) {
                        for (var i = 0; i < json['images'].length; i++) { 
                            image.after('<img src="'+json['images'][i]+'" width="'+image.width()+'" height="'+image.height()+'" alt="'+$(image).prop("alt")+'" />');
                        }

                        image.parent().cycle();
                    }
                }
            });
        }
    });
});

私はこの行であらゆる種類を試しました:

var image = $(".cycle-slideshow").find("img:first");

.children と img:eq(0) を使用するのと同様ですが、上記は画像サイズ パラメータが正しく取り込まれている場合に最適に機能します。

しかし、cycle2 の各インスタンスが独自の json 配列をリストするように反復するにはどうすればよいでしょうか?

どんな助けでも大歓迎です。

以下の回答を明確にするために編集して、役立つかどうかを確認します。

public function images() {
    $json = array();
    if (isset($this->request->post['product_id'])) {
        $this->load->model('catalog/product');
        $product_images = $this->model_catalog_product->getProductImages($this->request->post['product_id']);
        if ($product_images) {                      
            $this->load->model('tool/image');
            foreach ($product_images as $result) {
                if(($result['image'] && file_exists(DIR_IMAGE . $result['image'])) && isset($this->request->post['width']) && isset($this->request->post['height'])){
                    $json['images'][] =  $this->model_tool_image->resize($result['image'], $this->request->post['width'], $this->request->post['height']);
                }
            }
        }
    }   
    $this->response->setOutput(json_encode($json));
}
4

1 に答える 1

1

これが必要なものだと思います：

$(document).ready(function() {
    $(".cycle-slideshow").each(function() {
        var image = $(this).find("img:first");
        // Rest of your code
    });
});

コードimageは最初のスライドショーの最初の画像に設定するだけで、他のスライドショーを処理することはありません。

その他の提案:

製品 ID をdata-属性に入れて、クラスから抽出する必要がないようにします。

AJAX 呼び出しで次の構文を使用します。

data: {
    product_id: product_id,
    width: image.width(),
    height: image.height()
}
于 2014-03-11T00:04:09.680 に答える