45176

jQuery Zoom-in and Zoom-Out is not working

Question:

I am attempting to zoom-in and zoom-out out of a photo when a button is pressed, however I am unable to get the code to work properly I believe this is do to the way i have structured the zoom-out part of my code.

jQuery code:

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

This is the HTML I am using:

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

Answer1:

Based on the fact you want a button to do it:

$("#zoom").button().click(function () { var options = { height: "365", width: "269", paddingRight: "12"}; var myImage = $("#myImage"); if (myImage.hasClass("zoomed")) { options = {height: "265", width: "169"}; } myImage.stop().animate(options,"fast"); myImage.toggleClass("zoomed"); });​

Updated fiddle: <a href="http://jsfiddle.net/johnkoer/NhYtL/19/" rel="nofollow">http://jsfiddle.net/johnkoer/NhYtL/19/</a>

Recommend

  • Android thumb is not centered in seekbar?
  • Android - Scaling of Button with background image
  • View disappears after setting height of gridLayout to wrap_content
  • adMob | Extend Banner size?
  • AJAX Chat Box Scrolling Up Issue
  • jQuery, Calling multiple animations in a row on click
  • Change the width of the JQM panels
  • Variant from android-autofittextview library : scaling makes strange behaviour
  • Python PIL to extract number from image
  • Outputting SharePoint Hyperlink Column as URL
  • How can I tell a form not to dispose a particular control when it closes?
  • blade.php method outputting it's result to the form
  • Check all values in string[] for length?
  • SonarQube: Cannot deactivate rule with missing quality profile
  • Uncaught TypeError: $(…).select2 is not a function
  • Disable Kendo Autocomplete
  • How to view images from protected folder with php?
  • D3 get axis values on zoom event
  • Using a canvas object in a thread to do simple animations - Java
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • Display images in Django
  • Is there a way to do normal logging with EureakLog?
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Python urlparse: small issue
  • Asynchronous UI Testing in Xcode With Swift
  • FileReader+canvas image loading problem
  • Resize panoramic image to fixed size
  • How to set/get protobuf's extension field in Go?
  • Trying to switch camera back to front but getting exception
  • How to show dropdown in excel using jrxml (jasper api)?
  • Importing jscolor library in angular 2
  • Large data - storage and query
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Java static initializers and reflection
  • python draw pie shapes with colour filled
  • unknown Exception android
  • Observable and ngFor in Angular 2
  • Unable to use reactive element in my shiny app