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

Managed to fix this by making the panel display open by default thus not creating the gallery in a div with the display style set to none. Thanks for your help.

Really weird, as you can see i've added what you suggested but still no joy.

JB: Try:

JavaScript:
  1. $('#CollapsiblePanel2')
  2. .click(function(){
  3.     $('#gvIIID0 img').click();
  4. });

I just ran that against your site and it seems to work, let me know if that is the case?

Hi Benjamin

Thanks for the lightning quick response. I have tried that but to no avail. Any other ideas?
Thanks again.

Someone had a similar problem when dealing with the accordion and seems to have something to do with display:none: in those plugins. The fix I suggested and what seemed to work was this:

JavaScript:
  1. $('#CollapsiblePanel2 .CollapsiblePanelContent')
  2. .change(function(){
  3.     $('#gvIIID0 img').click();
  4. });

Let me know if that works.

Hi Benjamin
You've done some great work with jQuery. I have a problem with this gallery though. It does not show an image when I embed the gallery in a Spry collapseable panel. See http://linux.webme.co.uk/catash/.
There is a folding panel halfway down with your gallery in it, however the first image is not displayed by default.
Any ideas?
Thanks in advance.

Thanks so much, that fixed it.

Robert,
Give the gallery UL a an ID and then change the selector call, eg.

HTML:
  1. <ul id="gallery">
  2.     <li><img src="http://media.primetimesolutions.net/products/SPONGE5-MC12/images/SPONGE5-MC12.thumb.jpg" alt="Microfiber Sponge" border="0"/></li>

JavaScript:
  1. $('#gallery').jqGalViewII({getUrlBy:2, prefix:'.thumb'});

Hello,

I was wondering if you could help me, it appears your plugin and another jquery plugin im using called tabs are not playing nice together. I was wondering if you could take a look at it.

http://media.primetimesolution...../tabs.html

Thanks

actually I spoke too soon again. I got it! Great stuff, working like a charm now!

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