EndPreviousNextEnd EndCollapse AllExpand AllPrint This TopicEnd

Creating an Image Gallery plugin

This section will run through the creation of a new Image Gallery plugin. The audience for this is someone with knowledge of HTML, javascript, CSS and a small amount of c# programming knowledge.

 

This example demonstrates how easy it is to create an image gallery plugin based on “jQuery Masonry” (http://masonry.desandro.com/).  This plugin takes a list of images which would normally be displayed in a grid like the image on the left, and arranges them like the image on the right – making the images fit in gaps like a stone wall.  It’ll look best with a series of images with the same width but varying heights.

 

Masonry Plugin Example - Before CSS Floats

     Masonry Plugin Example After

 

Step One - Create plugin in plain htmlStep One - Create plugin in plain html

 

Step Two - Create the plugin XML fileStep Two - Create the plugin XML file

 

Step Three - Create the ascx fileStep Three - Create the ascx file

 

Step Four - Add the module to a page and testStep Four - Add the module to a page and test

Topic Link