Skip to content Skip to tags Skip to twitter news Skip to blog roll Skip to categories Skip to archives Skip to recent posts

October 2, 2007

jQuery: jqGalViewII (Photo Gallery)

This is the jQuery Gallery View II plugin (jqGalViewII) which takes a list of your images and creates an easily styles photo gallery. This plugin will preload all of your larger images for faster viewing.

The Head

JavaScript:
  1. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
  2. <script type="text/javascript" src="common/js/jqGalViewII.pack.js"></script>
  3. <script type="text/javascript">
  4. $(document).ready(function(){
  5.     $('#demo').jqGalViewII();
  6. });
  7. </script>

HTML:
  1. <style type="text/css" media="screen">
  2. <!--
  3. @import url("common/css/jqGalViewII.css");
  4. -->
  5. </style>

The Body

HTML:
  1. <ul title="My Gallery">
  2.     <li><a href="http://lh6.google.com/sterling.benjamin/RuyW_7tKn8I/AAAAAAAAAVc/opzOXldgJ0Y/DSC_0001.JPG?imgmax=800"><img src="http://lh6.google.com/sterling.benjamin/RuyW_7tKn8I/AAAAAAAAAVc/opzOXldgJ0Y/s72/DSC_0001.JPG" alt="Yes, I do know what I am doing!" width="72" height="48" border="0"/></a></li>
  3.     <li><a href="http://lh5.google.com/sterling.benjamin/RuyYPrtKn9I/AAAAAAAAAWE/Y1kITpSTFXI/DSC_0025.JPG?imgmax=800"><img src="http://lh5.google.com/sterling.benjamin/RuyYPrtKn9I/AAAAAAAAAWE/Y1kITpSTFXI/s72/DSC_0025.JPG" alt="Hey, it is better then reversible diapers!" width="72" height="48" border="0"/></a></li>
  4.     <li><a href="http://lh4.google.com/sterling.benjamin/RuyZObtKoAI/AAAAAAAAAWc/dDMbJK0jSlw/DSC_0004.JPG?imgmax=800"><img src="http://lh4.google.com/sterling.benjamin/RuyZObtKoAI/AAAAAAAAAWc/dDMbJK0jSlw/s72/DSC_0004.JPG" border="0"/></a></li>
  5.     <li><a href="http://lh6.google.com/sterling.benjamin/RuyZa7tKoBI/AAAAAAAAAWo/dmnMNJS2nPI/DSC_0005.JPG?imgmax=800"><img src="http://lh6.google.com/sterling.benjamin/RuyZa7tKoBI/AAAAAAAAAWo/dmnMNJS2nPI/s72/DSC_0005.JPG" border="0"/></a></li>
  6.     <li><a href="http://lh3.google.com/sterling.benjamin/RuyZnLtKoCI/AAAAAAAAAWw/1TD-_nNT8PA/DSC_0006.JPG?imgmax=800"><img src="http://lh3.google.com/sterling.benjamin/RuyZnLtKoCI/AAAAAAAAAWw/1TD-_nNT8PA/s72/DSC_0006.JPG" width="72" height="48" border="0"/></a></li>
  7. </ul>

And that would produce the following:

  • Yes, I do know what I am doing!
  • Hey, it is better then reversible diapers!
  • Is he going to eat me?!
  • It's like talking to a wall!!!
  • This is my seductive look! It works on all the boys.
  • You won't like me when I'm angry!
  • It is out of focus; let me help.
  • I always have to carry the conversation; they never say anything.
  • I SAID CLOSER!!!
  • I think I may be getting the upper hand here...
  • I'm being attacked and your taking pictures?
  • Yes, I do know what I am doing!
  • Hey, it is better then reversible diapers!
  • Is he going to eat me?!
  • It's like talking to a wall!!!
  • This is my seductive look! It works on all the boys.
  • You won't like me when I'm angry!
  • It is out of focus; let me help.
  • I always have to carry the conversation; they never say anything.
  • I SAID CLOSER!!!
  • What way is this supposed to go?
  • I think I may be getting the upper hand here...
  • I'm being attacked and your taking pictures?

The Downloads

Download zip with demo and styles: http://bs-jquery-plugins.googl.....II.1.0.zip
The jQuery core is available at: http://code.google.com/p/jqueryjs/downloads/list.



Pages: « 13 12 [11] 10 9 8 7 6 5 4 31 » Show All

121 Responses to “jQuery: jqGalViewII (Photo Gallery)”

[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery Photo Slider. jQuery Thumbs - easily create thumbnails. jQuery jQIR [...]

[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery Photo Slider. jQuery Thumbs - easily create thumbnails. jQuery jQIR [...]

hi benjamin!

first of all thank you for this great plugin, works like a charm for me.
the only thing i'd love to change is the odd distortion of the image when switching from portrait to wide photographs.
i looked at your view function and thought about re-ordering things or maybe loading the new image into another variable and then display it rather than changing the src attribute of the original image and changing the dimensions in the onload event - maybe you already have a solution at hand ...

anyways - many thanks for making this magnificient plugin!

I would like to use this fantastic plugin to edit a gallery and I would like to:
- add dynamically images from jquery to the gallery;
- removing them dynamically;
- add menu option on the thumbs picture.

What I would like to know if there is a way to add and remove dynamically images?

Thanks
Makkina

[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery Photo Slider. jQuery Thumbs - easily create thumbnails. jQuery jQIR [...]

Sure thing! Unfortunately, the client hasn't provided me with all of the proper images, but I'll try to explain despite that. In a nutshell, each thumbnail image would represent a separate item in the catalog and, the goal is, clicking on a particular thumbnail would bring the user to the page for that item. For example, an image of the shirt with the koi design, when clicked, would bring up the /womens/koi.html page, where the user could choose a size/color, etc. Change allw.html to koi.html to see what I mean.

I'm just unable to get the click event on the thumbnails to do anything. Does that make more sense?

@Edgar I looked at your code and I am not sure which what the best approach is, can you elaborate on what you are trying to do.

Hi,

Great plugin, first off! I'm trying to use it to implement a navigational catalog for a site I'm helping to build, but I can't get the thumbnails to click through to a new page. I've tried mucking with the javascript a bit, and even tried writing new functions with jQuery but no luck.

It seems like all the a tags within the jqGalViewII div are disabled. Is there something I can disable or change to allow the thumbnails to be clicked and navigate to the appropriate page on the site?

Hi Benjamin,

It seems the gallery doesn't work in Safari 3.1 (525.13) on a Windows Vista system.
The main image doesn't appear. All I shortly see is the loader image.

It works fine in Firefox 2.0.0.14 and IE7.

In Opera 9.27 it's capricious.

Any suggestions would be greatly appreciated.

DOH! Not enough sleep, left a tag open in the last post, sorry. =[

Pages: « 13 12 [11] 10 9 8 7 6 5 4 31 » Show All

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

RSS Feed Link

42 queries. 0.953 seconds. Powered by WordPress visitor stats