Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
HTML5 / Miscellaneous

GalleryGen - Image Gallery HTML Code Generator

— Add-On to

Subscribe to our feed to stay up to date!

New! Follow us as you want it!

GalleryGen -  Image Gallery HTML Code Generator - CodeCanyon Item for Sale


Ad: Bluehost hosting

See this video preview to get a better idea of how it works

Every web developer has to deal with image galleries. This involves looking up a bunch of images, get their path and names, and then put them in a standard HTML layout, and also include captions and titles for the images. This process can become quite tedious.

GalleryGen aims to ease the burden of that process. It generates HTML code for image galleries, that include Lightbox image galleries and Slideshows. Instead of using PHP to locate images it uses HTML5 and javascript.

Key features are :

  1. Select images either from a file dialog window or drag and drop them. Multiple selection of images is possible in both cases.
  2. Sort the selected images by dragging them around.
  3. Delete any selected image from the list.
  4. Lightbox preview of the selected images.
  5. Two gallery options – Lightbox and Slideshow.
  6. Enter title attributes for anchor tags and alt and title attributes for images.
  7. For Slideshow – Options to enter a wrapper of your choice for the slideshow, wrappers for each image, and custom HTML code before/after each image.
  8. The generator outputs valid HTML code.
  9. Select the generated code by clicking the “Select Code” button thus making it easy to copy the entire generated code. The generated code is also editable by using the “contenteditable” attribute.

To know about available code output options have a look at the screenshots. Since no PHP is used, this generator can be run locally.

NOTE: This generator uses the latest HTML5 technologies and hence will run properly in modern browsers that support these technologies. At the moment these include Firefox 3.6+, Chrome 7.0+ and Opera 11.10+. Chrome has some restrictions when the generator is run locally and does not display any images although it still outputs correct code. If the generator is run from a server then it works fine in Chrome. There is no such complication in Firefox and the generator works fine there no matter from where you run it. In Opera there is no support for HTML5 Drag and Drop yet. So you won’t be able to drag images into the generator but only select them from the file dialog window.

Updated on 26 July, 2011 – version 1.1

  • Added a “Select Code” button, which when clicked selects the entire generated code thus making it easy for the user to quickly copy the generated code.
  • The area for the generated code in the modal overlay box is now editable by using the “contenteditable” attribute.
  • Fixed a bug in the Lightbox preview of the selected images where the Lightboxes were sometimes opening with incorrect sizes.
  • More Items by CosmoCoder

    Show Photos, Audio, Video ova lie Two Display Modes Filtering FunctionaUty Multiple Gallery Sets Support Support FLuid Responsive Design Two Colour Schemes Multiple Settings

    GalLery for Images, Audio, Video Coverfiow ThumbnaiL DispLay Modes FiLter Items FiLe Type Custom Categories FLuid Responsive Design Touch Screen Support CCGaNer HTM5 MULTIMEDIA GA1ERY olos ftot V.deos


Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers


24 December 10

Last Update:
26 July 11

Compatible Browsers:
IE10, IE11, Firefox, Safari, Opera, Chrome

Software Version:

High Resolution:

Files Included:
JavaScript JS, HTML, CSS


eCommerce, All Items, drag and drop, gallery, generator, html5, images, javascript, lightbox, lightbox gallery, slideshow