Results 1 to 10 of 10

Thread: Featured Image Zoomer conundrum

  1. #1
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Featured Image Zoomer conundrum

    1) Script Title: Featured Image Zoomer

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

    3) Describe problem: I cannot get the script(s) to work on images for a site I am building. I am not a programmer, but I usually know enough to get through most simple situations. I' most likely overlooking something. Is there a z depth situation that I may be overlooking? Here is the URL: any help would be greatly appreciated!
    http://www.hexcamo.com/patterns.htm
    Last edited by Franzal; 12-04-2010 at 06:48 PM. Reason: Resolved Problem

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Make sure you close the document.ready function:
    Code:
    jQuery(document).ready(function($){
    
    	$('#jungle').addimagezoom({
    		magnifiersize: [300,300],
    		magnifierpos: 'right',
    		largeimage: 'HeXjunglezoom.jpg' //<-- No comma after last option!
    	})
    	
    	$('#urban').addimagezoom({
    		magnifiersize: [300,300],
    		magnifierpos: 'left',
    		largeimage: 'HeXurbanzoom.jpg' //<-- No comma after last option!
    	})
    });
    
    </script>
    Jeremy | jfein.net

  3. #3
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thank you!

  4. #4
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    The loading icon now functions as does the crosshair, but the zoom window does not appear. Any other suggestions? I don't think there are directory issues as the large images are just in the images folder, and that's where I am pointing to. hmmmm....
    Last edited by Franzal; 12-03-2010 at 01:44 AM.

  5. #5
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    In your CSS:
    Code:
    <style type="text/css">
    
    .magnifyarea{ /* CSS to add shadow to magnified image. Optional */
    box-shadow: 5px 5px 7px #818181;
    -webkit-box-shadow: 5px 5px 7px #818181;
    -moz-box-shadow: 5px 5px 7px #818181;
    filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
    background: white;
    z-index:9999px;
    }
    
    </style>
    Jeremy | jfein.net

  6. #6
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks for your efforts Nile, I pasted the css you provided and it still isn't working. Any other suggestions?
    Last edited by Franzal; 12-03-2010 at 02:35 PM.

  7. #7
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    The problem is that your main div is covering the image zoomer. My modifications worked this morning when I posted the post but you changed something on the site. Can you make it back to how it was before, do the revisions, and then work with that?
    Jeremy | jfein.net

  8. The Following User Says Thank You to Nile For This Useful Post:

    Franzal (12-03-2010)

  9. #8
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    I will do my best... thanks again for your help.

  10. #9
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Nile,
    I put a z index of -1 on the main div and it works. Thank you for your help, it is very appreciated.

  11. #10
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    No problem, sorry for all the confusion.
    Here on DD, we like to keep things organized. In an effort to do so, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
    1. Go to your first post
    2. Edit your first post
    3. Click "Go Advanced"
    4. In the dropdown next to the title, select "RESOLVED"
    Jeremy | jfein.net

  12. The Following User Says Thank You to Nile For This Useful Post:

    Franzal (12-04-2010)

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
  •