- Menu scripts
- Window scripts
- Calendar scripts
- Gallery scripts
- Form widgets
- Tab view scripts
- Table widgets
- Drag and drop
- Folder trees
- AJAX scripts
- Content Effects
- Misc scripts
- Chess widgets
- DHTML Suite
Download floating gallery
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>
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.:
- Create a hidden frame(example: <IFRAME src="whereToSubmit.html" name="myIframe" frameborder="no" height="1" width="1">)
- Create a form where target is set to this iframe(<FORM name="myForm" action="whereToSubmit.html" target="myIframe" method="post">)
- Create a hidden form field where we store the commaseparated list of image-ids: (<INPUT type="hidden" name="imageIdList">)
- In the saveImageOrder function, update the hidden form field with the commaseparated list of image ids: document.myForm.imageIdList.value = orderString)
- 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.
- 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.