Apps

Plug in GalleryView with jQuery on your website

Ryan Boudreaux introduces GalleryView, a customizable plugin that you can use and modify to create a photo gallery viewer on your website.

I'm always on the watch for free nifty gadgets, creative tools, and expert plugins that make life easier for my web development craving. Recently, I stumbled on GalleryView by Jack Anderson, a web developer in the Washington, DC area.

The jQuery plugin includes many configuration options for users who want to fashion their own unique photo gallery styles, from the plug and play zero configuration implementation to adding captions, creating custom thumbnails, and photo details. Other options include a slider style gallery, varying element positioning, and "Create a Gallery", which is a new online addition that allows you to build your own "$ (#myGallery)" function call. This post will review downloading the plugin from GitHub, setup, usage, code snippets, and several demonstrations running the GalleryView jQuery plugin. I've not provided a download of my demonstrations in this post since the original code is available for you to participate on your own from the GitHub directory.

Download and setup

As with all Github repositories, the GalleryView code is available for free download as a zip file or individually, and includes the following folders: CSS, demos, js, and the associated files: readme, license, and change log. Once downloaded and extracted to your web directory structure, you can rename the root folder to anything you wish. For this demonstration, I renamed the directory "galleryview" and put it under my web directory, as shown in Figure B:

After the directory structure is set, then the next steps for setting up the jQuery plugin are quite easy and quick. With six total steps and then some coding in your gallery web page document, you can have your gallery up and running in short order. The steps in abbreviated form include the following:

  1. Create the directory structure (Done!)
  2. Include script tags for GalleryView version, jQuery timers and easing files.
  3. Add a reference to the GalleryView CSS stylesheet to your web page document.
  4. Create an unordered list of image content and text captions with the ul id="gallery".
  5. Edit the id of the first rule in the GalleryView CSS stylesheet to match the id given in the unordered list, by default it is listed as "#myGallery".
  6. Call the GalleryView plugin with the function call: $('#id_of_list').galleryView().

The jQuery

The force behind GalleryView is the power of jQuery library, and leveraging that force includes the following global and local script tags added to the <head>:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../js/jquery.galleryview-3.0-dev.js"></script>
<link type="text/css" rel="stylesheet" href="../css/jquery.galleryview-3.0-dev.css" />

The last script tag calls the GalleryView() function on your unordered lists, and includes many settings which can be modified depending on your gallery requirements. Several options and modifiable configurations include the following (I've listed just the first six of the thirty total settings with defaults):

transition_speed: 2000,    //INT - duration of panel/frame transition (in milliseconds)
transition_interval: 4000, //INT - delay between panel/frame transitions (in milliseconds)
easing: 'swing',    //STRING - easing method to use for animations (jQuery provides 'swing' or 'linear', more available with jQuery UI or Easing plugin)
show_panels: true,  /BOOLEAN - flag to show or hide panel portion of gallery
show_panel_nav: false,     //BOOLEAN - flag to show or hide panel navigation buttons
enable_overlays: true,     //BOOLEAN - flag to show or hide panel overlays
Other optional features include panel_width, panel_height, panel_animation, panel_scale, enable_slideshow, show_filmstrip, show_captions, and show_infobar, just to name a few. These and all the "Full Featured" options are available in the all-features.html file located within the demo folder, which is included with the download; the "Full Feature Demo" is displayed in Google Chrome Version 22.0.1229.94 m,  in the Inspect Element view as displayed in Figure C:

The CSS

The GalleryView plugin includes its own stylesheet "jquery.galleryview-3.0-dev.css". Of course, you are free to alter or modify any of the styling properties as you wish. The CSS is well organized and commented and includes sections for "Gallery List", "Panel Styles", "Filmstrip Styles", and more. The "Panel Styles" snippet is displayed in Figure D:

Add the call to the stylesheet from the <head> of your web page document , similar to the stylesheet link below:

<link type="text/css" rel="stylesheet" href="../css/jquery.galleryview-3.0-dev.css" />

The HTML

So, you've got your script tags, you have the call to the stylesheet -- what's left now is to create the unordered list <ul> with each image and caption added as individual list items <li> within the <body> of the web page document. If you are using the full feature set, then it is recommended that you include attributes in the image tag for "data-frame", "title", and "data-description". The code snippet below demonstrates the basic HTML that is necessary to load the images:

<ul id="myGallery">
  <li><img data-frame="%i/imagename1.png%" src="%i/imagename1.png" title="Sample Image One" data-description="Sample of a typical image in your gallery" /></li>
  <li><img data-frame="%i/imagename2.png%" src="%i/imagename2.png" title="Sample Image Two" data-description="Sample of another  typical image in your gallery" /></li>
</ul>
A screen capture of the full feature demo is displayed as shown in Google Chrome Version 22.0.1229.94 m with Figure E:

Demonstrations

Jack Anderson provides several online demonstrations of the GalleryView in use including:

  • Zero Configuration -The default demonstration, which is GalleryView straight out of the box where all images are scaled and cropped to fit fully within the dimensions of the gallery panel, and it includes the filmstrip frames, as shown in Figure E above.
  • Frame Captions - Adds captions to the filmstrip frames by adding the "title" attribute to the image tag, as shown in Figure F:

  • Custom Thumbnails and Image Details - Makes use of two GalleryView features, the ability to set custom thumbnails and informational overlays with the data-frame, title, and data-description image attributes, as shown in Figure G:

Other demonstrations include Slider Style Gallery, Varying Element Position, and Image Panning. And remember, you can create your own "Gallery" in Jack's experimental "Create-A-Gallery" where you set panel options, filmstrip options, and information bar options with toggles and slides as shown in Figure H:

The GalleryView plugin should be an easy adoption to just about any website that requires a photo gallery as part of the online content delivery.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments

Editor's Picks