galleries.DigitalVilliage.com: gpDojoGallery

Overview
Setup
Options
Images
CSS Files
Demo
Download

The gpDojoGallery is a Dojo Photo Gallery Widget. Image information for the widget is retrieved ajaxally from a JSON object

gpDojoGallery Features

Maximum dimensions of both thumb and large images can be set
Display images with varying dimensions
Thumb container can be positioned on the center, left, right, bottom or top of the page
Large images can be displayed using dojox.image.Lightbox
Optional title can be displayed for each image

Dojo files can be loaded from a local build or from a CDN distribution. First load the CSS files. Lightbox.css is only needed if you are displaying the thumbnails in the center of the page.

The gpDojoGallery is distributed with 3 CSS files. Load the relevant CSS file for your photo gallery set up. In the example below, I am loading the center.css file.

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/soria/soria.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojox/image/resources/Lightbox.css" />
<link rel="stylesheet" type="text/css" href="js/gpWidgets/gpDojoGallery/css/center.css" />

Next load the gpDojoGallery widget and the CDN file. In the example below, I am using google's CDN.

<script type="text/javascript">
djConfig={
  parseOnLoad: true,
  isDebug: true,
  baseUrl: "./",
  modulePaths:{"gp":"js/gpDojoWidgets/gpDojoGallery"}
};
</script>
 
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"></script>
<script type="text/javascript">
	 dojo.require("gp.gpDojoGallery");
</script>
 
<script type="text/javascript">
dojo.addOnLoad(function() {
  var ga = new gp.gpDojoGallery({gallery_url: "js/gpDojoWidgets/gpDojoGallery/test_data/gallery.js"}, "gpGalleryCntnr");
});
</script>

gpDojoGallery Options

gallery_url: The location of the image configuration file. This must be a JSON object.

thumb_position: The position of the thumb container. The values can be 'center', 'top', 'bottom', 'left', or 'right'. The default is 'center'.

base_path: The image location in the json object can contain relative paths. Use this option to add a base path to the image location.

itemMap: The item map for the JSON object. This tells the widget the name to search for in each JSON collection. The default is:

{"image_id":"image_id", "thumb_name":"thumb_loc", "thumb_width": "thumb_width", "thumb_height": "thumb_height", "large_name":"large_loc", "large_width": "large_width", "large_height": "large_height", "caption":"caption", "link": "link"}

The itemMap is discussed in more detail on the 'image' tab

thumb_max_height: The maximum height that is to be displayed for each thumbnail. The widget will convert the thumbnail to the maximum height.

thumb_max_width: The maximum width that is to be displayed for each thumbnail.

Note: The widget will set either max height or max width, not both. The dimensions of the image will be proportionally changed.

thumb_sizes: This option is used when the thumb_position option is set to center. If the thumb images have varying dimensions, set this option to 'various' (the default is 'constant'). This will tell the widget to create a wrapper around each thumb image where the width is set to the thumb with the largest width and the height is set to the image wih the largest height. By doing this, the thumb images spaced evenly within the gallery conainer.

large_max_height: The maximum height that is to be displayed for each large image.

large_max_width: The maximum width that is to be displayed for each large image.

lightbox_grouping: This option is used when the thumb_position option is set to center. This tells the widget whether previous and next buttons will be displayed when the large is displayed using dojox.image.Lightbox. The default is false.

picsPerPage: Set the maximum number of images per page. When this option is set, pervious and next buttons will be displayed with the images. If the thumb_position option is set to center, the previous and next buttons will only appear on hover.

onImageClick: This option is only used when the thumb_position option is set to center. When a thumb image is clicked, the default action is that the large image is displayed using Lightbox. The othe options are:

// use this option to go to a url specified in the link option of the JSON record
onImageClick: {"link": "fromData"}
 
// use this option to go to a url specified in the link option.
onImageClick: {"link": "mypage.php"}
// If the param is added, the image id in the JSON record will be passed to the url
onImageClick: {"link": "mypage.php?id=", "param", true}
 
// use this option to call function when the thumb image is clicked.
onImageClick: {"func": "funcName"}
// If the param is added, the image id in the JSON record will be passed to the function
onImageClick: {"func": "funcName", "param", true}
 
// You can pass the function like so:
var cl = {"func": "testFunc", "param": true};
var ga = new gp.gpDojoGallery({gallery_url: "js/gpWidgets/gpDojoGallery/test_data/gallery.js", onImageClick: cl}, "gpGalleryCntnr");

The gallery_url option to store the location of the JSON object. The JSON object should take the following format:

{ items: [
	{
	  "thumb_loc":"gallery/thumbs/fashionartwork.jpg",
	  "large_loc":"gallery/large/fashionartwork.jpg",
	  "thumb_width":"42",
	  "thumb_height":"28",
	  "large_width":"750",
	  "large_height":"499"
	},
	{
	 "thumb_loc":"gallery/thumbs/watch.jpg",
	  "large_loc":"gallery/large/watch.jpg",
	  "thumb_width":"42",
	  "thumb_height":"22",
	  "large_width":"750",
	  "large_height":"387"
	},
	{
	  "thumb_loc":"gallery/thumbs/birds.jpg",
	  "large_loc":"gallery/large/birds.jpg",
	  "thumb_width":"42",
	  "thumb_height":"24",
	  "large_width":"750",
	  "large_height":"387"
	}
]}

The name for each value can be changed by changing the itemMap option

itemMap: "thumb_name":"thumb", "thumb_width": "tw", "thumb_height": "th", "large_name":"large", "large_width": "lw", "large_height": "lh"}

{
	  "thumb":"gallery/thumbs/fashionartwork.jpg",
	  "large":"gallery/large/fashionartwork.jpg",
	  "tw":"42",
	  "th":"28",
	  "lw":"750",
	  "lh":"499"
	},

By default, the image file name will be displayed as the title (alt text) when the user moves their mouse over the image. You can display whatever you like in this area by using the caption option.

{
	  "thumb_loc":"gallery/thumbs/fashionartwork.jpg",
	  "large_loc":"gallery/large/fashionartwork.jpg",
	  "caption":"Fashion Art Work",
	  "thumb_width":"42",
	  "thumb_height":"28",
	  "large_width":"750",
	  "large_height":"499"
	},

You can add an image id that can be used when the thumb_position option is set to center.

{
	  "image_id":"1",
	  "thumb_loc":"gallery/thumbs/fashionartwork.jpg",
	  "large_loc":"gallery/large/fashionartwork.jpg",
	  "caption":"Fashion Art Work",
	  "thumb_width":"42",
	  "thumb_height":"28",
	  "large_width":"750",
	  "large_height":"499"
	},

You can add a link option to each record which can be used when the thumb_position option is set to center.

{
	  "image_id":"1",
	  "thumb_loc":"gallery/thumbs/fashionartwork.jpg",
	  "large_loc":"gallery/large/fashionartwork.jpg",
	  "caption":"Fashion Art Work",
	  "thumb_width":"42",
	  "thumb_height":"28",
	  "large_width":"750",
	  "large_height":"499",
	  "link":"http://mysite.com/store/view.php?id="
	},

The widget is distributed with 3 CSS files - one for each layout type. The majority of the styling in each file is the same. The difference is the styling that is specific to each layout.

center.css

/* The widget container */
#gpGalleryCntnr {
	position: absolute;
	width: 500px;
	height:600px;
	top:50px;
	left:50%;
	margin-left: -250px;
}
 
/* The thumb container */
.gpGalleryThumbWrapper {
	float:left;
	width:500px;
	height:600px;
	overflow:auto;
	margin:0;
	padding:0;
}
 
/* The hover next and previous buttons */
.gpGalleryHoverShowPrevBtn, .gpGalleryHoverShowNextBtn {
	position:relative;
	width:63px;
	height:32px;
	top:80px;
	left:0px;
	z-index:98;
	background:url(../images/lightbox-btn-prev.gif) no-repeat;
	display:none;
}
 
.gpGalleryHoverShowNextBtn {
	background:url(../images/lightbox-btn-next.gif) no-repeat;
	left:100%;
	z-index:99;
	top:50px;
}
 
.gpGalleryHoverShowPrevBtn:hover, .gpGalleryHoverShowNextBtn:hover {
	cursor:pointer;
}

Note: When changing the dimensions of the widge container (gpGalleryCntnr), the dimensions of the gpGalleryThumbWrapper should also be changed.

top_bottom.css

The top_bottom.css file is used when the thumb_position is set to top or bottom

/* Holds the thumb and nav containers */
#gpGalleryControlCntnr {
	float:left;
}
 
/* The widget container */
#gpGalleryCntnr {
	width:100%;
	height:100%;
}
 
/* The thumb Region */
.gpThumbHoriz {
	float:left;
	width:100%;
	min-height:20%;
	background-color:#2C2F34;
	margin:0;
	padding:0;
}
 
/* The thumb container */
.gpHorizThumbCntnr {
	float:left;
	padding-right:5px;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	background: #eeeeee; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr="#eeeeee", endColorstr="#cccccc"); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #eeeeee,  #cccccc); /* for firefox 3.6+ */
	border: solid 1px #6f6f6f;
}
 
/* The large region */
.gpLargeHoriz {
	float:left;
	width:100%;
	min-height:80%;
	background-color:#000;
	margin:0;
	padding:0;
}

left_right.css

The left_right.css file is used when the thumb_position is set to left or right

/* Holds the thumb and nav containers */
#gpGalleryControlCntnr {
	float:left;
}
 
/* The widget container */
#gpGalleryCntnr {
	width:100%;
	height:100%;
}
 
/* The thumb Region */
.gpThumbVert {
	float:left;
	width:20%;
	margin:0;
	padding:0;
	background-color:#000;
}
 
.gpVertThumbCntnr, .gpVertNavCntnr {
	float:left;
	width:150px;
	background-color: #eeeeee;
} 
 
.gpVertNavCntnr {
	padding-left:30px;
	width:120px;
}
 
/* The large Region */
.gpLargeVert {
	float:left;
	width:80%;
	background-color:#000;
	margin:0;
	padding:0;
	height:100%;
}

Demo: Thumb Position Center

Demo: Thumb Position Bottom

Demo: Thumb Position Left

Images used in the demo were downloaded from FreePhotosBank.com

The gpDojoGallery can be downloaded from GitHub.