jQuery cloudzoom
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?
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?
-nvm-
Gewijzigd op 23/01/2013 12:33:46 door - Ariën -
Zoomt hij ook de afbeelding in bij jou?
Hier werkt het in Chrome en Firefox allebei niet...
Hier werkt het in Chrome en Firefox allebei niet...
Heb je misschien ook wat relevante code, ik kon het zo snel niet vinden...
@Tim Slootweg:
Jazeker!
Dit heb ik tussen de head tags geplaatst:
En de afbeelding roep ik zo op:
Het rare is dat de hover wel werkt, maar de zoom niet...
Jazeker!
Dit heb ik tussen de head tags geplaatst:
Code (php)
1
2
3
4
5
2
3
4
5
<link rel="stylesheet" type="text/css" href="http://pandamedia.nl/jaewhoo/wp-content/themes/JaeWhooTheme/cloudzoom.css" />
<script type="text/javascript" src="http://pandamedia.nl/jaewhoo/wp-content/themes/JaeWhooTheme/cloudzoom.js"></script>
<script type="text/javascript">
CloudZoom.quickStart();
</script>
<script type="text/javascript" src="http://pandamedia.nl/jaewhoo/wp-content/themes/JaeWhooTheme/cloudzoom.js"></script>
<script type="text/javascript">
CloudZoom.quickStart();
</script>
En de afbeelding roep ik zo op:
Code (php)
1
<img src="http://pandamedia.nl/jaewhoo/wp-content/uploads/2013/01/collection1.jpg" class="cloudzoom" data-cloudzoom = "zoomImage: 'http://pandamedia.nl/jaewhoo/wp-content/themes/JaeWhooTheme/img/collection_big.jpg' " style="float: left;" />
Het rare is dat de hover wel werkt, maar de zoom niet...
Als de hover wel werkt zit het probleem denk niet in het javascript gedeelte.
En in het voorbeeld staat ook image en zoomImage, jij heb alleen het laatste. Misschien heeft het er iets mee te maken.
En in het voorbeeld staat ook image en zoomImage, jij heb alleen het laatste. Misschien heeft het er iets mee te maken.
Dit is het voorbeeld wat ik van de site heb gedownload:
Zover ik kan zien komt mijn img tag overeen met deze.
Code (php)
1
2
2
<img class = "cloudzoom" src = "images/small/image1.jpg"
data-cloudzoom = "zoomImage: 'images/large/image1.jpg'" />
data-cloudzoom = "zoomImage: 'images/large/image1.jpg'" />
Zover ik kan zien komt mijn img tag overeen met deze.
Weet je zeker dat je zoomImage een grote afbeelding is en wat gebeurt er als je zoomImage weg haalt?
Gewijzigd op 23/01/2013 13:56:43 door Tim S
De grote afbeelding in mijn img tag is:
http://pandamedia.nl/jaewhoo/wp-content/themes/JaeWhooTheme/img/collection_big.jpg
Als ik zoomImage weghaal dan werkt de hover ook niet meer.
http://pandamedia.nl/jaewhoo/wp-content/themes/JaeWhooTheme/img/collection_big.jpg
Als ik zoomImage weghaal dan werkt de hover ook niet meer.
Je heb ook geen id
Moet ik dit invullen dan? En welke id moet ik kiezen?
Ik zie hier namelijk niets over terug in het voorbeeld van de site.
Ik zie hier namelijk niets over terug in het voorbeeld van de site.
van de site:
Het zou kunnen dat de plug-in een id nodig heeft, heet maakt dan volgens mij niet uit welke tenzij je deze kan instellen.
Code (php)
1
2
2
<img src="image1.jpg" id = "zoom1" class = "cloudzoom"
data-cloudzoom = "zoomImage: 'bigimage1.jpg'" />
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:
Als ik nu op "Image 1" klik krijg ik inderdaad de grote afbeelding:
http://pandamedia.nl/jaewhoo/collection/jae-whoo-limited-t-shirt-design/
Hoe kan ik dit werkend krijgen met de zoom functie?
http://pandamedia.nl/jaewhoo/collection/jae-whoo-limited-t-shirt-design/
Hoe kan ik dit werkend krijgen met de zoom functie?
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:
Maar zo te zien zijn we weer terug bij af...
Code (php)
1
<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...
Het voorbeeld van de website zou gewoon moeten werken, sleutelen in iets dat geld kost is zonde. Misschien eens kijken voor een alternatief:
http://www.tripwiremagazine.com/2012/12/jquery-image-zoom.html
http://www.tripwiremagazine.com/2012/12/jquery-image-zoom.html
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?
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:
Dit is het enigste stukje waar ik css zie, je zou hier z-index aan kunnen toevoegen.
Code (php)
1
2
3
2
3
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;" />')
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
Je had gelijk met z-index, het werkt prima nu! :D




