Results 1 to 2 of 2

Thread: Multi-zoom help: load magnified area on page load

  1. #1
    Join Date
    Dec 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Multi-zoom help: load magnified area on page load

    1) Script Title: Featured Image Zoomer v2.2

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uredzoomer.htm

    3) Describe problem:

    Thank you John for your terrific work. The script works great, but I'd like to make a modification, which I hope is simple. I'd like it to load the larger image (inside the magnifyarea div) on page load, and leave it visible even if the mouse is not over the zoomtracker div. Ideally, I'd like to be able to set the initial cursor position on the cursorshade div, as well as the initial zoom level.

    The purpose is so that when the page loads, the reader sees the second, larger image immediately. As it works now, it may not be obvious to users that moving the mouse over the smaller image will make the larger, magnified image suddenly appear.

    Is this doable?

    If not, how about simply putting in a blank image with a border as a place holder for the magnified image on page load?

    Thanks for any help!

    Tim Barmann

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,161
    Thanks
    44
    Thanked 3,236 Times in 3,197 Posts
    Blog Entries
    12

    Default

    OK, well I've seen your page now and I don't think that will work out. There isn't room to have all of the larger images visible at the same time. At least not the way the page is now. If they were, they would overlap. If you were to make the magnifiersize size property smaller, they could all fit.

    There's another issue with it. One of the advantages of using this script is that the larger image is only loaded when needed. If it's always seen, it has to load when the page loads. With so many large images loading at once, it will take the page a long time to load. You could use a multizoom, that way the larger image would only have to load if its thumbnail were clicked. Or you could put each page on a separate page. Either approach would also solve the problem of the larger images being too large for all of them to be displayed at once without overlapping.

    But I'm not sure you need to worry about:

    it may not be obvious to users that moving the mouse over the smaller image will make the larger, magnified image suddenly appear.
    I think you have that covered with the use of the:

    Click image for larger version. 

Name:	magnifier.jpg 
Views:	82 
Size:	16.2 KB 
ID:	5099
    Move your mouse over
    the pages at left to
    see the larger version.
    graphic and text on the page. You could just put a smaller semi-transparent magnifying glass image in the lower right corner of the zoomable image, like the one on the left below, the size it is in this thumbnail:

    Click image for larger version. 

Name:	8512.jpg 
Views:	82 
Size:	13.4 KB 
ID:	5100

    That's the universal symbol for magnify.

    But if you still want to play with your idea of having the larger image always shown, etc., here's an updated version of the script that allows for that (right click and 'Save As'):

    multizoom.js

    It introduces a number of new properties that can be used for what you say you want (from the release notes):

    Code:
    // Jun 22nd, 2013: Version 2.3 adds optional:
    	// always reveal (alwaysreveal: true) which will make the larger image and the lens (if used) always visible. It can be used
    	// with multizoom or single zoom features. When used it also allows for these options:
    		// magtop: 10, set to how far from the top of the zoomable image you want the cursor's apparent position to be (defaults to center)
    		// magleft: 100, set to how far from the left of the zoomable image you want the cursor's apparent position to be (defaults to center)
    		// initpower: 4, for variable zoom features, sets the initial zoom power (defaults to about midway in the zoomrange)
    		// uselastzoom: true, if set, on mouse out, instead of returning to initpower, it stays at the current zoom power
    		// uselastposition: true, if set, on mouse out, instead of returning to the top and left coords set, it will remain where it is
    	// All of these may be used as data- attributes of multi-zoom trigger links to customize behavior for that image, ex: data-magtop="75"
    Like (using your current code):

    Code:
    jQuery(document).ready(function($){
    
    
    	var count = jQuery('.mini-pages img').length;
    	for (var x=1;x<count+1;x++) {
    		var thisId = 'image' + x;
    		var src = jQuery('#' + thisId).attr('src');
    		var largeimage = src.replace("-320px","");
    		jQuery('#' + thisId).addimagezoom({
    			magnifiersize: [610,700],
    			magnifierpos: 'right',
    			alwaysreveal: true,
    			cursorshade: true,
    			largeimage: largeimage,
    		});
    	}
    
    
    });
    Since you don't have any variable zoom, it doesn't make sense to set the zoom level. but if you add variable zoom you can set the zoom level by using the initzoom property. You can position which part of the image is being magnified by using the magtop and magleft properties.

    Any questions, just let me know.

    P.S. I'm thinking of a variation on this that might allow only for the larger image to always be seen or only the lens, or both. I'm not sure how feasible this will be either to write or to use in actual practice though.

    And this unofficial release also includes other updates/new options, see the notes at the beginning of the script.
    Last edited by jscheuer1; 06-24-2013 at 07:59 PM. Reason: update the script, add P.S.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Javascript - Load new images on each page load/refresh
    By spook_man in forum Looking for such a script or service
    Replies: 8
    Last Post: 12-11-2013, 01:31 AM
  2. DHTML Window widget - Load after page load?
    By davidjohny in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-21-2008, 09:36 AM
  3. Need to load certain page in an iframe on load.
    By SawnDiddle in forum JavaScript
    Replies: 10
    Last Post: 05-08-2008, 09:31 PM
  4. Script has no name - sequential image load on page load
    By vkbarefoot in forum Looking for such a script or service
    Replies: 10
    Last Post: 07-24-2007, 05:28 PM
  5. more than one load area on one page for thumbnail viewer 2
    By wolfwoman in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 06-02-2007, 08:19 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
  •