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

benjaminsterling.com

October 2, 2007

jQuery: jqGalViewII (Photo Gallery)

by Benjamin Sterling in Flash Alternatives, Javascript, Photogallery, jQuery, jQuery Plugin on October 2, 2007 @ 11:31 pm

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

PLAIN TEXT
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>

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

The Body

PLAIN TEXT
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.



Tags: , , , , , , ,

Pages: « 13 … 11 10 9 8 7 6 5 4 [3] 2 1 » Show All

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

Hi Benjamin

Thanks very much for getting back to me - you've been incredibly helpful :)

I tried what you suggested with the alt tag code on another site I am implementing your gallery, see here for work in progress:

http://www.riverbankdesign.co......ion_01.htm

and it works fine in IE7, but in Firefox, it's pushing everything over to the right - do you have any ideas please? (There is some ropey CSS in here actually - I made the site originally quite a while ago, when I didn't know what I was doing as much!)

thanks

Cath

November 28th, 2007 at 4:19 am | Link

Johan,
Thanks for the nice words.

Yes, something like that is in the works, sadly it has just been too busy to get to any of my plugins.

If I am understanding you correctly, you can do what I posted in comment 156. I have not been able to test it, but there is no reason for it not to work.

Now, if you are talking about a "tooltip" type of thing when you mouse over the thumbnail, that also is on my "nice to get done" list, but I have not put any thought into it. But you can do something like:

PLAIN TEXT
JavaScript:
  1. //about line 121
  2. // after $('<div class="gvIIFlash">').appendTo($div).css({opacity:".01"})
  3. $('<div class="gvIITEXT">').appendTo($div).text($image.attr('alt')).mouseover(function(){
  4. // put code to make a tooltip
  5. });

That is untested, but should point you in the right direction.

Can you let me know if you try and and if you get it to work?

November 27th, 2007 at 9:14 pm | Link

Hi,
thanks for this pretty gallery. Very nice, and simple to plugin to my page:) ...I saw that someone else asked about displaying title or alt when hovering over the image - maybe this is a related question: I'm using your gallery to make a display of photos on a clothes designers website. The photos to display, have to be credited, but are by different photographers.

My question is this, do you think it's possible to change an accompanying text (taken from the title?) with the changing of each photo? ...Is this a functionality you'd consider adding anyway, or do you go only for more simple functionality?

:) johan

November 27th, 2007 at 8:12 pm | Link

Cath,
That is looking great, very impressive and clean.

You can using your alt attributes and do something like(untested):

PLAIN TEXT
JavaScript:
  1. // after el.loader = $('<div class="gvIILoader"/>').appendTo(el.mainImgContainer); put:
  2. el.altTextBox = $('<div class="gvIIAltText"/>').appendTo(el.mainImgContainer);
  3.  
  4. // change el.loader.fadeOut('fast',function(){el.image.fadeIn();}); to:
  5. el.loader.fadeOut('fast',function(){
  6.      el.image.fadeIn();
  7.      el.altTextBox.text(img.altTxt).fadeIn();
  8. });

You will need to add styles for .gvIIAltText but that should do it.

November 26th, 2007 at 10:25 pm | Link

Hi Benjamin

I've put the gallery live here: http://www.vanillarose.co.uk/gallery.htm and it's working perfectly :)

I've had to fudge one thing though (after trying many different alternatives - none of which worked!) and that's to display some text at the same time as an image. I got around it by putting text directly onto some of the jpgs, but it would be great to display a caption for each within the code. do you reckon this is remotely possible? I have tried putting in tags everywhere within the s, but to no avail..

Cheers

Cath

November 26th, 2007 at 1:22 pm | Link

Mike, that site is look real nice. Good job!

November 14th, 2007 at 11:56 am | Link

Ben, thanks for the update! It works well now in IE7/6. BTW, if you want to see it in action you can head over to http://fsbo.wittmania.com to see the "dummy" site I've got it running on. One thing you'll see is that it displays on the front page, but I used a separate jQuery script to show the full sized images from the list instead of the thumbnails. Yeah, I know I could have put the list together and called the plugin differently, but this way works really well with the default WordPress upload/send to editor functionality. Anyway, it works even if it isn't the most elegant way to do it!

Thanks again!

November 13th, 2007 at 11:07 pm | Link

Cath/Kris/Mike,
Thanks for the patience. I finally figured out what was going wrong, I wish I could explain the problem, but I know my limitations.

Please download the updated js file and let me know how that works out for you. And by all mean, post up your urls so I can build up my ego :).

November 13th, 2007 at 10:37 pm | Link

Scratch the border problem... I think I just messed something up in the CSS because it's gone now...

November 13th, 2007 at 1:03 am | Link

Pages: « 13 … 11 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

Top Posts for Today

  • No posts viewed yet.

Overall Top Posts

Badges/Networking

  • StumbleUpon
  • Technorati Fav
  • View Benjamin Sterling's profile on LinkedIn
  • Digg!
  • TwitterCounter for @bmsterling
More Info

42 queries. 1.206 seconds. Powered by WordPress visitor stats