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)”

Excellent coding, it makes things sooo much easier! I'm using the plugin to build out a catalog site for a friend and, being a complete hack at javascript, I need a little assistance. i've got everything they want working except this: the client would like the small images to click thru to a new page and I'm having trouble getting that to work. I'm using method 2 with the fullPath option, so the is open, but no matter what I put in there, nothing clicks thru. What am I doing wrong?

Cheers,
Ed

L.S.,

When using the thickbox iframe, and your demo page as it's src, jgGalViewII doesn't work in IE7 and ff2.0 as well.
using a regular iframe there's no problem at all. I would like to combine the beauty of both... but how...?

[...] FancyBox jQuery Multimedia Portfolio jQuery Image Strip jQuery slideViewer jQuery jqGalScroll 2.0 jQuery - jqGalViewII jQuery - jqGalViewIII jQuery Photo Slider jQuery Thumbs - easily create thumbnails jQuery jQIR [...]

@Adam Looks like you are using the PhotoXhibit plugin, would you mind posting your comment/question at http://benjaminsterling.com/photoxhibit/ and I can explain better what is going on.

@Hermit: as it stands now, there is nothing built in that will make it a automated show. If you want to delete a picture, just remove it from the html.

How to delete a picture?

how can i do this function:
forward
next one
to control the picture show

Hi quick question: i'm using jQuery Gallery Viewer II, love it. However, when viewing an entire category or works by an author, the gallery does not display, it only displays when viewing that specific post. I hope that makes sense, here's an example: http://somedaymap.com/author/test1 - 2 of those posts have Galleries, but you would not know that unless you clicked on those posts (s u b l i m i s & gallery)

Thanks in advance for any help.

Steven, guess it was too quick of a response, I was not thinking. Remove the following pieces of code:

JavaScript:
  1. var largeImage = new Image();
  2. largeImage.onload = function(){
  3.     largeImage.onload = null;

and:

JavaScript:
  1. }// end : largeImage.onload
  2. largeImage.src = tmpimage.altImg;

Hmm, thanks for the quick reply. That seemed to remove too much functionality. On FF2.0 and IE7.0 when I comment out those lines it removes all the large images (when I click the thumbnails nothing happens). My desired result would be to click the thumbnail, bring up a loading icon until the large image loads, then display the large image.

Steven, I actually meant to put a switch in for that, I can comment out lines 136 to 161:

JavaScript:
  1. //start
  2. /*
  3. var largeImage = new Image();
  4. //end
  5. largeImage.src = tmpimage.altImg;
  6. */

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. 1.053 seconds. Powered by WordPress visitor stats