login  Naam:   Wachtwoord: 
Registreer je!
 Forum

jQuery Zoom doet raar na aanpassen SRC (Opgelost)

Offline GroundZero - 06/10/2015 10:40 (laatste wijziging 06/10/2015 10:58)
Avatar van GroundZeroLid Beste,

ik gebruik jQuery Zoom (http://www.jacklmoore.com/zoom/) en dit werkt perfect.
Echter wanneer ik nu het plaatje aanpas (src verander) en weer wil gaan zoomen dan werkt het niet meer. Ik zie dat het plaatje wel een beetje beweegt (X-as Y-as) maar er word niet ingezoomd.

Ik ben al 2 dagen aan het kijken en proberen maar krijg het niet opgelost. Misschien iemand die weet waar de fout zit?

ik destroy de huidige zoom, dan vervang ik de SRC en daarna maak ik een nieuwe zoom aan maar zonder resultaat.

in Firebug zie ik wel netjes dat de juiste gegevens doorgegeven worden (SRC en zo) dus waarom de zoom niet werkt... geen idee.

Mijn code hieronder:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script>
  2. $(document).ready(function(e) {
  3. 	var dataTag = $(this).attr('data-image');
  4. 	$('.bigImage').zoom({
  5. 		url: dataTag,
  6. 		magnify: 1
  7. 	});
  8. });
  9.  
  10. function changeImage(imageLocation) {
  11. 	// destroy the zoom
  12. 	$('.bigImage').trigger('zoom.destroy');
  13.  
  14. 	// change image src and div data-image attribute
  15. 	$('.bigImage img').attr('src', imageLocation);
  16. 	$('.bigImage').attr('data-image', imageLocation);	
  17.  
  18. 	// start new zoom
  19. 	$('.bigImage').zoom({
  20. 		url: imageLocation,
  21. 		magnify: 1
  22. 	});
  23. }
  24. </script>


De containers:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="product-details-images">
  2.         <div class="product-details-images_big bigImage" data-image="<?php echo $mainimg?>">
  3.         	<a href="<?php echo $g_oProduct->ImageName(3,$alt);?>" title="<?php echo $g_oProduct->Title();?>">
  4.         		<img src="<?php echo $mainimg?>" alt="<?php echo $alt_text; ?>" height="400" height="800" itemprop="image" />
  5.         	</a>
  6.         </div>    
  7.     </div>
  8.  
  9.     <div class="product-details-images_thumbs">
  10.         <?php 
  11. 		echo PageBlock("core-product-thumbnails");
  12. 		?>
  13.     </div>


Een before en after met FireBug:
http://s4.postimg.org/cdgaf45nh/before.jpg
http://s23.postimg.org/q4p23ofxn/after.jpg

4 antwoorden

Gesponsorde links
Offline Jointjeff - 06/10/2015 11:05
Avatar van Jointjeff HTML interesse Hoi GroundZero,

Misschien niet best practice, maar kun je niet gewoon de inhoud van de SRC-elementen aanpassen zonder het zoom-effect te destroyen. Of klopt de weergave dan niet meer?

Zie als voorbeeld: https://jsfiddle.net/cp4yqas5/
Offline GroundZero - 06/10/2015 11:14
Avatar van GroundZero Lid Als ik de zoom.destroy niet gebruik dan maakt hij allemaal plaatjes aan (placeholders denk ik) en werkt niks meer er staat dan bijvoorbeeld

<img src="naam.jpg class="zoom" />
<img src="naam.jpg class="zoom" />
<img src="naam.jpg class="zoom" />

in plaats van dat er één ding staat En ik las dat wanneer je de SRC aanpast dat je eerst een zoom.destroy moest geven om daarna opnieuw te initialiseren 

Als ik dit niet opgelost krijgt dan probeer ik de code uit de fiddle te implementeren want die werkt prima ;)
Offline Thomas - 06/10/2015 13:56 (laatste wijziging 06/10/2015 14:09)
Avatar van Thomas Moderator Heb je meerdere afbeeldingen met klasse .bigImage?

In dat geval selecteer je ook meerdere elementen met $('.bigImage').

Mogelijk/waarschijnlijk geeft $(...) ook altijd een lijst terug, terwijl een enkel element wordt verwacht bij zoom.destroy? Dit is zoiets als een functie een array van integers meesturen als parameter, terwijl een (enkele) integer wordt verwacht. Op de documentatiepagina (het voorbeeld) wordt ook expliciet één element (met id) geselecteerd:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $('#example').trigger('zoom.destroy'); // remove zoom

Mogelijk gaat er hierdoor iets mis?

Wat is trouwens het verschil tussen de before en after afbeelding, of is het juist het punt dat er geen verschil is, maar wel zou moeten zijn?

EDIT: hmm, $('.reUsedClass') en $('#singleElement') werken blijkbaar hetzelfde, dus dat kan het niet zijn.

EDIT2: mogelijk (ont)koppel je verschillende images aan de zoom-functionaliteit omdat $('.bigImage') mogelijk meerdere resultaten oplevert. Ik weet niet wat er gebeurt als je een event voor een tweede keer aan een element koppelt op deze manier. Ik denk dat als je een manier bedenkt om het (ont)koppelen te regelen via een uniek id in plaats van een (potentieel hergebruikte) class dat het al beter gaat werken. Oftewel: zorg dat je selectors altijd ten hoogste één element selecteren.

Daarbij blijft dit alles koffiedik kijken als je ons geen (niet-)werkende code laat zien in de vorm van een website of testomgeving .
Bedankt door: GroundZero
Offline GroundZero - 06/10/2015 15:15
Avatar van GroundZero Lid
Citaat:
Wat is trouwens het verschil tussen de before en after afbeelding, of is het juist het punt dat er geen verschil is, maar wel zou moeten zijn?


Dat alles er normaal uit ziet maar niet werkt hahaha... als ik zoom.destroy niet gebruik dan komen er inderdaad meerdere elementen dus ik moet wel gebruik maken van zoom.destroy.

Hoe weet ik niet, maar heb het nu zo goed als werkend gekregen. Enigste is dat de foto's die erna er in komen (wanneer de SRC aangepast word) niet correct formaten hebben en wanneer ik in jQuery deze mee geef dat het nog niet 100% klopt. De hoogte pakt hij goed, maar de breedte is maximaal maar tot (bijvoorbeeld) 300 te krijgen terwijl ze voor behoud proporties 340 moeten zijn.

Ik denk dat het unieke selector verhaal sowieso een goede start is, ga ik dat nog eerst even proberen. Zou het dan nog niet gemaakt zijn, ga ik even een werkende code regelen voor jullie haha maar het staat nu op een development omgeving welke afgeschermd is ;)

Dankjewel voor jullie reacties!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.179s