PDA

View Full Version : Image Magnify has border - can it be removed?



JohnP
12-02-2009, 12:18 AM
1) Script Title:

jQuery Image Magnify v1.1

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamicindex4/imagemagnify.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
12-02-2009, 02:19 AM
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
12-02-2009, 02:33 AM
Thanks. :)

JohnP
12-02-2009, 04:12 AM
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
12-02-2009, 10:16 PM
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
12-02-2009, 11:11 PM
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
12-03-2009, 07:37 AM
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
12-03-2009, 06:28 PM
Works great, thank you very much :D