Results 1 to 4 of 4

Thread: Image Power Zoomer ddpowerzoomer how to show small loading image while large loading

  1. #1
    Join Date
    Oct 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image Power Zoomer ddpowerzoomer how to show small loading image while large loading

    1) Script Title: Image Power Zoomer

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

    3) Describe problem: I'm very impressed with a way how featured zoomer works - http://www.dynamicdrive.com/dynamici...uredzoomer.htm, - it shows a loading gif while large image is loading. However in my situation I do not have an extra real estate on the page to show that large image on side ( and it could be really large - up 10 10Mb or even more).
    Image Power Zoomer suits me much better , since it loads a large image right over the small one within a magnifier. However it lacks that loading gif feature - while that large image is loading.
    In practice it shows an empty magnifier for a while ( in my case - up to a minute) until a large image is loaded. Is there a way to modify ddpowerzoomer a bit to add such a feature? Or I'm asking too much? Any clues will be helpful. Thanks.

  2. #2
    Join Date
    Aug 2004
    Posts
    9,878
    Thanks
    3
    Thanked 962 Times in 951 Posts
    Blog Entries
    15

    Default

    The easiest way would be to add a background image of a loading gif inside the magnifying glass, which once the actual large image has been loaded would replace it. Inside the .js file, add to the following line the code in red:

    Code:
    			$magnifier.outer.css({width:s.magnifiersize[0], height:s.magnifiersize[1], background:'url(loading.png) center center no-repeat'}) //set magnifier's size
    Obviously change loading.png to the path of your loading image.
    DD Admin

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Yes, but then when you move partially off the smaller image, the loading image will be partially visible again.

    To prevent that and add a few other niceties (optional loading message, optional partial opacity and background color for the loading image), I came up with this modified version of the script (right click and 'Save As'):

    ddpowerzoomer.js

    You will need a loading image, here's one or you can get or make your own (also right click and 'Save As'):

    Name:  loading.gif
Views: 344
Size:  3.2 KB

    Add these styles to the head of the page:

    Code:
    <style type="text/css">
    .powerloadingimg { /* do not edit */
    	visibility: hidden !important;
    }
    .powerouterloading { /* optionally edit for image name and background color */
    	background: white url('loading.gif') center no-repeat;
    }
    </style>
    Change white to your preferred color if different, or remove it for a transparent background. Configure the loading.gif to be your own.

    Finally, there are new configuration options inside the script. Using a text only editor like NotePad, edit them if desired (near the top):

    Code:
    /*Image Power Zoomer v1.1 (June 18th, 2010)
    * This notice must stay intact for usage 
    * Author: Dynamic Drive at http://www.dynamicdrive.com/
    * Visit http://www.dynamicdrive.com/ for full source code
    */
    
    //June 18th, 10: Adds ability to specify a different, higher resolution version of the original image as the image shown inside the magnifying glass.
    //Feb 2nd, 13: Unofficial update adds loading image
    
    jQuery.noConflict()
    
    var ddpowerzoomer={
    	loadimg: 'loading.gif', //configure loading image to be shown while larger image loads
    	loadingopacity: 0.5, //set opacity for loading image
    	loadingmessage: 'Loading . . .',
    	dsetting: {defaultpower:2, powerrange:[2,7], magnifiersize:[75, 75]},
    	mousewheelevt: (/Firefox/i.test(navig . . .
    Use the same loading image as configured in the added style section so that the script can make sure it's preloaded. If no loading message is desired, use an empty string (''). If no partial opacity for the loading image is desired, set that to 1.
    - John
    ________________________

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

  4. #4
    Join Date
    Oct 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks a lot. It works great!

Similar Threads

  1. Power Zoomer plus Image Map?
    By jkoke in forum Dynamic Drive scripts help
    Replies: 11
    Last Post: 04-01-2012, 12:55 AM
  2. Image Power Zoomer large image option IE 9 problem
    By fortwayne in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 11-29-2011, 01:10 AM
  3. Image Power Zoomer problem on image src change
    By wally in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 07-11-2011, 07:42 AM
  4. Bug with Image Power Zoomer v1.1
    By spuddle in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 07-08-2011, 07:24 PM
  5. PHP & Image Power Zoomer
    By funkfact in forum PHP
    Replies: 1
    Last Post: 11-17-2010, 05:36 PM

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
  •