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

Yeah, of course !

http://www.75only.com/dent/locaux.php

@Gary do have a url I can take a look at?

@HUgo some question goes for you, any url?

[...] 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 Ben !

First, congrats for your plugin, it's really impressive ! However, I'm having a problem when I try to load a pic in the holder. Nothing appears in the small preview, but the link works and displays the pic in the imgContainer...
My HTML code is:

Do you have an idea of what's wrong ?

Thanks !

Hiya Ben!

great plugin, many thanks for the good job (and for sharing your family pics with us).

I'm using the jquery gall viewer II which style I've modified but cannot get to show the captions; am i missing something?

Your help will be appreciated.

Best regards,

h.

@florin check out http://www.codelifter.com/main.....lick1.html

But keep in mind that it only prevents right clicks, it does not prevent "save" or view the source other ways.

Hi,

Very good library.
However I am trying to not allow the user to right click on the image ( for Copyright protection).
Does anyone know how to achieve that?

Thanks,
Florin

Okay...so here's something weird. I tried what you said--I set up the second gallery with two brand-new images--and when I loaded the page locally on my computer, the same problem occurred. Then, just now when I uploaded the page to my site so I could show you, it loaded just fine.

No clue why that would be the case, but as long as it works when it's on the site, that's all that matters, I guess! Anyway, thank you very much for the tip and THANK YOU for the wonderful image gallery--I'll credit you in the code!

Sarah, I think the issue is that the big image is being preloaded so when you are trying to preload two images that are exactly the same at the same time the browser will adjust its load and only load the one. Which will stop the code that needs to execute. Try swapping the first image in the second with a different image and see if that helps.

Hi Ben, fantastic gallery! I'm working on a site where I'm trying to put two of these on the same page. I managed to do so on the test page (here: http://www.thedecklededge.com/.....llery.html ) but in the second gallery, I only get the "loading" graphic until I actually click on one of the images. Can you help?

(You'll notice that both galleries have the same images--that will change, obviously, once I figure out the technical issues!)

Again, this is an excellent script--very easy to use, even though I'm totally new to jQuery and not a writer of javascript. Thanks!!

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