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: « 1312 11 10 9 8 [7] 6 5 4 3 21 » Show All

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

ah, I got it. nevermind. little tricky, but I got it (my main concern was getting it to work in ie6) but now I have a NEW question.

I want to make an unordered list of links on this site too. I'm only assuming another UL will trigger the javascript. Is there anyway to make it specify a certain UL? If not I'm assuming I'll have to do it the other method and if that's so, is there somewhere here on the page (or in the js) that talks about what code to put in.

Thanks for putting up with me. If I can get this to work for my site, I'll make sure donations are in order!

I may get this by the time you respond (that is if I've not driven your crazy already!) but I'm still having trouble with the icons lining up horizontally with the image.

okay I can get: gvIIHolder to line up against the div I'd like it in. but I can't get gvIIImgContainer to play nice. The only way I can get them side by side is to float the thumbs left and the image right...and it does work but then it puts this big giant gaping gutter inbetween them.

I'm not a css master, so I'm probably just missing a simple string of code to put in. But I've been hammering at this for hours and can't get it. I did finally have it once but then it didn't work in IE6 (the thumbs wouldn't display).

Any chance you can help me close that gab inbetween the thumbs (to the left) and the image (flush next to it).

thanks man, I really appreciate your time! It's awesome at what it does, it's just styling it which has been a challenge!

ah. thank you very much. I got it.

I was originally going to use the _small, but I liked the way you did it better with the .small so i will be using that instead.

scott: the image is centered in the '.gvIIImgContainer' div. So if you have it set to 500 x 500 and your image is 400 x 400 it will be centered by default and this is done in the code. I would suggest that you change the width and it will adjust accordingly.

Robert: That is looking real nice. The reason I used the period to split was I was going with the assumption that you were going to do something like image_small.jpg or something to that effect.

The ?imgmax=800 is to fix issues when bringing in an image from Picasa. So, no, you don't need it.

also, I can't seem to get all that space between the thumbs and the picture. what is causing so much space?

ah ha, I got it with a bit more trial and error. But I can't get the img to not be centered in the middle and go to the top. Any idea how to get this to work?

Well I pretty much got it, here is the code:

CODE:
  1. el.image.unbind('click').click(function(){
  2.      var src = $(this).attr('src').split('.');
  3.      var newsrc = src[0] + '.' + src[1] + '.' + src[2] + '.large.' + src[3];
  4.      tb_show('Hello', newsrc); // This calls Thickbox
  5. });

Any idea on how to make the newsrc work correctly, or any shorter that what i had to use. Also what is "?imgmax=800" and do i need it.

Thanks

hey thanks for your help again (man, you're quick).

okay I sort of "have it" but there are a few things.

1. I can't get the thumbnails to float left of the img. I looked in the js and I think it has something to do with the being before the I tried swapping them in the js but that didn't work.

2. I have divs set up on my site already, anyway I can put the thumbnails on one and the image in another ?

Pages: « 1312 11 10 9 8 [7] 6 5 4 3 21 » 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.523 seconds. Powered by WordPress visitor stats