CSS Image Gallery - Is it possible to drag hovered image freely? [Archive]

Ethan

05-21-2008, 02:33 PM

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

liki

06-27-2008, 09:49 AM

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!

codeexploiter

06-27-2008, 10:00 AM

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/dynamicindex11/domdrag/index.htm

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

codeexploiter

06-27-2008, 11:22 AM

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/dynamicindex11/domdrag/index.htm - For the drag and dropping purpose.

http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/ - Image popup viewer

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

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

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

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