GalleryView jQuery Plugin 2.0 Example

Posted on by
GalleryView Plugin Example

GalleryView Plugin Example

Prior to Christmas I came across another list of great jQuery Plugins. This list (11 Amazing JQuery Gallery) contained the GalleryView Plugin which was visually impressive but looked quite simple to implement. The plugin website states that it:

aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.

The Plugin website has several demos. These demos show the flexibility of the plugin. As well as the default implementation there are demos that show how to use the Plugin as a LightBox style replacement and even how to create an HTML content panel using the Plugin. It is well worth checking out all of the demos to get a feel for just what the Plugin is capable of.

Worth a special mention is the implementation on the sites evolution page. On this page the GalleryView Plugin is used to show the evolution of the site in pictures during 8 days of development. A great example of ingenious ways to use this flexible Plugin.

I was interested in a simple and visually impressive gallery viewer, but this Plugin delivers more than that. I could see uses for this Plugin when creating dynamic content viewers, work portfolios and much, much more. So time for some implementation…

I begun my implementation by following the usage section on the Plugin sites homepage…and ended up with a complete mess! I had failed to notice the authors note at the top of the page:

this entire page is now out of date, as it talks about GalleryView 1.1. For the lastest version, 2.0, please check out http://plugins.jquery.com/project/galleryview.

Being away from home (with no internet access) for the break I had downloaded copies of the relevant pages. At this time I considered putting my attempts to get the example up and running on hold. This seemed to be a bit of a cop out to me. So I delved into the 2.0 source code in an attempt to determine the markup and styles required. I found the source code quite easy to read and understand, and soon had an almost fully functioning example. I was still having an issue with the filmstrip – so decided to complete the example when I returned from my break.

Implementation

My GalleryView Example

My GalleryView Example

View the example

In order to use the Plugin you need to use the jQuery javascript library, the GalleryView Plugin, the jQuery Timer Plugin and the jQuery Easing Plugin. The dependencies are included in the GalleryView Plugin download. Include these libraries in any pages you wish to use the Plugin.

Only a very simple piece of JavaScript is required to get the Plugin up and running:


<script type="text/javascript">
  $(document).ready(function(){
    $('#photos').galleryView({
      panel_width: 800,
      panel_height: 300,
      frame_width: 75,
      frame_height: 75
    });
  });
</script>

This simple bit of script calls the Plugins galleryView method with a minimum configuration set. Our panel and filmstrip frames will be set to the pixel sizes specified here. There are many more configurations available. If you want to know what configuration options there are check out the 2.0 release notes as well as those listed on the Plugin site.

There are links from the out of date Plugin website (in the comments) to some example of 2.0 code provided by a third party. These links were not working when I tried them. I was able to track down the right pages on the linked to site though. So with a bit of help from this example on appleton.me I was able to create a fully functioning example with the following very clear and concise bit of HTML:

<ul id="photos">
 <li>
   <span>Auckland City from North Head, Devonport</span>
   <img src="../../img/gallery/auckland.jpg" />
 </li>
 <li>
   <span>Lion Rock, Piha</span>
   <img src="../../img/gallery/lion_rock.jpg" />
 </li>
 <li>
   <span>Rangitoto</span>
   <img src="../../img/gallery/rangitoto.jpg" />
 </li>
 <li>
   <span>Fern</span>
   <img src="../../img/gallery/fern.jpg" />
 </li>
 <li>
   <span>River</span>
   <img src="../../img/gallery/river.jpg" />
 </li>
 <li>
   <span>Waves</span>
   <img src="../../img/gallery/waves.jpg" />
 </li>
 <li>
   <span>Piha: Looking towards 'The Gap'</span>
   <img src="../../img/gallery/towards_the_gap.jpg" />
 </li>
</ul>

The example page seems to be the most active page for the Plugin at this time. It even seems the developer has put the Plugin out to seed at this time. Jack Wanders stated on his Twitter account on 6th July 2009:

My apologies, but GalleryView and spaceforaname.com are officially dead in the water until further notice; occupied w/ other matters atm

Hopefully either he or someone else will pick up the Plugin as it certainly does have some great uses. If you are aware of the latest news related to the Plugin please let me know.

One thing I would particularly like to see is the IE7 Panel Overlay fade in/out issue fixed sometime soon (maybe I should do that myself after delving in to the source code) as I feel this could be a ‘BLOCKER’ for production uses. Setting the panels to not fade and switch instantly is a workaround in most situations.

Lists of other jQuery Gallery Plugins etc I have come across:

If the GalleryView Plugin doesn’t meet your needs or is not your cup of tea, maybe you will find something in these lists that does.

Purchase JQuery In Action 2nd Edition MEAP Edition

Purchase JQuery In Action 2nd Edition MEAP Edition

Be Sociable, Share!