商品ページ商品画像に拡大機能（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

EC-CUBE3サイトで同じライブラリ使ってます。（elevateZoom.js）
既にデフォルトテンプレートで使用されているslick.jsと競合するので、そちらをまず削除する必要があります。
そうすれば以下のような通常コードで大丈夫です。
$("セレクタ").elevateZoom(
{

}
);

----------------
EC-CUBEカスタマイズ・高速化・脆弱性対策・SEO ご相談ください。

2系・3系から4系へのバージョンアップ実績豊富

早々のご連絡ありがとうございます！
早速試したところ問題なく動きました。
slick.jsが邪魔をしていたのですね。
ありがとうございました。