Image/Photo Gallery Viewer using jQuery
jqGalView Overview
The jQuery jqGalView Plugin allows you to take a grouping of images and turn it into an flash-like image/photo gallery. It allows you to style it how ever you want and add as many images at you want.
Inspired by http://www.flashimagegallery.com/pics/artwork/!
Feel free to vote for this plugin over at http://ajaxrain.com/search.php?seVal=jqGalView
The jQuery jqGalView Plugin's purpose is to be unobtrusive as possible and after looking at a lot of static photo galleries I feel the jQuery Gallery Viewer does just that. It takes any current structure and rips out the images and any parent link and turns a static photo gallery in to a dynamic flash-like gallery.
I tried to make this plugin as easy and flexible to you, for example, doing:
The head stuff
-
<script type="text/javascript" src="/articles/common/js/jquery-1.2.1.pack.js"></script>
-
<script type="text/javascript" src="/articles/jqGalView/common/js/jqGalView.js"></script>
-
<script type="text/javascript">
-
$(document).ready(function(){
-
$("#example1").jqGalView();
-
});
-
</script>
The xhtml
-
<ul id="example1" title="My Gallery">
-
</ul>
Will produce the following, with styling and more images of course
The Small Print
So you see, it is pretty simple to take your list/group of images and turn it into a nice photo gallery with some styles. In this instance, it is taking the images you have in a unordered list, but you are not limited to that at all. You can do a table:
It can just be a div:
In our first example you see that I am using an image wrapped in A tag, this is the default setting where you don't need to do anything other then $('#mygallery').jqGalView(); (ok, it may be a good idea to style things). Check out the Option tab to see a list of parameters that can be used to further customize your Web Album/Photo gallery and check out some more demos under, you guessed it, Demo.
The Demo(s)
The below implementation...
-
<script type="text/javascript">
-
$(document).ready(function(){
-
$("#example2").jqGalView({
-
modal:true,
-
title:"This is a new title",
-
openTxt:"Open me!!!!",
-
backTxt:"Go back to the thumbnails",
-
goFullSizeTxt:"Bigger Image",
-
tnease:"backinout"
-
});
-
});
-
</script>
will produce below
Downloads
Download zip with demo and styles: http://bs-jquery-plugins.googl.....ew.2.1.zip
The jQuery core is available at: http://code.google.com/p/jqueryjs/downloads/list.
The jQuery Easing Plugin v1.1.1 is available at: http://gsgd.co.uk/sandbox/jquery.easing.php.
The jQuery jqModal Plugin v2007.08.17 +r11 is available at: http://dev.iceburg.net/jquery/jqModal/.
1. Julius