Beste leden,

Ik ben bezig met een webshop, en ik wil graag bij de product afbeelding een cloud zoom hebben. Nu heb ik alles ingebouwd volgend de handleiding, maar het werkt nog steeds niet:
http://pandamedia.nl/jaewhoo/collection/jae-whoo-limited-t-shirt-design/

Zoals je ziet werkt de mouse-over wel, echter hoort hij dan ook de afbeelding in te zoomen wat nu dus niet gebeurd...

Zo zou het moeten werken:
http://www.starplugins.com/cloudzoom/examples

Iemand enig idee wat ik fout doe?
van de site:

<img src="image1.jpg" id = "zoom1" class = "cloudzoom"
     data-cloudzoom = "zoomImage: 'bigimage1.jpg'" />


Het zou kunnen dat de plug-in een id nodig heeft, heet maakt dan volgens mij niet uit welke tenzij je deze kan instellen.
Ik heb de id toegevoegd, en helaas werkt dit ook niet.. :(
Je zou kunnen kijken of je dit voorbeeld wel aan de praat krijgt:

<a  href="#" class="cloudzoom-gallery"
    data-cloudzoom =
         "useZoom: '#zoom1', image: 'image1.jpg', zoomImage: 'bigimage1.jpg'"
    >Image 1</a>
Wat ik zie is dat je 2 keer een grote image heb, dit moet denk een kleine zijn. Misschien kan je useZoom ook wel in de img tag werkend krijgen.
Ik heb je voorbeeldje weer even weggehaald, en heb de useZoom in de img tag geplaatst:
<img class="cloudzoom" id="zoom1" src="http://pandamedia.nl/jaewhoo/wp-content/uploads/2013/01/collection1.jpg" data-cloudzoom = "useZoom: '#zoom1', zoomImage: 'http://pandamedia.nl/jaewhoo/wp-content/themes/JaeWhooTheme/img/collection_big.jpg' " style="float: left;" />


Maar zo te zien zijn we weer terug bij af...
Bedankt voor het advies!
Via jouw link ben ik bij DDpowerZoomer voor jQuery uitgekomen.
Ik heb alles ingebouwd zoals in de manual staat vermeld, en het vergrootglas werkt ook:
http://pandamedia.nl/jaewhoo/collection/jae-whoo-limited-t-shirt-design/

Echter valt deze achter de afbeelding in plaats van ervoor... Hoe kan ik het vergrootglas naar voren halen weer?
Ik je js bestand van ddpowerzoomer staat onderandere dit:


init:function($){
		var $magnifier=$('<div style="position:absolute;width:100px;height:100px;display:none;overflow:hidden;border:1px solid black;" />')
			.append('<div style="position:relative;left:0;top:0;" />')


Dit is het enigste stukje waar ik css zie, je zou hier z-index aan kunnen toevoegen.
Helemaal top Tim!
Je had gelijk met z-index, het werkt prima nu! :D

Reageren