www.webdeveloper.com
Results 1 to 5 of 5

Thread: jQuery Zoom-in and Zoom-out Not Working

Hybrid View

  1. #1
    Join Date
    May 2012
    Posts
    79

    jQuery Zoom-in and Zoom-out Not Working

    I am attempting to zoom-in and zoom-out out of a photo when "enlarge-photo" class is clicked. I am unable to get the code below to work properly I believe this is do to the way i have structured the zoom-out part of my code.

    Can anyone show me how to properly structure my code?

    jQuery code:

    Code:
     $(".enlarge-photo").click(function(){
    
    //photo - zoom-in
        var $img = $(".image");
        $img.stop().animate({ height: "365", width: "269", paddingRight: "12"},"fast");
      });
    
      },
        //photo -zoom-out
      function(){
        $img.stop().animate({height: "265", width: "169"},"fast");
    
        };
      return false;
    });
    HTML code:
    Code:
    <figure>
                <img class="image" src="img/basketball.jpg" width="169" height="265" border="0" alt="basketball dunk"/>
                <figcaption>Laura Skelding/AMERICAN-STATESMAN</figcaption>
            </figure>
    
                <ul id="photo">
                    <li rel="nofollow"><a class="enlarge-photo" href="#" title="enlarge-photo">ENLARGE PHOTO</a></li>
                </ul>

  2. #2
    Join Date
    May 2012
    Posts
    79
    I am still unable to get the zoom-in and zoom-out functionality to work properly... after hours of trying this is my new code.

    Any suggestions or possible solutions are appreciated and welcome. Thanks!!!

    Code:
     
     $(".enlarge-photo").hover(function(){
    	//resize photo - zoomin
      	var $img = $(".image");
      	$img.stop().animate({ 
      	height: "365", 
      	width: "269", 
      	paddingRight: "12"},"fast");
      	
      }, function(){
      		$img.stop().animate({
      		height: "265",
      		width: "169",
      		paddingRight: "0"},"fast");
      	});
    });

  3. #3
    Join Date
    Sep 2007
    Posts
    315
    http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/

    The code I tried :

    Code:
      
    <html>
    <head>
    
    <style type="text/css">
    
    #emirgan_korusu { height:510px; width:680px; top:0px; left:0px; left:0px; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    
    <script type="text/javascript">
    $(function() {
    $('#emirgan_korusu').hover(
     function(){
     var $this = $(this);
     $this.stop().animate({'opacity':'1.0','height':'200px', 'width':'300px', 'top':'0px','left':'0px'});
    },
    function(){
    var $this = $(this);
    $this.stop().animate({'opacity':'0.5','height':'500px', 'width':'600px','top':'-66.5px','left':'-150px'});
    }
    );
    })
    </script>
    </head>
    <body>
    
    <img id="emirgan_korusu" src="http://istanbulresimleri.net/data/media/16/emirgan_korusu_16.jpg" alt="istanbul">
    </body>
    </html>
    Last edited by Ayşe; 08-10-2012 at 06:29 PM.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  4. #4
    Join Date
    May 2012
    Posts
    79
    Hi Ayse,

    Thank you for your help. I apologize I posted the wrong code. Below is the script that is not working properly.

    I am using an icon as my trigger with the class '.enlarge-photo' that will both enlarge and return to normal size an image with a class '.image'. When I place the trigger click or hover on the image directly the code works however this is not what i am attempting to do, I would like the icon ".enlarge-photo' to be the trigger 'click'.

    Code:
     $(".enlarge-photo").click(function(){
      	$(this).toggleClass("small-photo");
      	
      	//resize photo - zoomin
      	var $img = $(".image");
      	$img.stop().animate({ 
      	height: "365", 
      	width: "269", 
      	paddingRight: "12"},"fast");
      	
      }, function(){
      		$img.stop().animate({
      		height: "265",
      		width: "169",
      		paddingRight: "0"},"fast");
      	});
    });

  5. #5
    Join Date
    May 2012
    Posts
    79
    Thanks again for all the help. Here is the solutions to the problem in case anyone else is having this problem.

    Code:
     
     $(".enlarge-photo").click(function(){
      	//zoom-in and zoom-out of image
      	var opts ={height: "365", width: "269", paddingRight: "12"};
      	var image = $(".image");
      	if(image.hasClass("zoomed"))
      	{
      		opts = {height: "265", width: "169"};
      	}
      	
      	image.stop().animate(opts,"fast");
      	image.toggleClass("zoomed");
      	  
      	});//enlarge photo end

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles