How to activate multizoom on demand- click, mouseenter,etc. instead of document ready

[ssh]

Script:Featured Image Zoomer (now w/Multi-Zoom) v2.1
http://www.dynamicdrive.com/dynamici...uredzoomer.htm

Hello Folks, need some help here
I am using Featured Image Zoomer for a photo gallery (multi-zoom). I have two needs:

1.
I do NOT want to have addimagezoom() to kickoff automatically on doc ready, instead, I want it to start ONLY when I click on one of the images in gallery. But I had trouble using something like below

jQuery('[id^="x"]').click(function ($) {...
or
jQuery(document).on("mouseenter", '[id^="x"]', function() {

to replace the standard:
$(document).ready(function () {
$('#multizoom1').addimagezoom({
...
)}

2.
I want the mid-sized image (i.e. the zoomable image) to show in place of an existing div on page upon click (or mouseenter, or whatever event that triggers it) of thumb image. Clicking the same thumb image (in zoom) will stop zoom, and restore the original div display. But clicking on another thumb will show zoom for another image, just like how it works now.

Thanks in advance!

also, John et al, Nice work!! I researched a bunch, this is one of the best.

[Beverleyh]

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

[ssh]

I have corrected my post format. Thanks Beverleyh for your quick reply!

[Beverleyh]

I do NOT want to have addimagezoom() to kickoff automatically on doc ready, instead, I want it to start ONLY when I click on one of the images in gallery.

I'm not really sure what you mean by this. The script needs to be initialised when the doc is ready so what I *think* you mean is that you want to change the behaviour of the zoom popup so that it appears on click instead of on hover. Looking at the js file, there are 3 'mouseover' instances, so try changing them to 'click'. Further edits may be required but I think that's something that John would need to look at for you.

I want the mid-sized image (i.e. the zoomable image) to show in place of an existing div on page

The zoom popup has a class of magnifyarea so you should be able to force specific positioning by putting something like this in your stylesheet;

.magnifyarea { top:300px !important; left:400px !important }

Clicking the same thumb image (in zoom) will stop zoom, and restore the original div display. But clicking on another thumb will show zoom for another image, just like how it works now

I don't understand what you're saying here - is there a question in there?

[ssh]

Beverleyh, thanks for your reply. Already very helpful. i appreciate it!
**note that I make reference of 3 different sizes of images as in Demo 3 in the beginning URL: a) thumbnail - the smallest; b) mid-sized, where I move mouse to see zoom; and c) the magnified, or the large image

1. Yes. Adding style for .magnifyarea works to have it show based on position. But I was also looking to have it display within a div. If you could point me to a direction, that would be great.

2. by "I do NOT want to have addimagezoom() to kickoff automatically on doc ready, instead, I want it to start ONLY when I click on one of the images in gallery.", I mean this -
when I load the page of multiple images (a photo gallery), I do not want the first mid-sized image displayed automatically, ready for zoom onload - just as how John has in Demo 3 (which is the image titled Milla Jojovitch). INSTEAD, I do not want the Milla image (mid-sized) show until I click on the thumbnail (or whatever thumbnail i click). making sense?

3. Then based on #2 above, if I click on the SAME thumbnail already on zoom (mid-sized image already shown), it hides the display (of the mid-size display) - just like a toggle click. However, if I click on a DIFFERENT thumbnail, it displays the image (mid-sized) for magnified image (large sized)

I hope I am not confusing you more :-)
Again, this is very much appreciated!

[Beverleyh]

For 1, the .magnifyarea div is generated on the fly via the JavaScript so it would seem easiest to just doctor the position of this to match your existing div placement - so it would *visually* appear in the same place. I've use this method with other popup scripts and it works very well but I would need a link to your page in order to see how best to do this for your particular setup.

Hopefully John will be able to help you with the click-toggle modifications for 3, but a suggestion for number 2 - try loading a transparent gif into the .targetarea div so that it appears empty on page load. If the script requires a corresponding thumb, prepare the markup for that too but hide it with CSS.

[ssh]

For 1, yes. I can finesse it a bit to fit, but it will be challenging to accommodate desktop & mobile device. sending it to div will be more flexible.
For 2, I tried what you suggested, did not work. i could not see where the script controls the starting image display. I am missing something of course.
I am more concerned to make #2 and 3 work.

I am attaching the screenshot to illustrate what I need -I do not want the boxed image to display automatically, but rather to display only after I click the thumb below it. click the same thumb as the one on display will hide the boxed display (disable zoom - same as when i first load the page). thx!

[ssh]

since i got no replies, i just spent more time....I modified the multizoom.js as below and was able to have it behave - somewhat - the way I need: It does not show first small image onload. Then when I click on a thumb it shows small size image for zoom, click it again it will hide. But the first thumb does not bring up small image the first click. I need to click other ones first and then the first one will work. Could not figure it out.

two things I did
1. add css to hide targetarea, 2.modified portion of multizoom.js as follows

        $thumbs.click(function(){

           if(!$(this).hasClass('activethumb'))
            {
                $(".targetarea").show();
                $(".zoomtracker").show();
                $(".magnifyarea").show();
                $("#description").show();
 
                $zoomlev.html(options.zoomrange? options.zoomrange[0] : '');
            }

            else
            {
               
                $(".targetarea").toggle();
                $(".zoomtracker").toggle();
                $("#description").toggle();

            }

            })

				.addmultizoom($.extend(options, {imgObj: sel, multizoom: null, selclass: selclass}));
			return this;

anyone has a better way to do it, or knows how to make the 1st thumb work the first time?

[ssh]

Just used a trigger click of 1st img upon initialization. Does just what I need.