46603

elevate zoom not working

Question:

I am using elevate zoom with Apple-style Slideshow Gallery and all works fine. However the zoom feature is zooming in the hidden images which are hidden by the slider until they become visible when clicked on the thumbnail. The original code for initiating the zoom plugin was

$("#zoom_01").elevateZoom();

I got the below JavaScript code from other question which seemed to solve the problem but it activates the image on hover and disables it when not hovered. What I want is to have the zoom to show only on visible images not the hidden one. Can someone help me out please?

<div id="main"> <div id="gallery"> <div id="slides"><!--Main image--> <div class="slide"><img src="img/sample_slides/macbook.jpg" data-zoom-image="images/big_mac.png" id="zoom_01" width="300" height="400" /></div> <div class="slide"><img src="img/sample_slides/iphone.jpg" data-zoom-image="images/big_iphone.png" id="zoom_02" width="300" height="400" /></div> </div> <div id="menu"><!--Thumbnail--> <ul> <li class="fbar">&nbsp;</li> <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" /></a></li> <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" /></a></li> </ul> </div> </div> </div> <script> jQuery( function () { var elevate_zoom_attached = false, $zoom_01 = $("#zoom_01") ; $zoom_01.hover( // hover IN function () { if ( ! elevate_zoom_attached ) { $zoom_01.elevateZoom({ cursor : "crosshair" }); elevate_zoom_attached = true ; }; }, // hover OUT function () { if ( elevate_zoom_attached) { // no need for hover any more $zoom_01.off("hover"); } } ); }) ; jQuery( function () { var elevate_zoom_attached = false, $zoom_02 = $("#zoom_02") ; $zoom_02.hover( // hover IN function () { if ( ! elevate_zoom_attached ) { $zoom_02.elevateZoom({ cursor : "crosshair" }); elevate_zoom_attached = true ; }; }, // hover OUT function () { if ( elevate_zoom_attached) { // no need for hover any more $zoom_02.off("hover"); } } ); }) ; </script>

Answer1:

I don't think you have set elevateZoom to use the gallery feature it offers.

Instead of writing the script like you have, why not just pass the options as a variable?

jQuery("#zoom_1").elevateZoom({ //the feature image gallery: 'menu', //it will seek out the images in the div#menu cursor: 'crosshair' });

Remember to tag on the data-zoom-image="" on each thumbnail, with a link to the larger image.

More information can be found on the Elevate Zoom website: <a href="http://www.elevateweb.co.uk/image-zoom/examples" rel="nofollow">http://www.elevateweb.co.uk/image-zoom/examples</a>

Recommend

  • Beginner Java required no arguments error on constructor
  • How to untrap after a trap command
  • ng-show not binding as expected
  • How to select a:hover that's not in a certain selector
  • how to always show label in chartjs without mouseover?
  • Leave parent window active when child opens
  • Why is the ~ selector not working here?
  • Restricting user interaction in UIWebView
  • how to change the div background image in mouse over [duplicate]
  • How to use php function without load source file?
  • how to send control + L and control + C to another application?
  • jquery hover a div and display image on another div with effect
  • Telegram bot API - Inline bot getting Error 400 while trying to answer inline query
  • Create function that can pass a parameter without making a new component
  • Alamofire and Reachability.swift not working on xCode8-beta5
  • How can we prepend rows to a react native list-view?
  • FileReader+canvas image loading problem
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • output of program is not same as passed argument
  • Sending data from AppleScript to FileMaker records
  • Join two tables and save into third-sql
  • How to model a transition system with SPIN
  • ORA-29908: missing primary invocation for ancillary operator
  • Akka Routing: Reply's send to router ends up as dead letters
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • KeystoneJS: Relationships in Admin UI not updating
  • AngularJs get employee from factory
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Load html files in TinyMce
  • How to stop GridView from loading again when I press back button?
  • unknown Exception android
  • Checking variable from a different class in C#
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • Converting MP3 duration time
  • java string with new operator and a literal