Image Magnify has border - can it be removed?

[JohnP]

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)

[ddadmin]

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

		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.

[JohnP]

Thanks.

[JohnP]

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??

[ddadmin]

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:

<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>

[JohnP]

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

[ddadmin]

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:

<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.

[JohnP]

Works great, thank you very much