CSS thumbnail gallery

liunx

Guest
Hey there all...I'm building a website for a friend and want to create a thumbnail gallery to showcase his work...any ideas of how to start?<br /><br />It will look like this:<br />Click to view attachment<br /><br />Thumbnails target="_blank">The Thumbnails at Right version<br /><br />But I can't quite get it to work the way I want it...it loads the large image OK but when you click target="_blank">so far...not so good...<!--content-->
Here's a couple of javascripts that may help...<br /><br />http://www.javascriptkit.com/script/script2/multishow.shtml<br />http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm<!--content-->
thanks, but I'd rather not use javascript.<!--content-->
looking really nice there Eskymo.. as for fixing it i don't know... i would of thought the style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" /><!--content-->
no problem - looking for a better solution...trying to have an unordered list for the thumbs and target="_blank">on css play<br /><br />and might use this, but for some reason style="vertical-align:middle" emoid=":crazy:" border="0" alt="crazy.gif" /> <!-- m --><a class="postlink" href="http://www.huddletogether.com/projects/lightbox/">http://www.huddletogether.com/projects/lightbox/</a><!-- m --><!--content-->
nah - I want stuff to happen style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" /><!--content-->
never is, is it!<br /><br />I might resort to using javascript...<!--content-->
very true.. it is down in the web designer history book that when you think of a new project (or try to help someone) everything suddenly goes wrong... <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/biggrin.gif" style="vertical-align:middle" emoid=":D" border="0" alt="biggrin.gif" /><!--content-->
<!--quoteo(post=17805:date=Nov 28 2007, 19:05:name=Eskymo)--><div class='quotetop'>QUOTE(Eskymo @ Nov 28 2007, 19:05) <img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->nah - I want stuff to happen style="vertical-align:middle" emoid=":p" border="0" alt="tongue.gif" /><!--content-->
no worries.. just have to find something else <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" /><!--content-->
eskymo - height and width are not really a problem, as you can style the surrounding <a> element to auto-center the image.<!--content-->
The target="_blank">http://www.richardlyon.co.uk/cssgallery<br /><br />hope this helps ... death to the unbelievers! <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/wink.gif" style="vertical-align:middle" emoid=";)" border="0" alt="wink.gif" /><br /><br />btw, I got all the images off deviantart, and I used a teeny bit of extra CSS to center the images in FF.<!--content-->
is it possible to have all the images the same width, but have the height change...as that's what I've got at the moment...so the box that contains the images will change height depending target="_blank">see here<br /><br />I took out the 400px height and also the max-height...<!--content-->
<!--quoteo--><div class='quotetop'>QUOTE</div><div class='quotemain'><!--quotec-->nope - doesn't work... see here<!--QuoteEnd--></div><!--QuoteEEnd--><br /><br />yep... that is quite broke <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" /><!--content-->
maybe I made the wrong adjustments - it was late. I'm going to have another look at this later today...also need to check that it works style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" /><!--content-->
<!--quoteo(post=17846:date=Nov 28 2007, 22:36:name=php_penguin)--><div class='quotetop'>QUOTE(php_penguin @ Nov 28 2007, 22:36) <img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->well here it is: <!-- m --><a class="postlink" href="http://www.richardlyon.co.uk/cssgallery">http://www.richardlyon.co.uk/cssgallery</a><!-- m --><br />hope this helps ... death to the unbelievers! <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/wink.gif" style="vertical-align:middle" emoid=";)" border="0" alt="wink.gif" /><!--QuoteEnd--></div><!--QuoteEEnd--><br /><br />I like your style... but you're using the full size images for thumbnails which is kinda cheating really <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/biggrin.gif" style="vertical-align:middle" emoid=":D" border="0" alt="biggrin.gif" /> <br /><br /><br />Mind you, you could use something like phpthumb to generate some real thumbs???<!--content-->
Coing a bit late to this little party, so apologies if some has already pitched in with this target="_blank">Scooch or iCant. <br /><br /> <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/biggrin.gif" style="vertical-align:middle" emoid=":D" border="0" alt="biggrin.gif" /><!--content-->
thanks for the reply - never heard of Scooch but from a quick look - that might just do the trick...I particularly like the fact that it has a PHP backup if javascript isn't running...which is handy.<br /><br />iCant - looks a bit too complicated + too much text to read through at this moment in time.<br /><br />Will get back to you if I have success or failure.<br /><br />thanks tons!!! <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/good.gif" style="vertical-align:middle" emoid=":good:" border="0" alt="good.gif" /><!--content-->
scooch is great - but it's not very customisable - e.g. you can><img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->yeah I understand the way lightbox works - but I don't want any sort of popup or overlay happening. I want the image to appear style="vertical-align:middle" emoid=";)" border="0" alt="wink.gif" /> )<!--content-->
now that's something i didn't i know...<!--content-->
 
Top