Results 1 to 4 of 4

Thread: CSS Image Gallery - Is it possible to drag hovered image freely?

  1. #1
    Join Date
    May 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Image Gallery - Is it possible to drag hovered image freely?

    Same goes for "CSS Popup Image Viewer" as well!

    Very awesome feature and I'd love to move/drag hovered img FREELY to anywhere if it is obstructing some area.

    If that is possible, let me know how!

    Thanks!

    ~Ethan

  2. #2
    Join Date
    Jun 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    My friend Ethan,
    I was wondering if you have found any solution to your question. Because I 'm trying to do the same thing but i don't know how. If you have found a way please share it.

    Thanks!

  3. #3
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Please provide a link to the CSS popup image view you are referring in your postings.

    To enable Drag and Drop feature using CSS alone it won't be possible you have to use JavaScript as well.

    Here is a Drag & Drop script in DD - http://www.dynamicdrive.com/dynamici...drag/index.htm

    You can try to integrate the above mentioned script in your popup image view if that is possible.

  4. #4
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Here is one version in which you can drag and drop the original image as well as the popped up image to the location you wish.

    I've used the following items together for this purpose:

    http://www.dynamicdrive.com/dynamici...drag/index.htm - For the drag and dropping purpose.

    http://www.dynamicdrive.com/style/cs...-image-viewer/ - Image popup viewer


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
           <title>Untitled Document</title>
            <style type="text/css">            
                .thumbnail {
                    position: relative;
                    z-index: 0;
                }
                
                .thumbnail:hover {
                    background-color: transparent;
                    z-index: 50;
                }
                
                .thumbnail span { /*CSS for enlarged image*/
                    position: absolute;
                    background-color: lightyellow;
                    padding: 5px;
                    left: -1000px;
    		top: 0;
                    border: 1px dashed gray;
                    visibility: hidden;
                    color: black;
                    text-decoration: none;				
                }
                
                .thumbnail span img { /*CSS for enlarged image*/
                    border-width: 0;
                    padding: 2px;
                }
                
                .thumbnail:hover span { /*CSS for enlarged image on hover*/
                    visibility: visible;
                    top: 0;
                    left: 60px; /*position where enlarged image should offset horizontally */				
                }
                
            </style>
    	<!--[if IE]>
    		<style type="text/css">
    		.thumbnail span { /*CSS for enlarged image*/
                    position: absolute;
                    background-color: lightyellow;
                    padding: 5px;
                    left: -1000px;
    		top: 0;
                    border: 1px dashed gray;
                    visibility: hidden;
                    color: black;
                    text-decoration: none;
    		margin-top: 55px;
                }		
    		</style>
    	<![endif]-->
            <script type="text/javascript" src="dom-drag.js"></script>
        </head>
        <body>    	
            <a class="thumbnail" href="#thumb" id="tree1"><img src="tree_thumb.jpg" width="100px" height="66px" border="0" /><span id="tree2" style="position:absolute;"><img src="tree.jpg" />
                    <br/>
                    Simply beautiful.
                </span>
            </a>
            <a class="thumbnail" href="#thumb" id="ocean1"><img src="ocean_thumb.jpg" width="100px" height="66px" border="0" /><span id="ocean2" style="position:absolute;"><img src="ocean.jpg" />
                    <br/>
                    So real, it's unreal. Or is it?
                </span>
            </a>
            <br/>
            <br/>
            <script type="text/javascript">
            	//Enabling draging and dropping on the small (original images)
            	Drag.init(document.getElementById("ocean1"));
    		Drag.init(document.getElementById("tree1"));
    		
    		//Enabling draging and dropping on the popped up images
            	Drag.init(document.getElementById("ocean2"));
    		Drag.init(document.getElementById("tree2"));
    	</script>
        </body>
    </html>
    I've highlighted all the important part in which I've made changes while integrating two different things together. I've also inserted an IE specific CSS section as IE used to show the popped up image covering the original image unlike the way FF used to show.

    I've used my own image names and IDs which in your case can be changed according to your requirement.

    Please find an attachment containing the HTML page, images, JS files, etc. Just unzip it and store together and open the HTML page in your browser and try to hover your mouse over the image and drag the popped up image or the original image.

    If you wish to disable the dragging and drop of original images then comment the following section in the code:

    Code:
                    //Enabling draging and dropping on the small (original images)
            	Drag.init(document.getElementById("ocean1"));
    		Drag.init(document.getElementById("tree1"));
    If you wish to disable the dragging and drop of popped up images then comment the following section in the code:

    Code:
    //Enabling draging and dropping on the popped up images
            	Drag.init(document.getElementById("ocean2"));
    		Drag.init(document.getElementById("tree2"));
    Let me know if there is anything you need to fix in this case.
    Last edited by codeexploiter; 06-27-2008 at 11:55 AM.

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
  •