1. Gather your hosted images
Need to extract photos from code? Add your image codes, ClicPic code, or old gallery code here and extract:
Photo URLs to be used in your gallery (add, remove, or rearrange ):
2. Style your Photo Gallery
3. Preview your Photo Gallery
4. Copy code and paste into HTML view of editor.
Copy your CSS gallery code below: Stylesheet Options:
Works with modern browsers. Not supported at all by IE6 or IE7, and somewhat supported by OP9. Enlargement on the iPad requires touching the thumbnail. It is released when the screen is touched outside the gallery.
Each photo requires two entries, once for the thumbnail and once for the large photo. An additional photo must be added as the default that displays on page load, when none is hovered.
Photos in the gallery will not be shown larger than the original, but will be scaled smaller to fit. If you have smaller photos and would like to limit the gallery size to those photo sizes, set "max-width" on the tool or in the code in the same place the gallery width percentage is set.
This tool handles the math to create thumbnail groupings for any one side (any number per side and any number deep on that side), and the math is all that changes for most groupings. If your number of photos will change only slightly, select a grouping that accommodates the larger number and empty spaces will appear for fewer pictures. The gallery framework can be further styled with CSS to add color, shadows, and other highlights.