Results 1 to 8 of 8

Thread: Image Magnify has border - can it be removed?

  1. #1
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default Image Magnify has border - can it be removed?

    1) Script Title:

    jQuery Image Magnify v1.1

    2) Script URL (on DD):

    http://www.dynamicdrive.com/dynamici...agemagnify.htm

    3) Describe problem:

    once the image is zoomed in, there is a thin gray border around it. Is there a way to remove this? (I am using images with rounded corners/alpha)

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    You can remove the 1px gray border from the enlarged image by editing the below line inside the .js file:

    Code:
    		var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendTo(document.body)
    Change 1px to 0 for example.
    DD Admin

  3. #3
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Thanks.

  4. #4
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default another question regarding the magnify script

    Is there a way to dim out multiple images, instead of just the source magnified one?

    can I apply the opacity to a list of img ID's??

  5. #5
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Not quite sure what you mean by dimming out multiple images- if there are 3 thumbnail images on your page, and the user magnifies all 3, all 3 thumbnails will be dimmed while their enlarged versions is shown.

    can I apply the opacity to a list of img ID's??
    Yep, you'd use the method jQuery("somelements").imageMagnify() to apply the magnify effect dynamically to a given collection of images, in this case, ones with the desired IDs. For example:

    Code:
    <img id="girl" src="listenmusic.jpg" class="magnify" style="width:200px; height:150px" /> 
    <img id="boy" src="listenmusic.jpg" class="magnify" style="width:200px; height:150px" />
    
    <script type="text/javascript">
    
    jQuery("#girl, #boy").imageMagnify({ //apply effect to image with ID="myimage"
     magnifyto:750,
     magnifyduration: 1000 //<--No trailing comma after last option!
    })
    
    </script>
    DD Admin

  6. #6
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Thanks for the reply, let me explain better...

    I have a webpage that looks like the jeopardy board, 5 thumbnails wide with 6 rows.

    When magnifying one of those images, I need a solution where I can dim all the images/thumbnails at once, so that the large image stands out better (as it sits on top of unaffected ones - it looks too busy).

    I don't know if it would be easier to dim all images every time a single one is magnified, or to somehow attach a second semi-transparent image which appears over everything (behind and only while image is magnified), which can fake the dimming of everything behind??

    either solution would work for me as I have a black background.

    Thanks

  7. #7
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    The basic idea of dimming multiple images is easy enough. With the below modified .js file for example, it will dim all thumbnail images with the CSS class "magnify" when one of the images is enlarged:

    Code:
    <img src="listenmusic.jpg" class="magnify" style="width:200px; height:150px" /> 
    <img src="listenmusic.jpg" class="magnify" style="width:200px; height:150px" />
    Clicking on another of the images above will magnify the image in question, plus dim both thumbnails.
    DD Admin

  8. #8
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Works great, thank you very much

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
  •