Integrați un zoom intern pe produsele mele în magazinul meu de cartel mare (Programare, Jquery, Zoom, Bigcartel)

user3704348 a intrebat.

Am urmărit un alt răspuns de la o întrebare cu această problemă Pot integra un zoom intern pe produsele mele în magazinul meu de cartel mare?

Am un magazin online Bigcartel cu tema Luna. Aș dori să integrez un zoom intern pe imaginile produselor mele. Dar nu reușesc să o fac să funcționeze.

Am adăugat fișierul jquery.elevatezoom.js astfel:

<script src='http://pawsfabrik.dk/jquery.elevatezoom.js'></script>În fișierul Layout.

Am schimbat codul pentru imagine în fișierul Pagina de produs în felul următor::

<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 }}">

Și în final am adăugat codul scriptului de activare, tot în fișierul Produs:

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

Dar tot nu funcționează. Îmi poate spune cineva ce am făcut greșit? Sunt foarte frustrat din cauza asta:-(

Mulțumesc, Paw

Comentarii

  • Din câte îmi dau seama, tot codul pe care l-ai inclus pare corect. Poți oferi mai multe detalii despre ce anume nu funcționează? Vezi vreo eroare în consola browserului tău? Sau poți posta un link către magazinul tău? –  > Por Nick Endle.
  • Sigur. Este vorba de efectul de zoom cu rollover al mouse-ului care nu funcționează. Nu are niciun efect asupra imaginii. Vă rugăm să aruncați o privire pe site aici: tillieburden.bigcartel.com/product/forest –  > Por user3704348.
1 răspunsuri
Dan Roberts

Puteți face acest lucru cu Magic Zoom. Aici este un site web al Big Cartel care îl folosește:

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

Acel site mărește imaginea în lateral. În schimb, puteți utiliza funcția zoom intern pentru a face ca zoomul să se producă în interiorul imaginii principale.

Adăugați Magic Zoom la fișierul Layout, de ex.

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

Apoi adăugați codul imaginii produsului astfel:

<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>

Comentarii

  • Wow, cred că funcționează, dar trebuie să iau o licență pentru că este un magazin online. 29 GBP este un pic prea scump cred. Știi unul care este gratuit sau poate mai ieftin? –  > Por user3704348.
  • Ah, în sfârșit am reușit să o fac să funcționeze acum. Problema a fost că ´jquery.elevatezoom.js´ trebuie să fie încărcat pe același server de pe site. Acum funcționează perfect. Mulțumesc că ai încercat să mă ajuți:-) –  > Por user3704348.