Download floating gallery

Demo

Bookmark and Share

Download entire script as zip file

Click here to download this entire script including images as a zip file. Open the file floating_gallery in your browser to see how it works.

Add images to the gallery

The images used in the gallery are inserted by using just plain HTML. The syntax you have to use is like this:
<div class="imageBox" id="imageBox1">
     <div class="imageBox_theImage" style="background-image:url('example_images/image1.jpg')"></div>
     <div class="imageBox_label"><span>Image number 1</span></div>
</div>

The values that will change for each image are

  • The ID of the first div("imageBox1"), which should be unique for each of the images in the gallery.
  • The background image of the second div. This will be the path to the image you want to show
  • The text between the <span> tags of the third div("Image number 1"). This will be the title of your image

How to save changes

After someone have rearranged the images, you might want to give them the option to save their changes. This can be done by working a little bit with a function called saveImageOrder().

What this function does is to create a comma separated list of images IDs based on how the images are currently ordered. Example : "1,3,4,9,6". One suggestion on how the to save these changes is to have a hidden frame and post form data there. I.e.:

  1. Create a hidden frame(example: <IFRAME src="whereToSubmit.html" name="myIframe" frameborder="no" height="1" width="1">)
  2. Create a form where target is set to this iframe(<FORM name="myForm" action="whereToSubmit.html" target="myIframe" method="post">)
  3. Create a hidden form field where we store the commaseparated list of image-ids: (<INPUT type="hidden" name="imageIdList">)
  4. In the saveImageOrder function, update the hidden form field with the commaseparated list of image ids: document.myForm.imageIdList.value = orderString)
  5. At last, submit the form: document.myForm.submit()

Now, the order of the images is submitted to the "whereToSubmit.html" file. There, you will typically explode the string into an array of pieces and then update your database

In case you don't want drag & drop

If you only want to display the images and don't want any drag & drop support, you can simply remove the entire <SCRIPT>...</SCRIPT> part.

Changelog

  • April, 29th, 2009: Bugfix (problem with the save string) added support for dragging images to the end of the slideshow. Thanks to Jonathan Massuchetti for the help with this.

Comments

sameer
everything on this is awesome and i really appriciate the work which has been done here.....and i salute your efforts
sameer at 08:42PM, 2011/10/03.
princessliffe
can you give an example for inserting the save images into database?i'm quite lost here.

thank you.
princessliffe at 04:02AM, 2011/12/19.
Sankacoffee
Awesome code man!! The easiest code for sorting a list on the web!
1h to implement it in my project.I had been searching all day long for this kind of stuff. (I'm horrible with CSS and javascript code when the file is empty)

BTW if someone has bigger images and want them resized in the thumbnails, juste add "background-size: 100%;" to .imageBox_theImage css class

thanks
Sankacoffee at 05:15PM, 2012/01/06.
Jack
Great script! But I think I found a bug... it situations where there are enough thumbnails that the page must be scrolled down, then the dragged items don't appear next to the mouse pointer - they appear higher up on the page.
Jack at 11:08PM, 2012/02/26.
fai
I found the same bug , I have 50 images , and when i scroll the page , all screwed
fai at 09:32PM, 2012/03/16.
anin
Hello, I found the same problem when the page i scrolled down. Is there any solution?
anin at 10:22AM, 2012/04/29.
Ketan Patel
Hello All, I found the same problem when the page i scrolled down., then the dragged items don't appear next to the mouse pointer - they appear higher up on the page.. please help me..
Ketan Patel at 06:51AM, 2013/04/22.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2014 dhtmlgoodies.com