Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Dragging images from a gallery - javascript

    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

  • #2
    Regular Coder
    Join Date
    Jun 2011
    Location
    CA
    Posts
    105
    Thanks
    0
    Thanked 10 Times in 10 Posts
    I was able to drag that page's picture onto my desktop in my Mac OS X Lion.

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #4
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    328
    Thanks
    9
    Thanked 49 Times in 48 Posts
    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":
    Code:
    #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:
    Code:
    #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);*/
    }

  • Users who have thanked hdewantara for this post:

    samslystone (12-21-2012)

  • #5
    New Coder
    Join Date
    Dec 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you so much, that works perfectly!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •