質問 > フロント機能 > 商品ページ商品画像に拡大機能(Amazon風)を持たせたい |
フロント機能
スレッド表示 | 古いものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
hiyokocyan |
投稿日時: 2016/9/6 11:39
対応状況: 解決済
|
新米 登録日: 2016/9/6 居住地: 投稿: 2 |
Re: 商品ページ商品画像に拡大機能(Amazon風)を持たせたい 早々のご連絡ありがとうございます!
早速試したところ問題なく動きました。 slick.jsが邪魔をしていたのですね。 ありがとうございました。 |
umebius |
投稿日時: 2016/9/6 11:28
対応状況: −−−
|
神 登録日: 2016/7/22 居住地: 投稿: 2085 |
Re: 商品ページ商品画像に拡大機能(Amazon風)を持たせたい EC-CUBE3サイトで同じライブラリ使ってます。(elevateZoom.js)
既にデフォルトテンプレートで使用されているslick.jsと競合するので、そちらをまず削除する必要があります。 そうすれば以下のような通常コードで大丈夫です。 $("セレクタ").elevateZoom( { } );
|
hiyokocyan |
投稿日時: 2016/9/6 11:23
対応状況: −−−
|
新米 登録日: 2016/9/6 居住地: 投稿: 2 |
商品ページ商品画像に拡大機能(Amazon風)を持たせたい 商品ページ商品画像に拡大機能(Amazon風)を持たせたいと思っております。
デフォルトテンプレートの商品ページ画像部分のソースを添付致します。 <div id="item_photo_area" class="col-sm-6"> <div id="detail_image_box__slides" class="slides"> {% if Product.ProductImage|length > 0 %} {% for ProductImage in Product.ProductImage %} <div id="detail_image_box__item--{{ loop.index }}"><img src="{{ app.config.image_save_urlpath }}/{{ ProductImage|no_image_product }}"/></div> {% endfor %} {% else %} <div id="detail_image_box__item"><img src="{{ app.config.image_save_urlpath }}/{{ ''|no_image_product }}"/></div> {% endif %} </div> </div> 使用するのは以下のサイトの画像拡大を使用したいと思っています。 http://www.elevateweb.co.uk/image-zoom/examples こちらのサイトで『Gallery & Lightbox』をいう項目の部分を実装したいと考えております。 styleやjsに関しては今回は省きます。 <img id="img_01" src="small/image1.jpg" data-zoom-image="large/image1.jpg"/> <div id="gal1"> <a href="#" data-image="small/image1.jpg" data-zoom-image="large/image1.jpg"> <img id="img_01" src="thumb/image1.jpg" /> </a> <a href="#" data-image="small/image2.jpg" data-zoom-image="large/image2.jpg"> <img id="img_01" src="thumb/image2.jpg" /> </a> <a href="#" data-image="small/image3.jpg" data-zoom-image="large/image3.jpg"> <img id="img_01" src="thumb/image3.jpg" /> </a> <a href="#" data-image="small/image4.jpg" data-zoom-image="large/image4.jpg"> <img id="img_01" src="thumb/image4.jpg" /> </a> </div> 本ソースの部分を組み込みたいのですがtwigでうまく組むことができません。 これだけの情報で分からないかもしれませんが、ご教授いただければと思います。 宜しくお願い致します。 PHP 5.6.24 EC-CUBE 3.0.10 DBサーバー PostgreSQL 9.2.15 |
スレッド表示 | 古いものから | 前のトピック | 次のトピック | トップ |