Интегрировать внутренний зум для моих продуктов в моем большом картельном магазине

Я последовал другому ответу на вопрос с этой проблемой Могу ли я интегрировать внутренний зум для своих продуктов в моем магазине большого картеля?

У меня есть интернет-магазин Bigcartel с темой Luna. Я хотел бы интегрировать внутреннее масштабирование в изображения моих продуктов. Но я не могу заставить его работать.

Я добавил файл jquery.elevatezoom.js следующим образом:

<script src='http://pawsfabrik.dk/jquery.elevatezoom.js'></script> В файле макета.

Я изменил код изображения в файле страницы продукта на это:

<img id="zoom_01" src="{{ image | product_image_url: "fullsize" }}" data-zoom-image="{{ image | product_image_url: "fullsize" }}" class="fade_in" alt="Image of {{ product.name | escape }}">

И, наконец, я добавил код скрипта для активации, также в файл продукта:

<script> $('#zoom_01').elevateZoom({ zoomType: "inner", cursor: "crosshair", zoomWindowFadeIn: 500, zoomWindowFadeOut: 750 }); </script>

Но это все еще не работает. Кто-нибудь, кто может сказать мне, что я сделал неправильно? Меня это очень расстраивает :-(

Спасибо, Пау


jquery zooming bigcartel
person user3704348    schedule 04.06.2014    source источник
comment
Насколько я могу судить, весь код, который вы включили, выглядит правильно. Можете ли вы предоставить более подробную информацию о том, что именно не работает? Вы видите какие-либо ошибки в консоли вашего браузера? Или можно ссылку на ваш магазин?   -  person Nick Endle    schedule 04.06.2014
comment
Конечно. Это эффект масштабирования при наведении курсора мыши, который не работает. На изображение это никак не влияет. Пожалуйста, взгляните на сайт здесь: tillieburden.bigcartel.com/product/forest   -  person user3704348    schedule 05.06.2014

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете сделать это с помощью Magic Zoom. Вот сайт Большого картеля, использующий его:

http://beetea.bigcartel.com/product/test-product-2

Этот сайт масштабирует изображение в сторону. Вместо этого вы можете использовать параметр внутреннее масштабирование, чтобы масштабирование происходило внутри вашего основного изображения. .

Добавьте Magic Zoom в файл макета, например.

<script src='http://pawsfabrik.dk/magiczoom.js'></script>

Затем добавьте код изображения продукта следующим образом:

<a href="{{ image | product_image_url: "fullsize" }}" class="MagicZoom" rel="zoom-position: inner"><img src="{{ image | product_image_url: "fullsize" }}" alt="Image of {{ product.name | escape }}"/></a>
person Dan Roberts    schedule 05.06.2014
comment
Вау, я думаю, что это работает, но мне нужна лицензия, потому что это интернет-магазин. 29 фунтов стерлингов слишком дорого, я думаю. Вы знаете, что это бесплатно или maby дешевле? - person user3704348; 05.06.2014
comment
О, наконец-то я заработал. Проблема заключалась в том, что «jquery.elevatezoom.js» должен быть загружен на тот же сервер на сайте. Теперь он работает отлично. Спасибо, что пытаетесь мне помочь :-) - person user3704348; 06.06.2014