Dragging images from a gallery - javascript

[samslystone]

Hi All

My client would like the user to be able to drag each image from this gallery directly onto the desktop. Currently if one grabs any particular image it always only saves the last (08), due to the javascript. Is there any way around this? Ideally she would like to be able to drag any of the images.
http://catherinehyland.co.uk/2012/work/work.html

All the best

S

[StevenHu]

I was able to drag that page's picture onto my desktop in my Mac OS X Lion.

[samslystone]

Hi Steve,

I can drag one picture, but not any of the others. If you flick through the gallery and try dragging each picture it will drag the same one picture each time

S

[hdewantara]

That I think because the image stacking-order doesn't get changed,
whenever one clicks a different number. Image #8 (though transparent)
always stays on the topmost layer and will always get saved.

So maybe you should play with "z-index" order, instead of "opacity":

#cf7 img {
	position: absolute;
	margin-right: auto;
	margin-left: auto;
	left: 0;
	z-index: 0;
	/*opacity: 0;*/
	/*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";*/
	/*filter: alpha(opacity=0);*/
	width: 100%;
}

And the one that gets on the top should have this styling:

#cf7 img.opaque {
	z-index: 1; /* any numbers larger that previous z-index above */
	/*opacity:1;*/
	/*-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";*/
	/*filter: alpha(opacity=1);*/
}

[samslystone]

Thank you so much, that works perfectly!