Lightweight Image Gallery with Thumbnails

312 comments so far | Add yours

img { width: 80px; height: auto; }

312 Responses so far. Add yours.

At 7:26 pm on June 15th, 2007 , Wolf wrote:

Nice work man… I might use this one day.

At 10:27 pm on June 15th, 2007 , David Hellsing (author) wrote:

Thanks wolf. I realize now that you should probably add a loading animation, since it could take some time to load the images depending on image sizes and connection speeds.

At 5:35 pm on June 17th, 2007 , Markus wrote:

Real nice, it’s really useful. I played around with it a bit, even toyed around with using Lightbox at the same time. Worked real nice.

At 11:51 am on June 19th, 2007 , mahesh wrote:

hi this is really great script i am planning to use it somewhere. thank you very much for help.

At 3:13 pm on June 20th, 2007 , Squawk wrote:

Looks like a really nice script. In fact I have been trying something similar but utterly failed, since I am a javascript noob. Bytheway, It also works in the Safari 3 Beta. Thanks.

At 7:21 am on July 6th, 2007 , Eric P wrote:

Nice, very nice.

At 6:17 pm on July 8th, 2007 , Evert Harmeling wrote:

My respect, was thinking of making something like this on my own. With the idea of scaling the image to the full space there’s available on the page. So that whatever resolution your watching the site, the image is to be seen at it’s fullest.

I really love the way you used the this clean manner, using the technologies where they were made for. Taking the best things out of every language! Great work sharing this, my compliments!

At 7:26 pm on July 8th, 2007 , benc wrote:

yo.
very cool gallery
bravo

At 4:13 pm on July 9th, 2007 , chris wrote:

Very nice work Mr. Hellsing. I’ll be making use of this solution. My Thanks!

At 3:31 pm on July 10th, 2007 , Tucker wrote:

Nice Gallery solution I’ll have a play around with it and see how it goes

cheers

At 6:20 pm on July 10th, 2007 , Jerram wrote:

Very, very nice… and SO easy to implement! I’ll be using this for sure!! Thanks for sharing.

At 9:25 pm on July 10th, 2007 , David Hellsing (author) wrote:

@all: thank you all for your input and praise. If you find this gallery useful, let me know if you are using it in real world projects. Thanks again!

At 9:51 pm on July 10th, 2007 , Jerram wrote:

How about the ability to display a text description along with each picture. Can that be pulled from the ‘alt’ text? Not being too adept at this, I’m not sure…

At 9:58 pm on July 10th, 2007 , David Hellsing (author) wrote:

@Jerram: that’s not a bad idea at all. I’ll take that challange if nobody does it before me!

At 2:35 am on July 11th, 2007 , Aria Rajasa wrote:

Just what I was looking for! thx mate.. Been searching for a simple gallery to show not that much of photos for a while. I found a lot of flickr embeded gallery though, which is not very useful for my requirements :p

At 9:22 am on July 19th, 2007 , Erik wrote:

This is a very simple yet functional design - well done, however I am finding that the absolute positioning of the img does not work so well on a centered site…ideas?

At 11:02 am on July 19th, 2007 , David Hellsing (author) wrote:

@Erik: an element’s absolute position is relative to it’s first parent who has a relative position. So by adding position: relative to your centered container, you should get it right.

At 4:24 pm on July 19th, 2007 , Erik wrote:

Thanks!

At 2:32 am on July 21st, 2007 , Chris wrote:

Hello Together

I am not so good in JS, but its a good script
I wanna exclude only the Thumbnail Function. Can anybody help me?

I change the active classes and it doesn’t display the big pictures BUT i can’t make a link on the Thumbnail Pictures. WHY?

(sorry for my bad englisch ;))

At 4:49 am on July 23rd, 2007 , DAP wrote:

Hello!

Man, you’re awsome!
Just I needed something like this.

Thank you! =D

Greetings!

At 2:26 pm on July 23rd, 2007 , Michael wrote:

Hello

Thanks for the code it works like a perfect except the javascript has made a problem with the flash on the page please advice how I can fix it.

Thanks

At 2:21 pm on July 27th, 2007 , Nick Tabram wrote:

Excellent script. I have modified it slightly, substituting this line:
li[i].style.backgroundImage = ‘url(’ + li[i].getElementsByTagName(’img’)[0].src + ‘)’;
For this:
li[i].style.backgroundImage = ‘url(image-’ + [i] + ‘.jpg)’
So that it displays a thumbnail of my choosing, rather than just displaying a very small portion of the main image.
Thanks for making this available.

At 4:57 am on July 30th, 2007 , Dylan G wrote:

Great script!

Question though, lets say I wanted to display text to the right of the big image when I click on the thumbnail. Like, it would be a description of the picture. How would I do that?

At 5:58 pm on July 31st, 2007 , hiral wrote:

nice work…liked it very much. keep it up!!!

At 8:21 pm on August 7th, 2007 , Serdar wrote:

thank you so much for this beatiful album

At 9:26 pm on August 9th, 2007 , hannahmac wrote:

hi david, I was just wondering if you were able to add a little comment/text under each of the images when they are displayed? I think a couple of people above have asked something similar, so sorry to repeat. I’m an absolute js novice, but your explaination has certainly got me started, so thank for that! Cheers Hannah

At 7:14 pm on August 11th, 2007 , Nemo wrote:

I likewise was wondering if it was possible to have a caption under each of the photos when they are displayed. Other than that, it’s a brilliant gallery design.

At 6:46 am on August 14th, 2007 , eleanor moseman wrote:

At 2:21 pm on July 27th, 2007 , Nick Tabram wrote:
Excellent script. I have modified it slightly, substituting this line:
li[i].style.backgroundImage = ‘url(’ + li[i].getElementsByTagName(’img’)[0].src + ‘)’;

For this:
li[i].style.backgroundImage = ‘url(image-’ + [i] + ‘.jpg)’

So that it displays a thumbnail of my choosing, rather than just displaying a very small portion of the main image.
[end quote]

I can’t get this to work. I have tried changing things around, so MANY times. Can someone please assist me on getting my own thumbnails viewed or where to place:

img { width: 80px; height: auto; }
(i can’t get that to work for the life of me)

I have used a variety of slideshows, from Lightbox to Flash, and this really is a great Gallery. Simple, straightforward, concise - with a little bell and whistle.
Thanks!

At 11:06 am on August 20th, 2007 , max wrote:

how do you get it to clone the image tag so you can resize the thumbnails?

At 10:07 pm on August 20th, 2007 , Ryan wrote:

This is great!

How can I get the thumbs to display inline? I thought this would be a simple change, but it has been quite challenging.

Any help would be greatly appreciated.

Thanks!

At 10:33 pm on September 10th, 2007 , michael wrote:

Hi David,
Just found your gallery. Excellent work. Thanks for sharing it.

I’d like to join in with the people who are asking for caption ability. That would make it even more useful

At 3:49 pm on September 17th, 2007 , Joel wrote:

At 10:07 pm on August 20th, 2007 , Ryan wrote:

This is great!

How can I get the thumbs to display inline? I thought this would be a simple change, but it has been quite challenging.

Any help would be greatly appreciated.

Thanks!

Ryan, the thumbs are already inline, they’re just being being forced vertical by the width of the parent container. Increase the width of #jgal.

At 4:38 pm on September 21st, 2007 , Marc wrote:

Hi, excellent and easy to use script! Thank you.
Is it possible to use “real” thumbnails, whose filenames always end with “_thumb.jpg”?
The script would have to eliminate the “_thumb” in oder to view the correct background-image.

Thanks (and excuse my English!)

At 4:08 am on October 18th, 2007 , Brian Swope wrote:

I know extremely little about javascript, but i understand some of the coding from playing around it with. my problem, is that i’d like the larger image to load in a particular cell in a table beside the cell holding the listed thumbnails. How might I do this?

At 1:58 am on October 25th, 2007 , hapsari wrote:

thank you so much for sharing, you’re a hero!

At 4:18 am on October 25th, 2007 , Court wrote:

Hi,
I know this is going to be a bit annoying, so I apologize to begin with.

I’m working on making my first web page and hence know very little about this process, but your gallery is the only gallery I have found that has a simple enough look for my website.

However,because I am new to this, I don’t really know what to do with all of this code. I made the html into an index.htm file and the css into a style.css file, but I wasn’t sure that was correct and I certainly have no idea what to do with the java. Someone told me to embed it in the html, so I put it in the index.htm file, but that’s not really working.

If you have the time, could you tell me what I am doing wrong?

At 7:03 am on November 21st, 2007 , Mike wrote:

@Court: Check out the source code for the gallery demo linked to on this page.

At 11:28 pm on December 19th, 2007 , Erica Banks wrote:

This is a great resource. I found it easy to use. I customized it a bit. You can view it here:
http://www.banksmedia.com/portfolio

At 10:30 am on January 11th, 2008 , S. Lowery wrote:

This is a great image viewer, thanks for creating it and putting it out there for free.
I’m having a hard time using it within a container div because of the absolute positioning of the image. If the browser window is resized the layout is messed up. I’m pretty new to CSS so I’m sure I’m missing something simple but any help would be appreciated.

-S. Lowery

At 12:34 pm on January 11th, 2008 , Ivan Petrovic wrote:

Excellent work! How can I place thumbs under the Main image?
Thanks, again,…

At 9:26 pm on January 25th, 2008 , Cristi wrote:

@ Erica Banks: You should tell us how did you add the site description near to the photo. Would be a great help for people like me who would like to use a small text description (near or bellow the image). Cheers!

At 10:57 am on January 28th, 2008 , Christian wrote:

Is there a easy way to put ‘previous/next’-buttons in there so that people can also use that to browse it instead of clicking on the thumbnails?

At 10:54 pm on February 2nd, 2008 , Brian wrote:

I’m also interested in using next/prev buttons–any suggestions? I’m going to try to do it myself–I’ll post if i find a solution.

At 2:43 am on February 3rd, 2008 , Brian wrote:

let me preface this by saying i am very much a javascript novice…

i have a start of something to get next/prev button functionality.
add this after the first “gal.addEvent” statement.


gal.addEvent(a[0],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (k=0; k

and then this within the ul tag

next


this manages to go forward one thumb from the first thumb. thats it. maybe this will inspire someone who actually knows JS.

At 2:44 am on February 3rd, 2008 , Brian wrote:

oops…
and then this within the ul tag
<a href=”#”> next </a>

At 2:46 am on February 3rd, 2008 , Brian wrote:

one more time….

gal.addEvent(a[0],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (k=0; k<im.length; k++) {
if (im[k].className = 'active')
{im[k].className = ''; im[k+1].className = 'active'; return}

}
});


At 7:10 am on February 4th, 2008 , Walter wrote:

Great work.

Would you please be able to package the code into a compressed archive (.zip, .tar.gz, etc) for easier distribution?

Thanks.

At 9:55 pm on February 9th, 2008 , Steve Lawrence wrote:

This is a great bit of code, thanks for making it available.

I’ve made a small change as I’m using it in a page that fetches a list of images from a database and I want to use corresponding thumbnails that have already been created.

If you want to do the same replace the following line:

li[i].style.backgroundImage = ‘url(’ + li[i].getElementsByTagName(’img’)[0].src + ‘)’;

With this:

var url = li[i].getElementsByTagName(’img’)[0].src;
var url_array = url.split(”/”);
var j = url_array.length - 1;
var thumb_path = “{PATH TO THUMBNAIL DIRECTORY}”;
li[i].style.backgroundImage = ‘url(’ + thumb_path + url_array[j] + ‘)’;

Which simply breaks the image url down to give you just the filename and appends the supplied path in thumb_path to the filename. Just make sure you name the main image and the thumbnail the same and remember to include the trailing slash in thumb_path.

Here it is in action: http://dev.grotesklobster.co.uk/scar/product.php?id=1202321602

At 2:24 pm on February 18th, 2008 , mert wrote:

hmm

perfect

At 4:13 pm on February 18th, 2008 , Brian wrote:

I was struggling above with making next/prev buttons work with this script. But I succeeded. Here I use custom thumbnails with next/prev functionality.
http://corporatetunnellsyndrome.com/work/2007/WE%20WILL%20NEVER%20FORGET!
feel free to steal any code…

Thanks David for a really useful script. The main improvement i see would be to allow other onload scripts and flash to run on the page with it.

At 4:14 pm on February 18th, 2008 , Brian wrote:

it messed up the link. try this
http://corporatetunnellsyndrome.com/work/2006/MEN%20AT%20WORK

At 4:27 pm on February 22nd, 2008 , Raul wrote:

Hi, im a begginer with web publishing, where do i sav the coding? in seperate files? and is the file name important?

At 9:02 am on February 26th, 2008 , mr seo wrote:

thanks for this tutorial

At 6:24 am on March 13th, 2008 , David wrote:

Hello, thank you for this great gallery. I have a question, is possible to add an effect type carousel? the problem is that I have many thumbnails.

Thank you again !

At 9:17 pm on March 27th, 2008 , Kevin wrote:

Hi, I’m also a javascript newbie having only started this to setup a website for my wife! This is a very useful piece of code and many thanks to the author for making it available. I’ve made one slight mod to resolve my thumbnail requirements substituting the line:

li[i].getElementsByTagName(’img’)[0].src + ‘)’;

with

li[i].getElementsByTagName(’img’)[0].lowsrc + ‘)’;

using the lowsrc=”thumbnail location” element of the command. Hope this is of some help.

I’m developing on a Mac OSX (10.3) and I’ve tried this code with Safari 1.3.2 and Firefox 2.0.0.12 and seems to work fine. I’d be interested to understand if this works with other browsers.

At 10:56 pm on March 30th, 2008 , Christian wrote:

I have a problem with the document.write bit for hiding it while the images load.

It works, yet in IE it doesn’t re-appear when it’s fully loaded until you resize the screen. Any idea what the problem can be?

At 10:31 am on April 2nd, 2008 , Shelley wrote:

Thank you so much!! This is beyond helpful.

At 12:59 am on April 5th, 2008 , kenny wrote:

Is it possible to put multiple galleries on the same page?

Thanks!

At 4:20 am on April 8th, 2008 , Jarrett Dooley wrote:

QUOTE:

If you want to do the same replace the following line:

li[i].style.backgroundImage = ‘url(’ + li[i].getElementsByTagName(’img’)[0].src + ‘)’;

With this:

var url = li[i].getElementsByTagName(’img’)[0].src;
var url_array = url.split(”/”);
var j = url_array.length - 1;
var thumb_path = “{PATH TO THUMBNAIL DIRECTORY}”;
li[i].style.backgroundImage = ‘url(’ + thumb_path + url_array[j] + ‘)’;

Having HUGE problems doing this! I want to add the thumbnail capability as the images are pretty big and the thumbs don’t show anyhthing of the picture! HELP!

At 10:44 am on April 15th, 2008 , Danny wrote:

Thanks for putting this out there!
I’ve customised the CSS a bit on my site about our guesthouse holiday home in rural Spain: http://www.casaerizo.eu
Thanks again!

At 12:05 pm on April 23rd, 2008 , Robin wrote:

Wow! Really great work. Simple, easy, functional, looks fantastic … it’s everything I need and more. A million thanx.

At 6:07 am on April 28th, 2008 , Sarath wrote:

Thanks!!! It indeed a lightweight gallery. Very nice.

At 8:18 am on May 3rd, 2008 , Brady wrote:

Hi i love it, Im sure this is a pretty simple answer for most of you guys, I just wanted to know how i could have an animated gif, (as a loader graphic) appear until the images load, as i am going to be using some high res files for this. thanks so much. hope to hear back
Brady

At 10:19 am on May 7th, 2008 , Muay Thai wrote:

i am really like it ,it’s so interesting……….

At 5:18 am on May 21st, 2008 , Brandon wrote:

Hi, the galleria is awesome. I have a question though. Using the simple version of the gallery, what would be the best way to get the large image show up by just hovering the thumbnail?
I have tried but no luck…Can you help?

thanks.

At 8:23 am on May 21st, 2008 , David (author) wrote:

@Brandond: go post your galleria questions in the Galleria Forum

At 8:23 am on May 21st, 2008 , David (author) wrote:

…available at http://devkick.com/talk/forum/4/galleria/

At 7:29 pm on May 21st, 2008 , sohbet odaları wrote:

i’m using it on my website.

At 8:22 am on May 27th, 2008 , Landon Springer wrote:

Here’s a tip for scaling your thumbnails (rather than cropped, full-size backgrounds…):

Change these two rules in your css file:

#jgal li { opacity: .5; float:left; display: block; height:60px; width:60px; overflow:hidden; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { height:60px; width:auto; }

Make the following changes to your js file (in order):

1.) After line #5, add these two lines:

enlargedImg = document.createElement(’img’);
document.getElementById(’jgal’).parentNode.insertBefore(enlargedImg,document.getElementById(’jgal’).nextSibling);
enlargedImg.src = li[0].getElementsByTagName(’img’)[0].src;

2.) Delete the first line of the for loop (line #12 now, I believe). The line that sets the backgroundImage style…

3.) Add this after line #19:
enlargedImg.src = this.getElementsByTagName(’img’)[0].src;
________________

I hope I got everything. I tailored my file to fit my needs specifically, so I hope all the line numbers and everything work right…

Landon

At 5:50 pm on June 9th, 2008 , ilari wrote:

How can I get caption under images? This is the first time I am using javascript ever.

At 4:29 pm on June 15th, 2008 , hakan wrote:

thanks

At 11:03 pm on June 15th, 2008 , Steve wrote:

For those that were asking how to add captions to the pictures, this is what I did…

Below this line:
li[0].className = ‘active’;

I added:
var val = li[0].getElementsByTagName(’img’)[0].alt;
document.capt.caption.value = val;

And below this line:
this.className = ‘active’;

I added:
var val = this.getElementsByTagName(’img’)[0].alt;
document.capt.caption.value = val;

(Rather than writing duplicate code lines, you could create a new function and call the function - but I am lazy!)

‘document.capt.caption’ actually refers to a readonly, borderless textarea on my display page which has been positioned below the image area.

Here is what my textarea looks like:

At 9:34 pm on June 20th, 2008 , Kay wrote:

Hi - Thanks for the great Gallery!

I need to scale down the thumbnail images. Landon, can you post a link to working example? I tried your directions but not working - wrong lines in js, maybe… no way to verify.

Or anybody else with an example of scaled down thumbs I could look at?

Thanks much - K

At 9:51 am on June 21st, 2008 , Tasawwur Zahoor wrote:

What do you say about my try?
Many people complained about thumbnail
I enlagred them and problem is solved.

Click here

At 9:55 am on June 21st, 2008 , Tasawwur Zahoor wrote:

http://tasawwurz.sitesled.com/try.html

At 9:58 pm on June 21st, 2008 , Patrick wrote:

Working on improving my gallery, and this is just the ticket! Can anyone suggest a way to add a “loading” animation? I can find an animated gif online, but I’m not sure where to put it in my css/html.

Thanks,
Patrick

P.S. EXCELLENT project and great learning experience!

At 11:26 am on June 23rd, 2008 , Anke wrote:

Hi, thanks a lot for this nice and clean gallery. THe Javascript is hard for me to follow, but I can tweak the css any way I want to, and it works like a charm.
nice clear coding and perfect explanation! Thank you!

At 12:25 am on July 12th, 2008 , Dan Collins wrote:

This is just what im after,
thanks!

At 12:35 pm on July 14th, 2008 , Vlad wrote:

How do i place the thumbnails to the right and the IMG to the left.

At 4:45 pm on July 19th, 2008 , Sharad wrote:

Hi, I was looking to add Flash Animated Photo Gallery on my project, but when i saw this wonderful Javascript, why should i go back to Flash, Thanks. Really Good.

Sharad
Sr Software Engineer
Zonixsoft
sharad@zonixsoft.com

At 5:29 pm on July 19th, 2008 , Saloni wrote:

Cool. I was looking for this only to display the products in my site’s gallery

Thanx.

At 11:57 am on July 25th, 2008 , Daan de Gooijer wrote:

Can someone help me getting captions below the big image?
Thanks!

At 10:23 am on July 28th, 2008 , julieta wrote:

Hello,
How can you add caption to that script and have them show when the image opens to he right?
Thanks

At 4:39 pm on August 3rd, 2008 , Drew wrote:

I was wondering how to make it so that if the big image is clicked, a new window could come up to view a high res.

(for exemple: My gallery is located inside a table, so I had to make my big image small enough to fit. It would be cool if they coul click it to get a new window with a larger version)

But where do I put the link in the code? I will admit, I am brand new to javascript, html and all website stuff. Thanks

At 6:26 pm on August 5th, 2008 , Chavi wrote:

how to i get captions under the large image?

At 12:20 am on September 5th, 2008 , sohbet odaları wrote:

thanks a lot

At 2:23 pm on September 16th, 2008 , Ramazan wrote:

thanks

At 9:44 pm on September 19th, 2008 , sohbet wrote:

thank you

At 6:14 pm on September 20th, 2008 , sohbet wrote:

Thanks You

At 4:46 pm on September 22nd, 2008 , kat wrote:

great script. i’m trying it out on my website… it seems to work fine on firefox, safari, and opera. but when it comes to internet explorer, the image overlaps with the thumbnails (they move to the center of my page under the image). i tried changing the position from absolute to relative but that doesn’t fix my problem… any ideas? Thanks!

At 1:21 pm on September 28th, 2008 , hikaye wrote:

Yes Thats is a good idea.

At 1:23 pm on September 28th, 2008 , hikaye wrote:

Thanks a lot

Sohbet Odaları

Sohbet

Chat

Hikaye

Sex Hikayeleri

Porno Hikayeler

Erotik Hikayeler

At 1:24 pm on September 28th, 2008 , sex hikayeleri wrote:

Thanks a lot

At 1:24 pm on September 28th, 2008 , porno hikayeler wrote:

hımm good

At 4:30 pm on September 29th, 2008 , evelinat wrote:

Fantastic work.

But unfortunately, my galleria didn’t work at all.

I would appreciate if would you please be able to package the code into a compressed archive (.zip, .tar.gz, etc would be great .zip) for easier distribution and easy to use code?

Just I need to see how did you write the code. I got it confusing. Please help.

Thanks.

At 2:24 pm on October 3rd, 2008 , koddi wrote:

Here is a little tip to hack the “hover” on IE4+ (including IE6).
1. create a function that will change opacity if browser is ie-like.

function lightupie(imageobject, opacity){
if (navigator.appName.indexOf(”Microsoft”)!=-1&&parseInt(navigator.appVersion)>=4)
imageobject.filters.alpha.opacity=opacity;
}

2. add onmouseover and onmouseout behaviour on each like following:

…

So, “onmouseover”, the opacity will be set to 99
and “onmouseout”, if the is not active (this.className == ”) we will set the opacity to 50. Otherwise, it will stay 99.
Hope that helps some of you.
koddi.

At 2:27 pm on October 3rd, 2008 , koddi wrote:

oops…sorry
onmouseover = ” lightupie(this, 99);”
onmouseout = “if(this.className == ”) lightupie(this, 50);”

At 3:27 pm on October 8th, 2008 , Daniel wrote:

Very good!! Thanks a lot.

At 5:38 pm on October 13th, 2008 , Sohbet wrote:

Sohbet

At 5:39 pm on October 13th, 2008 , Sohbet Odaları wrote:

Sohbet Odaları

At 5:39 pm on October 13th, 2008 , Mirc wrote:

mirc sohbet

At 5:40 pm on October 13th, 2008 , Sohbet Odaları wrote:

Kızlarla Sohbet

At 9:56 pm on October 14th, 2008 , texastaurus wrote:

Has anyone successfully modified the code to show a full thumbnail instead of cropped? If someone can paste the code here will be great. Thanks.

At 12:19 am on October 21st, 2008 , evden eve nakliyat wrote:

Thank you very much for this information. I like this site

At 5:41 pm on October 28th, 2008 , Mathias wrote:

great tool but how can the images inside the thumb pictures be resized to see the whole picture and not only a part of the picture? would be great to get an answer.

thanks
mathias

At 11:26 am on November 5th, 2008 , sohbet cet wrote:

Kitchenin Lightweight Image Gallery with Thumbnails ei sinänsä tarjoa mitään uutta, mutta on pieni, toimiva ja varmasti helposti kustomoitava

At 10:17 pm on November 5th, 2008 , Lauren wrote:

I was wondering if someone could tell me how to have multiple galleries on the same page. Thanks!

At 10:25 pm on November 9th, 2008 , benjamin wrote:

i’m quit new to css, but try to understand it.
i realy love your image gallery and copied in to a page.

my problem now is that when i change the css,to the position where the image should appear on my page.

#jgal li img { position: absolute; top:67%; left:39%; right:auto; display: none; }

it works perfect on one pc but if i open the page on a other pc the big image moves from position on the x and y axis (i think a resolution problem).
i puted everything in percentage but even thats doesen’t work. Does somebody nows how to fix it? THX

At 3:21 am on November 12th, 2008 , Larry Courtney wrote:

Nice Code! I tried Landon’s add-in to get full view thumbnails, but I get a “EnlargedImg is undefined”; has anyone gotton Landon’s modification to work? If so please post- I have worked on this for days.

Thanks in advance!

At 10:16 am on November 13th, 2008 , film izle wrote:

sharing for thanks.. i wish the successfrom now on writing

At 4:06 am on November 18th, 2008 , plastik cerrahi wrote:

I used your guys method for a zombie on Halloween of 07, and I looked awsome! I looked like i stepped right out of the grave, THANKS!!

At 10:31 pm on November 21st, 2008 , kirsten wrote:

I love this, nice piece of work here, thanks for sharing!
My question is.. has anyone be able to implement this to include multiple links on the page that reload the list with a different set of photos? This way my gallery could contains photos in categories, if that makes sense?

Can provide sample of what I am doing, if need be, to clear up my poor use of the English language.
Thanks so much!

At 6:42 am on November 24th, 2008 , Lindsey wrote:

Hi,
I’m a student creating my own portfolio site and I used the javascript you shared. It’s working but causing other problems for me. I had javascript in my document already to have rollover images on my image links and now those don’t work. Also the actual large image displayed to the right of the thumbnails is higher than the thumbs and I cant get it even. Any advice?

Thanks.

At 9:18 pm on November 30th, 2008 , heki wrote:

Hi,
i have placed the gallery in between 2 divs like so:
HEADER

this nice gallery script

FOOTER

The footer shows under the middle div but only as far as there are thumbnails on the left. So if the image is higher than the hight of the thumbnails, the footer is shown under the image. It looks like middle div doesnt push the footer down …
Can anyone help me out please?

At 6:18 pm on December 7th, 2008 , kelebek script wrote:

sharing for thanks.. i wish the successfrom now on writing yes yes sie

At 6:18 pm on December 7th, 2008 , sohbet odaları wrote:

sharing for thanks.. i wish the successfrom now on writing
www.ekelebekfm.com

At 6:59 pm on December 12th, 2008 , Burun Estetigi wrote:

Question though, lets say I wanted to display text to the right of the big image when I click on the thumbnail. Like, it would be a description of the picture. How would I do that?

At 5:26 am on December 16th, 2008 , Joseph wrote:

Cheers for your work on this. It’s a great, minimal and to the point!

Joseph

At 10:26 am on December 16th, 2008 , estetik wrote:

Hi, thanks a lot for this nice and clean gallery. THe Javascript is hard for me to follow, but I can tweak the css any way I want to, and it works like a charm.
nice clear coding and perfect explanation! Thank you!

At 6:41 pm on December 27th, 2008 , kirsten wrote:

I am curious if anyone has been able to deal with the differences in behavior between Mozilla FireFox and IE?
The hover/opaque feature works strangely for me in Mozilla.
the main image is only 100% visable when the thumbnail is clicked and also hovered over and becomes opaque as soon as the mouse is moved. Here is the link: http://www.frankirsten.com/redhorsestudio/portfolio.html
I have implemented multiple galleries here as well, I am not thrilled with it and it needs some clean up, but it is worth a look if that is your goal. Also check here for another multiple gallery solution:
http://www.frankirsten.com/redhorsestudio/lightbox.html

At 9:37 pm on January 8th, 2009 , boyama oyunları wrote:

thanks

At 9:37 pm on January 8th, 2009 , 2 kişilik oyunlar wrote:

thanks

At 10:06 pm on January 26th, 2009 , Jen wrote:

I am not having any luck getting the gallery to work with separate thumbnail images. I have read several of the posts explaining which line of code to replace, but it’s not working on my website.
Is there anyone that can explain (in very simple terms) how to use separate thumbnail images with this gallery?

At 1:40 pm on February 2nd, 2009 , sohbet odaları wrote:

thank you

At 7:54 am on February 10th, 2009 , Mike wrote:

Hi,
Great script. I don’t write Javascript, but I was hoping there was an easy way to make the large image display ‘onmouseover’ instead of ‘click’?

Thanks in advance.

At 5:11 am on February 11th, 2009 , kirsten wrote:

Look above at the post from koddi, he describes using onMouseover and onMouseOut. You may also want to look here:

http://www.w3schools.com/js/tryit.asp?filename=tryjs_animation

This is an excellent example. It might take a little work, but you could surely get it to work.

At 2:47 pm on February 19th, 2009 , steve wrote:

Hi, not sure if these comments are getting followed up anymore, but worth a try!
Anyway, thanks for this script, works very well for what i need, however, the site im using it on uses linked css stylesheets rather than embeded ones, and i wondered if i could implement this in a simular manor. As i know very little about js, i am worried about messing up the IE conditional comments. As (i think)these would these remain in the html, should i leave the js between these comments embeded and link the rest, or an i missing something?
Any help appreciated

At 9:03 pm on February 20th, 2009 , okey wrote:

danke admin

At 9:04 pm on February 20th, 2009 , radyo wrote:

teşşekkurler admin

At 3:59 am on February 22nd, 2009 , John wrote:

great post i love it and am using it without any problems at all, thanks so much for all your hard work!!!

At 5:39 pm on February 25th, 2009 , sanjeev wrote:

Please send me a link where i can download this gallery. thanks

At 9:55 pm on February 25th, 2009 , hosting wrote:

Yes Thats is a good idea. Thanks a lot

At 4:29 am on March 1st, 2009 , Dennis M wrote:

I was searching for a gallery like this a long time. this is perfect for me. but i have a problem with it.

the gallery has to be in a content area (table) of my layout, but if i insert the gallery in the html code, the gallery does not work correctly.

The active image does not show up next to the thumbnails. it goes from thumbnail to big picture and overlays the other thumbnails. this happens when the position is set to relative.

if i let it as absolute, the act img shows up at the top of the page over the content.

i really don´t know how to solve that. div? if yes, how?

At 10:33 pm on March 3rd, 2009 , sohbet odaları wrote:

This is a very good

At 3:15 pm on March 4th, 2009 , Mark wrote:

Great idea. I’ve used it on my site but the images seem to take a while to load before the gallery shows in full - which looks ugly. I’ve added all the code as described but can’t work out why it’s doing this. Can anyone help? www.narusson.co.uk/folio

At 3:08 am on March 5th, 2009 , Jeremy wrote:

Hi,

Thanks for the push David. Two questions:

1) I’ve modified the layout a bit to fit my preference, but IE is having trouble with my fixed position for the active image. It works fine in Firefox. Any suggestions?

2) IE is also having trouble with the document.write() command prior to calling thumbnail.js. It will not display the image gallery until I resize (and reload?) the window. If I remove the document.write command they gallery shows up, albeit jittery. Any thoughts?

Here’s the site:
http://www.dzarchitect.com/commercial/index.htm
Click on the fifth image.

At 12:01 am on March 9th, 2009 , e-okul wrote:

Nice Code! I tried Landon’s add-in to get full view thumbnails, but I get a “EnlargedImg is undefined”; has anyone gotton Landon’s modification to work? If so please post- I have worked on this for days.

Thanks in advance!

At 2:13 am on March 10th, 2009 , Domingo Santana wrote:

Download?

At 8:51 pm on March 11th, 2009 , mirc wrote:

thanks you

At 11:13 pm on March 11th, 2009 , sex siteleri wrote:

very good sites

At 8:12 pm on March 13th, 2009 , steve23 wrote:

Can somebody please help with putting the thumbnails in a horizontal line above or below the main image??? please????? im going absolutely crazy ive tryed everything!!!!! Im doing coursework and it has to be in very soon. Thanks to anyone that can reply.

At 8:40 am on March 14th, 2009 , dtv antenna wrote:

Neat! Sometimes simplicity is better.

At 6:00 am on March 16th, 2009 , dr3d wrote:

Great script. Once again, I’ve took Landons advice for the resized thumbnails and it definately did not work. Anyone else have any advice to resizing the thumbnails instead of cropped? Thanks

At 4:06 am on March 19th, 2009 , muhabbet wrote:

Thx.

At 3:59 pm on March 21st, 2009 , Gleeman wrote:

Neat, but I have one gripe with this gallery and that’s the fact that it isn’t as portable as it should be in terms of styling. Because the li img element uses absolute positioning you can’t just place the gallery in any div on your page and expect it to look nice, as to my personal opinion should have been the case. I’ll rework that though, and maybe add some code for image scrolling as well…

At 4:23 pm on March 21st, 2009 , Gleeman wrote:

@steve23 That’s really easy

A quick and ugly way to do it is this (for two rows of images) replace the old styling with the following;

#jgal li img { position:absolute; top: 160px; left: 200px; display: none; }

#jgal { list-style: none; width: 800px; position: absolute;}

But I’d suggest reworking it more dramatically the current setup is a little inflexible.

At 4:57 pm on March 21st, 2009 , Gleeman wrote:

My bad, this gallery should work fine in any div, it’s my current webtemplate that’s using absolute positioning for all background elements that is screwing things up. I’m still trying to get a hang of CSS, fortunately it’s rarely a lot of code to examine.

At 1:52 am on March 24th, 2009 , jelena wrote:

Great script! Thanks, I implemented it here http://www.ghusebye.com/gallery.html

At 2:32 pm on March 24th, 2009 , Estetik wrote:

thanks

At 4:26 am on March 26th, 2009 , Abdel wrote:

Thanks for the script….I will definitely use it in my portfolio. thanks again.

At 11:14 am on March 26th, 2009 , arac kiralama wrote:

Showing images online is a big thing. Besides elementary stuff like flickr, there are a vast number of image gallery scripts available online.

At 11:17 am on March 26th, 2009 , estetik wrote:

And the ones that uses pure javascript are rarely degradable and don’t include thumbnails. sac ekimi

At 11:17 am on March 26th, 2009 , estetik wrote:

Thank youu … http://www.magicsacekimi.com

At 6:59 pm on March 26th, 2009 , RoyCreative wrote:

What if I want to put this on a page twice? Can’t seem to get the second one to work?

At 3:19 pm on April 1st, 2009 , parça kontör wrote:

thankss.

At 4:00 pm on April 1st, 2009 , Estetik wrote:

thanks you sharing.

At 5:51 pm on April 3rd, 2009 , Estetik wrote:

This is the one that allows the “freemium” business model, where 90% of the users get the basic product for free and 10% chose to pay for a premium version. In economics this is called “versioning”..

At 3:58 am on April 8th, 2009 , Alan wrote:

I really like this Gallery. I am having trouble with the thumbnails. They will not show up. The page that I am referring to is www.shawndunkin.com/gallery.html. If someone could help me my email is alan@alannugent.com.It is greatly appreciated.

Thanks

At 10:56 am on April 9th, 2009 , istanbul hotel wrote:

I read your article.The things you have written sound very sincere and nice topics i am looking forward to its continuation.

At 9:17 am on April 10th, 2009 , estetik wrote:

Great post. Thanks for the nice information.

At 6:28 pm on April 10th, 2009 , Javier wrote:

Hi, Nice scrip just one problem I’m having, its not showing the croped thumbnail images on IE (any version) it just shows the borders, everything else works fine.

Any help please?

At 5:00 pm on April 12th, 2009 , diet recipes wrote:

I liked the post thx.

At 11:52 am on April 13th, 2009 , estetik wrote:

Great page. Very nice. Thanks a lot.

At 9:35 pm on April 13th, 2009 , Airelle wrote:

Thank you for the gallery, it’s so simple, and much better than photoshop’s automated ones.
I am having one problem though, Safari doesn’t load the thumbnails…I am using Safari 2.It works fine in Firefox. Any ideas as to what might be wrong? Thanks.

At 2:05 pm on April 14th, 2009 , MichaelC wrote:

I am having a specific situation, that I was hoping I could get some help with. I have utilized the gallery correctly, i think. I am having an issue with IE7 the thumbnails do not seem to be aligning side by side, instead it is just one long column. you can view my source http://www.takeabowonline.com
I added contextual statements for IE7 as this is the only browser I am noticing a problem in, yet there seems to be no solution, whatever the problem is, it seems to be rendering correctly in IE8

At 7:14 pm on April 14th, 2009 , sohbet wrote:

thanks you off ulan of

At 12:57 pm on April 17th, 2009 , aydın kız öğrenci yurdu wrote:

thankss so much

At 12:04 am on April 19th, 2009 , cam balkon wrote:

thanks youuuu

At 6:10 pm on April 19th, 2009 , chat sitesi wrote:

Thxx

At 2:41 pm on April 22nd, 2009 , bursa wrote:

thanks you nice post…

At 5:44 pm on April 24th, 2009 , Emadz wrote:

Its really rocking….thankx

At 11:52 am on April 25th, 2009 , riza keskin wrote:

i like it and also if it will be like this part of the version.

Yalıtım
mermer
Granit
Granit
mantolama
Dekorasyon
Dekorasyon
Dekorasyon

At 3:37 pm on April 25th, 2009 , labioplasti wrote:

great post. thanks a lot.

At 9:43 am on April 28th, 2009 , oto kiralama wrote:

Really nice thank you I am using Themes

At 12:04 pm on April 28th, 2009 , wholesale jewelry wrote:

handmade jewelry,jewelry wholesale

At 3:35 pm on April 29th, 2009 , Sohpet wrote:

Thanks

At 11:09 pm on April 29th, 2009 , göğüs estetiği wrote:

The comments of the summer camp director are very true. Our kids go to camp each summer and return filthy dirty, with bug bites, sunburns, scrapes, bruises, and once a broken finger. But for a month, there is no electronic entertainment, nobody is babying them, and they have the freedom and authority to plan their days with much less structure than in school. There is much more tolerance for rough-housing than in the feminized Ritalin dispensaries our schools have become. They return happy, enthusiastic, and with visibly increased maturity and self-confidence.

At 12:24 am on April 30th, 2009 , turk porno wrote:

very good sites

At 12:26 am on April 30th, 2009 , hiphop wrote:

thansk you sites

At 3:35 am on May 3rd, 2009 , toner wrote:

thanks so much.

At 3:41 am on May 3rd, 2009 , radyo wrote:

Great.The best free offering blog.

At 7:58 pm on May 3rd, 2009 , sac ekimi wrote:

thanks you http://www.hairlife.com.tr

At 12:28 pm on May 6th, 2009 , esco servis gorenje servis wrote:

thankxxx love..

At 12:38 pm on May 6th, 2009 , handmade jewelry wrote:

wholesale crystal, wholesale pearl.

At 4:40 pm on May 6th, 2009 , Keith wrote:

How can i adjust the coding so that the there will be more thumbnail columns

At 9:47 am on May 7th, 2009 , yaling wrote:

Jewelry Market
Korean Jewelry

At 2:17 pm on May 8th, 2009 , oyun oyna wrote:

THANKS

At 2:17 pm on May 8th, 2009 , oyunlar wrote:

herşey

At 8:44 pm on May 8th, 2009 , tina wrote:

I GOT LANDON’S THUMBNAIL MOD TO WORK! These code changes make the thumbnails into resized images rather than cropped images. Here’s the full code without line # references:

In your CSS:
MAKE CHANGES -
#jgal li { opacity: .5; float: left; display: block; height: 30px; width: auto; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 5px; margin-bottom: 5px; }

#jgal li img { height:30px; width:auto; }

*(Note that I have my ‘height’ at 30px. This can be set to whatever you’d like and it corresponds to the height of your small thumbnail. Changing your ‘width’ to auto fixes the issue with the borders and outlines displaying correctly.)

In Your JavaScript:
AFTER -
var li = document.getElementById(’jgal’).getElementsByTagName(’li’);

ADD -
enlargedImg = document.createElement(’img’);
document.getElementById(’jgal’).parentNode.insertBefore(enlargedImg,document.getElementById(’jgal’).nextSibling);
enlargedImg.src = li[0].getElementsByTagName(’img’)[0].src;

DELETE -
li[i].getElementsByTagName(’img’)[0].src + ‘)’;

AFTER -
this.className = ‘active’;

ADD -
enlargedImg.src = this.getElementsByTagName(’img’)[0].src;

That worked for me. I know NOTHING about JavaScript and a little about CSS, but with some experimentation - this worked. Hopefully it will for you too!

At 9:30 pm on May 8th, 2009 , tina wrote:

So I got the above code to work, but I still can’t figure out how to add text descriptions or a ‘loading’ image. All of the website examples above that figured out the mods don’t explain how to do them. Some give their websites as examples, but most of them link to an external JavaScript source file so I can’t see the modded JavaScript to learn from. PLEASE someone help clearly guide me and so many others that have already asked to:

Add text descriptions
-and/or-
Add a loading image

Thank you so much in advance!

At 4:06 pm on May 15th, 2009 , muzik dinle wrote:

thanx admin very god

At 12:16 pm on May 16th, 2009 , Brick wrote:

Thanks a lot for this, it is very helpful for me…

At 2:15 pm on May 18th, 2009 , evden eve nakliyat gazioglu naklyat wrote:

www.gaziogluevdenevenakliyat.co
www.turkmenoglunakliyat.com
istanbul evden eve nakliyat
istanbul evden eve nakliye
evden eve nakliye
evden eve nakliyat
evden eve tasıma
evden even
nakliyat
nakliye
ofis tasımacılıgı
istanbul evtasıma
istanbulda evtaşıma
istanbul evden eve
evden eve taşıma
even eve nakliy

At 11:12 pm on May 18th, 2009 , sohbet odaları wrote:

thanks for the informations http://www.chattur.com

At 8:33 am on May 19th, 2009 , chat wrote:

teşekkurler admin

At 7:31 pm on May 25th, 2009 , sikiş wrote:

thnxxx

At 11:20 pm on May 25th, 2009 , cam balkon wrote:

cam balkon bizim işimiz işimiz olmasa deriz

At 11:21 pm on May 25th, 2009 , cam balkon wrote:

yeaaaaaa

At 12:47 am on May 28th, 2009 , David wrote:

Is there a way to open up the gallery in a new window, but have the window centered on the screen and dim the old window? I have seen this done before but I dont know how its done. My shopping cart opens in a window like this and I like how it looks.

Thanks

At 6:47 pm on May 31st, 2009 , Mirc İndir wrote:

Thanks..

My Only Sohbet Waiting..

At 6:49 pm on May 31st, 2009 , Mirc İndir wrote:

My Only Sohbet Waiting..
Thanks..

At 10:00 am on June 1st, 2009 , wholesale jewelry wrote:

Thanks very much

At 11:23 pm on June 1st, 2009 , sevişme videoları wrote:

thank you

At 11:50 am on June 4th, 2009 , konya chat wrote:

konya chat

At 9:08 pm on June 5th, 2009 , lezbiyenler wrote:

Thanks, there is more reason to comment than ever before!

At 6:50 am on June 6th, 2009 , accounting homework wrote:

Good one, galleries can be useful at times especially for projects etc

Thanks for posting them

At 9:07 pm on June 6th, 2009 , çet wrote:

thang you

At 9:08 pm on June 6th, 2009 , çet wrote:

thanks

At 3:15 pm on June 7th, 2009 , mirc wrote:

thanks admin

At 3:15 pm on June 7th, 2009 , türkçe mirc wrote:

thanksss

At 4:19 pm on June 8th, 2009 , estetik wrote:

Very nice post. Congrats.

At 6:45 pm on June 9th, 2009 , dvd film izle wrote:

Thank you very much very nice article

At 4:15 pm on June 11th, 2009 , okey wrote:

what a great plugin thank you so much for sharing!

At 4:16 pm on June 11th, 2009 , okey oyna wrote:

The thing is, the Irish users are, under this ruling, guilty until proven innocent, and the kicker is that they don’t even have the chance to prove their innocence. The procedure that’s been put in place doesn’t even allow them to try and defend themselves. As long as the Man *says* their downloading, then they are, there’s no attempt to substantiate the claims, no examination of evidence, hell they don’t even have to provide evidence.
So if the user’s got a Wifi setup at home with no encryption (not a crime, there’s valid reasons to have such a setup) or if their wifi uses weak encryption (again, not a crime), heck even WPA been’s cracked now. If someone piggy backs onto their network then they are screwed.
I’m pretty damned sure that EU law, which overrules Irish law in cases like this, has got something to say about this.

At 10:43 am on June 13th, 2009 , Film School wrote:

Great Post.Thank you

At 8:17 pm on June 14th, 2009 , sikiş wrote:

saoLasınn

At 8:19 pm on June 14th, 2009 , sikiş izle wrote:

saoLasın

At 11:53 am on June 15th, 2009 , wholesale jewelry wrote:

great website thanks

At 11:57 am on June 15th, 2009 , fashion jewelry wrote:

thanks for sharing

At 9:22 pm on June 15th, 2009 , klip izle wrote:

thanks you admin.

92 Trackbacks & Pings:

Trackback at 2:03 pm on July 9th, 2007 by Best of May/June 2007:

[…] Lightweight Image Gallery with Thumbnails This solution offers no server-side scripting, lightweight, unobtrusive javascript to create thumbnails and cross-browser consistency. The script is degradable if javascript or images are disabled. Nice, user-friendly and simple. […]

Trackback at 3:19 pm on July 9th, 2007 by Best of May/June 2007 | Webdesign (css, grafica e altro):

[…] Lightweight Image Gallery with Thumbnails This solution offers no server-side scripting, lightweight, unobtrusive javascript to create thumbnails and cross-browser consistency. The script is degradable if javascript or images are disabled. Nice, user-friendly and simple. […]

Trackback at 5:31 pm on July 9th, 2007 by lost node » Blog Archive » Best of May/June 2007:

[…] Lightweight Image Gallery with Thumbnails This solution offers no server-side scripting, lightweight, unobtrusive javascript to create thumbnails and cross-browser consistency. The script is degradable if javascript or images are disabled. Nice, user-friendly and simple. […]

Trackback at 9:07 pm on July 10th, 2007 by links for 2007-07-10 - Bomb.org.uk:

[…] Lightweight Image Gallery with Thumbnails | David’s kitchen (tags: javascript css webdesign photos gallery Design image images webdev coding xhtml ajax) […]

Trackback at 1:23 am on July 11th, 2007 by links for 2007-07-10 « toonz:

[…] Lightweight Image Gallery with Thumbnails | David’s kitchen (tags: javascript Gallery css photos) […]

Trackback at 2:46 am on July 11th, 2007 by links for 2007-07-11 « Simply… A User:

[…] Lightweight Image Gallery with Thumbnails | David’s kitchen (tags: JavaScript css gallery webdesign photos design image **) […]

Trackback at 3:56 am on July 11th, 2007 by Outlaw Design » Blog Archive » Top Java Script Image Galleries:

[…] is nice as-is, but really shines when used in conjunction with slightbox (a lightbox knock off). 3. Lightweight Image Gallery With Thumbs This is a superb image gallery script that is almost dummy proof. It simply uses a list of images, […]

Trackback at 8:19 am on July 11th, 2007 by Skylog » Blog Archive » links for 2007-07-11:

[…] Lightweight Image Gallery with Thumbnails (tags: css) […]

Trackback at 4:31 pm on July 11th, 2007 by links for 2007-07-11 | The ChuX NorriX Blog:

[…] Lightweight Image Gallery with Thumbnails | David’s kitchen (tags: ajax blog css flickr html gallery javascript) Posts Relacionados […]

Trackback at 5:42 am on July 12th, 2007 by Best of May/June 2007 · Style Grind:

[…] Lightweight Image Gallery with Thumbnails This solution offers no server-side scripting, lightweight, unobtrusive javascript to create thumbnails and cross-browser consistency. The script is degradable if javascript or images are disabled. Nice, user-friendly and simple. […]

Trackback at 1:21 pm on July 12th, 2007 by blog do valdecir carvalho » Blog Archive » links for 2007-07-12:

[…] Lightweight Image Gallery with Thumbnails | David’s kitchen (tags: ajax blog design foto fotografia fotos webdesign photos image gallery javascript css) […]

Trackback at 11:50 pm on July 14th, 2007 by Outlaw Design » Blog Archive » Top Java Script Image Galleries:

[…] Lightweight Image Gallery with Thumbnails This is a superb image gallery script that is almost dummy proof. It simply uses a list of images, […]

Trackback at 6:45 pm on July 18th, 2007 by tmthai.com All you need for the Website!!!!» Blog Archive » HTML5 versus HTML4:

[…] moreinfo : http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails […]

Trackback at 8:11 pm on July 27th, 2007 by One Measly Dollar » Blog Archive » links for 2007-07-10:

[…] Lightweight Image Gallery with?Thumbnails?|?David’s kitchen Seemingly nifty js/css image gallery. (tags: javascript gallery css photos webdesign) […]

Trackback at 5:35 pm on August 16th, 2007 by am Design » Baabelin kirjasto » Artikkelikatsaus: Kesäkuu:

[…] Kitchenin Lightweight Image Gallery with Thumbnails ei sinänsä tarjoa mitään uutta, mutta on pieni, toimiva ja varmasti helposti kustomoitava […]

Trackback at 2:54 am on August 17th, 2007 by links for 2007-08-17 | giancarlo.dimassa.net:

[…] Lightweight Image Gallery with Thumbnails | David’s kitchen (tags: javascript css gallery webdesign photos design image blog blogs button code coding dev ajax) […]

Trackback at 11:58 am on October 2nd, 2007 by » Photogalerie mit JS — cne _LOG Archiv:

[…] Und noch eine Javascript-betriebene Bildergalerie: Lightweight Image Gallery with Thumbnails. […]

Trackback at 8:26 am on October 3rd, 2007 by karstens kitchen » Blog Archive » links for 2007-10-03:

[…] Lightweight Image Gallery with Thumbnails | David’s kitchen […]

Trackback at 7:57 pm on December 9th, 2007 by am Design » Baabelin kirjasto » Artikkelikatsaus: Kesäkuu 2007:

[…] käyttämäni CMS:n galleriaan tai ulkopuoliseen palveluun (so. Flickr). David’s Kitchenin Lightweight Image Gallery with Thumbnails ei sinänsä tarjoa mitään uutta, mutta on pieni, toimiva ja varmasti helposti kustomoitava […]

Trackback at 4:52 pm on January 5th, 2008 by Galerías de imágenes gratis | Diego Jiménez:

[…] Lightweight: de aspecto simple y peso reducido se sitúa como una de las galerías más simples de la lista, una solución ideal para la integración con tu propio diseño. […]

Trackback at 3:36 am on February 14th, 2008 by GalleryLite - a Javascript Image Gallery | David’s kitchen:

[…] 6 months ago I posted about a lightweight javascript gallery that could take an unordered list of images, add the source of each image as a background-image […]

Trackback at 5:14 am on February 14th, 2008 by Galleria - a Javascript Image Gallery | David’s kitchen:

[…] 6 months ago I posted about a lightweight javascript gallery that could take an unordered list of images, add the source of each image as a background-image […]

Trackback at 2:12 pm on April 1st, 2008 by Gallerie gratuite per fotografie in flash e in javascript - MAMBRO MP3 & WAREZ FREE DOWNLOAD NETWORK:

[…] Imago Demo jQuery slideViewer minishowcaseDemo AJAX Image Gallery powered by Slideflow Lightweight Image Gallery with ThumbnailsDemo Live Pipe PhotoFolderDemo […]

Trackback at 4:12 pm on April 1st, 2008 by 33款漂亮免费的Javascript和Flash相册程序 | Angelived:

[…] Lightweight Image Gallery with ThumbnailsDemo […]

Trackback at 5:13 pm on April 1st, 2008 by 33款漂亮免费的Javascript和Flash相册程序 - MyEss.cn:

[…] Lightweight Image Gallery with ThumbnailsDemo […]

Trackback at 5:23 pm on April 2nd, 2008 by 33 Most Beautiful Javascript and Flash Galleries - Graphics, Photoshop, Illustrator, Fireworks, Tutorials, Web 2.0:

[…] Lightweight Image Gallery with ThumbnailsDemo […]

Trackback at 11:40 pm on April 2nd, 2008 by Graphic, Grafik, Videolar, Resimler, İlginçler, WordPress, Joomla Template, Web Sitesi, Web, » flash gallery ajax galeri java script gallery:

[…] Lightweight Image Gallery with Thumbnails Demo […]

Trackback at 5:45 am on April 3rd, 2008 by 33 Most Beautiful JavaScript and Flash Galleries | Ajaxonomy:

[…] Lightweight Image Gallery with ThumbnailsDemo […]

Trackback at 4:32 am on April 4th, 2008 by LoverSick.com » Blog Archive » 33 Harika Javascript ve Flash Galeriler:

[…] Lightweight Image Gallery with ThumbnailsDemo […]

Trackback at 12:07 pm on April 7th, 2008 by [收藏集]35+ 免费JS/Flash相册 | Firefox.hk:

[…] Lightweight Image Gallery with Thumbnails Demo […]

Trackback at 6:37 pm on April 7th, 2008 by [收藏集]35+ 免费JS/Flash相册 - MyEss.cn:

[…] Lightweight Image Gallery with Thumbnails Demo […]

Trackback at 7:17 am on April 8th, 2008 by 33个顶级Javascript 和 Flash 代码链接 | 摇钱树:

[…] Lightweight Image Gallery with ThumbnailsDemo […]

Trackback at 10:14 pm on April 11th, 2008 by Las mejores galerías fotográficas « Diseño web y posicionamiento en buscadores:

[…] Lightweight Image Gallery with ThumbnailsDemo […]

Trackback at 4:59 am on April 20th, 2008 by Top Java Script Image Galleries : Outlaw Design Blog:

[…] Lightweight Image Gallery with Thumbnails This is a superb image gallery script that is almost dummy proof. It simply uses a list of images, […]

Trackback at 12:47 am on April 21st, 2008 by Serhat Yolaçan » 33 En Güzel Javascript ve Flash Galeri:

[…] Lightweight Image Gallery with ThumbnailsDemo […]

Trackback at 2:16 pm on April 22nd, 2008 by Ajax ve JavaScript Tabanl� Foto�raf Galerileri - TurkForum.Net:

[…] lightweight image gallery "�yle �ok karma��k bir galeri istemiyorum" diyorsan�z bu galeri sizi tatmin edebilir. Olduk�a sade ve haz�rlan��� kolay bir galeri ��nk�. lightweight image gallery […]

Trackback at 5:15 pm on April 27th, 2008 by Ren Junlong’s Web Site » Blog Archive » 33款漂亮免费的Javascript和Flash相册程序:

[…] Lightweight Image Gallery with ThumbnailsDemo […]

Trackback at 4:01 am on April 29th, 2008 by 33个最美的Javascript/Flash图库组件 | 达达的Blog:

[…] Lightweight Image Gallery with Thumbnails Demo […]

Trackback at 1:31 pm on May 2nd, 2008 by InstaHippo » Thumbnails:

[…] Some people have claimed that it won’t “work” without javascript. Well, it won’t be clickable with thumbnails in the same way, no, but the images are still there for viewing.7 […]

Trackback at 3:40 pm on May 3rd, 2008 by KMC | Web & Internet Teknolojileri Günlüğü » Ajax/Javascript ile Yapılmış Resim Galerisi Örnekleri:

[…] No.9 Lightweight Image Gallery […]

Trackback at 8:18 pm on May 5th, 2008 by Gallerie gratuite per fotografie in flash e in javascript | Caputo's Blog:

[…] Imago Demo jQuery slideViewer minishowcaseDemo AJAX Image Gallery powered by Slideflow Lightweight Image Gallery with ThumbnailsDemo Live Pipe PhotoFolderDemo […]

Trackback at 12:26 pm on May 14th, 2008 by Mudska Studio Blog Lab » 33 Most Beautiful Javascript and Flash Galleries:

[…] Lightweight Image Gallery with ThumbnailsDemo […]

Trackback at 4:35 pm on May 26th, 2008 by 33款漂亮免费的Javascript和Flash相册程序 | 享受软件:

[…] Lightweight Image Gallery with ThumbnailsDemo […]

Trackback at 6:31 am on June 3rd, 2008 by thumbnail gallery:

[…] […]

Trackback at 5:41 am on June 13th, 2008 by 33款漂亮免费的Javascript和Flash相册程序 - 山歌好比春江水:

[…] Lightweight Image Gallery with ThumbnailsDemo […]

Trackback at 4:04 pm on June 19th, 2008 by thumbnail galleries:

[…] nifty js/css image gallery. …. Trackback at 6:31 am on June 3rd, 2008 by thumbnail gallery: …http://www.monc.se/kitchen/80/lightweight-image-gallery-with-thumbnailsFree-thumbnail-gallery.comwarning!! this site contains adult materials or materials that may be […]

Trackback at 10:10 pm on June 23rd, 2008 by 32 Flash и Javascript галереи | Дизайн-журнал №1.:

[…] Lightweight Image Gallery with ThumbnailsDemo […]

Trackback at 3:09 pm on July 18th, 2008 by Mascot » Blog Archive » Beautiful Javascript and Flash Galleries:

[…] Lightweight Image Gallery with ThumbnailsDemo […]

Trackback at 11:57 am on July 21st, 2008 by مدونة طارق » Blog Archive » احصل على البوم صور لموقعك Gallery:

[…] Lightweight Image Gallery […]

Trackback at 11:20 pm on August 9th, 2008 by Josh Ventura.com V2.0 | Ace In The Whole:

[…] running at joshventura.com. On the services page, I have a javascript image gallery that I found here. I was having some spacing issues with the css and then I noticed it wasn’t cross-browser […]

Trackback at 7:49 am on August 26th, 2008 by 33款漂亮免费的Javascript和Flash相册软件 - E-TALBE:

[…] Spry ImagoDemo jQuery slideViewer minishowcaseDemo AJAX Image Gallery powered by Slideflow Lightweight Image Gallery with ThumbnailsDemo Live Pipe PhotoFolderDemo JaSDemo […]

Trackback at 5:54 am on September 15th, 2008 by [Scripts] Galeria de Imagenes | Blog de Haruko:

[…] Image GallerySite: http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnailsGalería Ajax. […]

Trackback at 7:49 pm on September 22nd, 2008 by 19个最漂亮的纯javascript相册 | 软件音速:

[…] Lightweight Image Gallery with Thumbnails  预览 […]

Trackback at 7:52 pm on October 12th, 2008 by adult submit:

adult submit…

adult link directory…

Trackback at 2:44 am on October 15th, 2008 by 56 个AJAX图片展示框架(Galleries, Slideshows and Lightboxes) | 梦疑大师的博客:

[…] [homesite、lightweight gallery] Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an […]

Trackback at 4:44 pm on October 19th, 2008 by ÜCRETSİZ FOTO GALERİ SCRİPTİ,FOTO SCRİPT,ÜCRETSİZ FOTO GALERİ,FOTO GALERİ | Mahser.org|Hassas Terazi Kuruldu.:

[…] lightweight image gallery “Öyle çok karmaşık bir galeri istemiyorum” diyorsanız bu galeri sizi tatmin edebilir. Oldukça sade ve hazırlanışı kolay bir galeri çünkü. […]

Trackback at 9:38 pm on October 29th, 2008 by 110+ javascript / Ajax bookmarks for web developers:

[…] Slideshow Spry Gallery Demo jQuery ImageStrip Slideshow MiniShowCase Ajax Coverflow (Slideflow) Lightweight Gallery Livepipe Photo Folder jaS Gallery Mooflow Cross browser toys Gallery Moo […]

Trackback at 4:36 pm on December 19th, 2008 by 21+ beautiful Javascript and Ajax based solutions to our gallery requirements - Ntt.cc:

[…] No.9 Lightweight Image Gallery […]

Trackback at 9:08 pm on December 20th, 2008 by riaeye » Blog Archive » 21+ beautiful Javascript and Ajax based solutions for gallery:

[…] No.9 Lightweight Image Gallery […]

Trackback at 8:05 am on December 26th, 2008 by 抽风的漠兮’s Blog » 33款漂亮免费的Javascript和Flash相册程序:

[…] Lightweight Image Gallery with ThumbnailsDemo […]

Trackback at 4:39 pm on February 5th, 2009 by Top 30 Javascript Slideshows, Sliders and Carousels « Kolmex:

[…] Lightweight Image Gallery with Thumbnails Demo […]

Trackback at 6:11 pm on March 2nd, 2009 by ÜCRETSİZ FOTO GALERİ SCRİPTİ,FOTO SCRİPT,ÜCRETSİZ FOTO GALERİ,FOTO GALERİ | Teknomax.org:

[…] lightweight image gallery “Öyle çok karmaşık bir galeri istemiyorum” diyorsanız bu galeri sizi tatmin edebilir. Oldukça sade ve hazırlanışı kolay bir galeri çünkü. […]

Trackback at 6:32 pm on March 20th, 2009 by Pr Yüksek Bloklar : DaruDe.Net hoş Geldiniz:

[…] http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails […]

Trackback at 8:00 am on March 23rd, 2009 by 值得收藏的35+ 免费Javascript /Flash相册 | Molutran's Blog:

[…] Lightweight Image Gallery with Thumbnails Demo […]

Trackback at 11:51 am on March 30th, 2009 by The best JavaScript image galleries | Website Building Tutorials:

[…] Lightweight Image Gallery http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails […]

Trackback at 12:42 pm on May 4th, 2009 by Great Collection of beautiful Javascript and Ajax based solutions to our gallery requirements | guidesigner.com:

[…] No.9 Lightweight Image Gallery […]

Trackback at 4:58 pm on May 15th, 2009 by Pr si Yüksek Yabancı Bloglardan Link Kasmak | Mytr Bilişim Dünyası | Pr si Yüksek Yabancı Bloglardan Link Kasmak:

[…] http://monc.se/kitchen/80/lightweight-image-galler […]

Trackback at 6:23 am on May 24th, 2009 by ThunDi Design Ideas and Techniques » Blog Archive » 21+ beautiful Javascript and Ajax based solutions to our gallery requirements:

[…] No.9 Lightweight Image Gallery […]

Trackback at 5:47 am on May 29th, 2009 by Please, what do you think?:

[…] What you just described was for replacing a piece of text with an image. a javascript image replace script normally replaces one image for another via a link. I used them back in the day, but because people have javascript disabled i stopped using it. Something along the lines of this. Or … this one is another good example. […]

Trackback at 11:45 am on June 20th, 2009 by 21+ beautiful Javascript and Ajax based solutions to our gallery requirements « Dogfeeds——IT Telescope:

[…] No.9 Lightweight Image Gallery […]

Trackback at 10:50 am on August 20th, 2009 by Advice: The best JavaScript Image Galleries « Web Design Northampton:

[…] Lightweight Image Gallery http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails […]

Trackback at 2:32 pm on August 25th, 2009 by Building a Website - need help. - Offtopicz:

[…] a really decent Javascript Gallery that should work on any provider: After a quick search I found: Lightweight Image Gallery with*Thumbnails*|*David’s kitchen Which should be more than sufficient. For a more fully featured solution you could try Galleria […]

Trackback at 4:22 pm on September 2nd, 2009 by 20 Ejemplos de Galerias Web 2.0 @ Ciberdix 2.0 :: Blog Creativo!!:

[…] Image Gallery with Thumbnail | Demo […]

Trackback at 11:25 pm on September 2nd, 2009 by Lightweight Image Gallery with Thumbnails | David’s kitchen:

[…] Read more from the original source: Lightweight Image Gallery with Thumbnails | David’s kitchen […]

Trackback at 7:44 am on September 3rd, 2009 by Javascript Image and Photo Galleries – Mootool, Prototype, jQuery and Tutorials | guidesigner.net:

[…] Image Gallery with Thumbnail | Demo […]

Trackback at 10:43 am on September 4th, 2009 by 30个js画廊组件和教程 | 路可-WEB前端开发:

[…] Image Gallery with Thumbnail | Demo […]

Trackback at 9:30 pm on October 16th, 2009 by Aino | David’s kitchen:

[…] posts have been very popular around here, like the lightweight image gallery, Scalable CSS buttons, cascading order in CSS and rendering quotes with CSS. They will still be […]

Trackback at 11:44 pm on October 26th, 2009 by Creative Reach » Archives » CREATIVE REACH LAUNCHES:

[…] I had a look around online for some nice and simple javascript (not my strongest) code to build a simple image gallery which will be featured in the near future. If you want to use it, you can either pull the code from the source or follow this link to the tutorial: http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails […]

Trackback at 10:21 pm on November 27th, 2009 by Flash vs. ajax : Mattias Holmgren blog:

[…] gallery […]

Trackback at 8:29 am on December 21st, 2009 by Falconer Design Studio » Blog Archive » resources:

[…] Simple JS Gallery FTP Hosts […]

Trackback at 8:47 am on January 28th, 2010 by Stunning Collection Of Dynamic Photo Galleries:

[…] * * * Lightweight image gallery […]

Trackback at 5:05 pm on January 28th, 2010 by Thumbnail template help:

[…] nicely? or put all pics on one big image.. or… this gallery is very simple, but looks nice - Lightweight Image Gallery with*Thumbnails*|*David’s kitchen __________________ Free […]

Trackback at 4:39 am on February 1st, 2010 by 33款漂亮免费的Javascript和Flash相册程序 | 生活·己欲达:

[…] Lightweight Image Gallery with ThumbnailsDemo […]

Trackback at 11:14 am on February 13th, 2010 by jQuery插件收藏:

[…] [homesite、lightweight gallery] Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an […]

Trackback at 5:23 pm on February 20th, 2010 by » Week in Tweets:

[…] shows here but could figure it out http://www.monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails in reply to RichardDeehan […]

Trackback at 2:16 am on March 2nd, 2010 by Aino « DesignerLinks:

[…] posts have been very popular around here, like the lightweight image gallery, Scalable CSS buttons, cascading order in CSS and rendering quotes with CSS. They will still be […]

Trackback at 5:58 pm on March 14th, 2010 by CSS-Problem mit relativer Ausrichtung - php.de:

[…] mit relativer Ausrichtung Hallo Ich habe eine schönes Bild-Galerie gefunden bei Lightweight Image Gallery with*Thumbnails*|*David’s kitchen und wollte diese anpassen. Klappt alles wunderbar, bis auf ein Problem: Wenn ich die Seite […]

Trackback at 11:09 pm on March 23rd, 2010 by PROG Javascript image gallery thumbnail - 9lives - Games Forum:

[…] </ul> Ik hoop dat ik het wat duidelijk heb kunnen maken. Het komt eigenlijk gewoon van deze site. Onderaan staat ongeveer wat je moet doen voor kleine afbeeldingen, maar niet echt duidelijk wat je […]

Trackback at 11:24 am on April 19th, 2010 by Lightweight Image Gallery with Thumbnails | David’s kitchen:

[…] See the rest here: Lightweight Image Gallery with Thumbnails | David’s kitchen […]

Trackback at 2:04 pm on May 24th, 2010 by AJAX, gallery, JavaScript, solution | Hello Tea:

[…] No.9 Lightweight Image Gallery […]

Trackback at 3:24 pm on June 4th, 2010 by Love Design Multimedia » Blog Archive » Free Javascript Image Gallery & Flash Photo Gallery #2:

[…] 31. Image Gallery with Thumbnail […]

Trackback at 6:16 pm on June 7th, 2010 by Love Design Arts » Free Javascript Image Gallery & Flash Photo Gallery #2:

[…] 31. Image Gallery with Thumbnail […]