Results 1 to 9 of 9

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

  1. #1
    Join Date
    Mar 2015
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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.
    Last edited by ssh; 03-03-2015 at 10:32 PM. Reason: for better clarity

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    ssh (03-03-2015)

  4. #3
    Join Date
    Mar 2015
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

  5. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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;
    Code:
    .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?
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  6. #5
    Join Date
    Mar 2015
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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!
    Last edited by ssh; 03-05-2015 at 02:17 AM.

  7. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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.
    Last edited by Beverleyh; 03-05-2015 at 07:57 AM.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  8. #7
    Join Date
    Mar 2015
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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!
    Click image for larger version. 

Name:	DD_screen.jpg 
Views:	125 
Size:	19.9 KB 
ID:	5622
    Last edited by ssh; 03-05-2015 at 07:24 PM.

  9. #8
    Join Date
    Mar 2015
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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
    Code:
            $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?
    Last edited by ssh; 03-13-2015 at 03:07 AM.

  10. #9
    Join Date
    Mar 2015
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Resolved- kinda

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

Similar Threads

  1. Replies: 1
    Last Post: 04-30-2014, 07:45 AM
  2. defaultexpanded after document is ready
    By quadrakm in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-08-2012, 01:55 PM
  3. Fadeslideshow has issue with $(document).ready(function(){
    By jbielefeldt in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-20-2011, 09:54 PM
  4. Document.ready script not working
    By tooetooe in forum JavaScript
    Replies: 0
    Last Post: 02-24-2011, 05:56 PM
  5. Flex level Doesn't allow another document ready statement
    By banaya in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-18-2010, 09:54 AM

Bookmarks

Posting Permissions

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