How To Create Custom Gallery Visualization

SiteKreator.com allows you to change the layout of your image galleries by creating your own gallery visualization plug-in. How you can do that:


  1. Create a standard gallery and in the Gallery Style dropdown choose Custom (Requires plug-in) style.
  2. Fill-in the thumbnail size
  3. In the Plugin code add the HTML/JavaScript code for your plugin (See below).





The code of the plug-in is a normal HTML/JavaScript/CSS code responsible for displaying the images in the gallery. The information about image URLs, comments and other parameters is located inside GALLERY_JSON variable in the following format:


var GALLERY_JSON = {

  "id": "<id>",                                    /* unique gallery ID */            

  "header": "<header>",                            /* gallery header */

  "footer": "<footer>",                            /* gallery footer */

  "thumb_size": "<width>x<height>",                /* thumbnail width and height in px */

  "popup_size": "<width>x<height>",                /* popup viewer width and height in px */

  "images": [                                      /* a list with all images in the gallery */

  {
  

     "id": "<id>",                                 /* unique image ID */

     "caption": "<caption>",                       /* image caption */

     "thumb_url": "<url>",                         /* URL of the thumbnail image version displayed on the page */

     "large_url": "<url>",                         /* URL of the image version displayed in the popup viewer",

     "full_url": "<url>",                          /* [optional] URL of the original image */

     "link": "<url or JavaScript code>",           /* URL that should be open if an user clicks on the thumbnail image */

                                                   /* OR the code for loading the popup viewer */

     "image_attributes": {                         /* attached those attributes to the img tag for each gallery image */

          "<attribute name1>": "<attribute value1>",

          "<attribute name2>": "<attribute value2>",

          ...

     } )

  } ,

  ......

  ]

}

Using the information from GALLERY_JSON, the gallery plug-in should display the gallery in any format desired. The plug-in can use the mootools library for DOM manipulations and animation effects. Here you can see an example of such plug-in.


sample_gallery.txt 7.4KB 2009/10/07 01:10

Demo