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: « 1311 10 9 8 7 6 [5] 4 3 2 1 » Show All

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

Thanks Ponger, I will have to take a look at that; you could be right, that whole logic never made me comfortable.

@Sam Ti, Can you post your other comments here? I will post a reply a little later today after I had a change to look at things.

Hello,
Very nice plugin, but I think there is a little bug in jqGalViewII.js:
178: if ($h > wContainer) {
and the correct code is:
178: if ($h > hContainer) {

I wanted to use alt attribute for a small texte that comment the image and title attribute for the title.

I solve this that way : (see #comment-156 above)

PHP:
  1. // after el.loader = $('').appendTo(el.mainImgContainer); put:
  2.       el.titleTextBox = $('').appendTo(el.mainImgContainer);
  3.       el.altTextBox = $('').appendTo(el.mainImgContainer);
  4.  
  5.       // change el.loader.fadeOut('fast',function(){el.image.fadeIn();}); to:
  6.       el.loader.fadeOut('fast',function(){
  7.            el.image.fadeIn();
  8.            el.titleTextBox.text(img.title).fadeIn();
  9.            el.altTextBox.text(img.altTxt).fadeIn();
  10.       });

Hope this could help.

Samti, Glad you are liking the plugin, not sure what you mean by "legend" but take a look at comment 156, I posted code there to get a title up and running. I am hoping to have time in the coming month to implement it myself, but don't know when exactly.

Can you elaborate a bit on what you mean by "legend?"

Hi Benjamin,

I'm trying your jqGalViewII and it perfectly works on my project. Thank to share it.
Just ...

How can I display a title and a legend with each large images ? Is there a way to do this in your plug-in ?

Thank again

Anna,
I am glad you are finding it useful.

Hello Benjamin,

Thank you for your quick response - and I really don't find your documentation lacking, I simply implemented this method wrong when first trying it. :(

When I got a clue and added a trailing slash to 'fullPath/to/fullsize/folder', all worked wonderfully.

This plugin is much appreciated, Benjamin. Thank you:)

@Anna: Yes and no, but let me explain. I never got around to posting good instructions for this plugin, so it is understandable if you don't understand.

If you want to be able to just do $('ul').jqGalViewII();, then yes, the images need to be wrapped in a link and the plugin will get the larger images URL from that link.

If you want to be able to create a folder structure that has all you large images in one, we'll call it "large" and all your thumbnails images in the other, we'll call the "small," then the answer is no you don't need to wrap the images in a A tag, but you will need to something like below:

JavaScript:
  1. $('#gallery').jqGalViewII({getUrlBy:1,fullSizePath:'fullPath/to/fullsize/folder'});

The above code will take your thumbnail image, which will be the same name as the large size image, and just change the page to match "fullSizePath." So if I have "images/tn/myImage.jpg" and you set the "fullSizePath" to "image/full" the plugin will build a path "image/full/myImage.jpg."

My goal this holiday season was to update all my docs, but work has been much busier than in recent years. I will try to get this updated to help you out better. But feel free to post anymore questions.

Hello Benjamin,

I'm not clear on your sample

CODE:
  1. HTML:
  2.  
  3.    1.

Do the images placed in the div not need to also be links?

Sure, its benjamin.sterling [at] kenzomedia [dot] com, just replace the [at] and the [dot].

Pages: « 1311 10 9 8 7 6 [5] 4 3 2 1 » 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.997 seconds. Powered by WordPress visitor stats