LightBox 2: Simple JavaScript Image Gallery

[rjcream]

thanks man! without your tutorials I would find it hard learning this stuff on my own

[bassnebula93]

Thanks ! Excellent ! Pretty well explained ! ... Best lightbox tutorial so far ! ... Where can I make a donation ?

[Numsemis]

This works fine until I upload my website, why is this?

[siesta9871]

@Numsemis I have the same problem! Can anyone help?

[TheRandyMajor]

I need to put in a few html forms and a php query along with a i frame in the lightbox can anyone help with that?

[TheRandyMajor]

NICE treehousesocial-com is so much nicer now!

[Lambo09VSFerrari09]

You sound like a salesman.

[terasso]

actually you are able to do theese with photoshop

[createproducti0ns]

thanks a lot, you saved my christmas



[evelynpv]

Best Lightbox tutorial I've seen so far, Thank you soooo much, you helped me finish my final project,

[Johnlee137]

VERY nice tutorial. Very clear and concise and to the point. Simple explanations. Great tutorial

[authoretec]

I have one image in my gallery that I dont necessarily need a gallery, but just for the image to auto popout on the page load. Do you know how to accomplish that? THANK YOU!

[badgerkins1991]

hi, i did everything you showed in the video and lightbox doesn't appear when i preview my page. i click my thumbnail and the image appears but no white border, no dark background. why is this happening? :(

[kimikohung]

god u mede it so easyyyyyyy !!!!!!

[centejones]

DUDE YOU F'N ROCK.... thanks alot

[nemanjicbgd]

thank you so much :)))

[KCTrebs]

Awesome, thank you so much!  I def have to donate!

[JinxTheCat2552]

Ok I have a question how do I make one thubnail hold like 9 diffrent images? I want to be able to click on a thumbnail and show more images and then have the other thubnails link to another group of pictures?

[chammieloves17]

great tutorial! Works like magic in Google Chrome but not in internet explorer.. AND THANK YOU SO MUCH.. im gonna use this for our website... :)

[chammieloves17]

great tutorial! Works like magic in Google Chrome but not in internet explorer..

[mybizness1]

--HOW do you use Lightbox2 with rollover thumbs created from photoshop?? For instance, I have my original image thumb and then I created a nice rollover thumb in photoshop. But how would I get Lightbox to work in dreamweaver with my rollover images I created??? I've looked EVERYWHERE for this answer but nobody seems to have anything posted on how to do this but I've seen it done before.

Is there an example code that anyone has or a short tutorial on how to do this. Would be appreciated!!

[gabcc54]

thaaaaaanks a lotttttt!

[mamiluz100]

Did you donate anything? lol

[hippopotas100]

Where would you start the script in a dreamweaver template?

[Ukeishan]

Thanks man, it worked great, however on my website assignment it stops my banner slider content from working. My banner just previews as a blank space on my website although the light box works...how can i fix that

[NEOX71]

super like :)

[Ambition913]

nice....

[lylidaoc]

So, I tried to set this up once before and it didn't work, I just followed your tutorial and want to say I think I love you. Finally works! Additionally, I believe I've learned more from your tutorials over the past few semesters than I have from my actual college courses. That you so very very much!

[NICKmv573]

when i click on the photo it opens up embedded at the very bottom of the page. can you help out

[MckMick]

CHEERS!

[IngloriousPancake]

Check out these cool photographs fetchthings.etsy.com

[Aaron1016123]

I've been watching your videos for the last year or two as I progress in the industry. First Photoshop, Illustrator, then Flash, Dreamweaver etc. You always do a great job explaining the information clearly and often using a "real world" example.

 You've taught me how to create rollovers just as well as my teacher. The only difference is you didn't charge me 50k! lol Great job and your work here is truely appreciated.

[sjavaid234]

Thanks Alot man :)

[JOne016]

Thank you sir!

[dmitriy333557]

Thanks a lot man great gallery I love it!!!!!!!!!!

[zkaterz]

wow great job mate! thanks for this

[zkaterz]

awesome job mate!

[katzuki09]

Y_Y you save me!! this is brilliant thank you very much

[cooldevansh1]

thank you mannnnnnnnnnnnn

[kjirnegreb]

The lightbox works perfectly with all the browsers I use, but in adobe Dreamweaver CS5 you get the message that there is an error in the lightbox.css file, wich will effect Netscape 8.0 What's wrong?

[hobba777]

waht about the old css if i add the new one of lightbox

[MsVallies]

Thank you soooooooooooooo much you solve my problem (how to make group picture

[nxtgamingnet]

Nice video. Lightbox always seems to come in handy for something, but problem is just remembering how easy it is to use it :S

[InsurgenceRX]

is there anyway to add captions to the images? Please let me know if there is a way

[InsurgenceRX]

never mind I got it. I had to put those images back in lol

[InsurgenceRX]

can someone help me?? I got this to work, except when the images pop up, the text for "left" and "right" does not show up. How do I fix this? Thanks

[xCaucashx]

@InsurgenceRX how did u solve this ?

[lordacquel]

thanks a lot, just perfect

[shonmixen95]

Will it work in a DIV box?

[infdecoy]

oh man, this is an amazing tutorial, thanks so much

[royalassassin1]

TUTVID is the BEST ,thanks man keep it up! Great tutorial!

[FOGTALK]

excellent great viewing fogtalk 91%

[lilken21]

How do i get lightbox working with a button inside flash cs5 (actionscript 3)?

[8sim6]

hey just wondering do you have any tip on how to fit these to a backround image?

im making a website that looks like a book and want my thumbnails to lay on the pages neatly and not over the folds of the book...any advice would be great! thanks

:) great video by the way!

[GamesForLifes999]

Works 100% ty. subed =)

[MarqyF]

Thanks a lot. Especially the 'do-not-play-with-the-folder-s­tructure' part did the trick for me ;-)

[hurrgurr]

Your tutorials are great man!!

[hunt0000007]

This didnt work for me. I am new at DW so please go easy on me. I did everything as you said, except that i took all the images in a single DIV so that they are shown in rows. My thumbs are called small(x).jpg and large ones are called large(x).jpg, where 'x' is a number. Please tell me it isn't because of the P tag?

[xenojobeia]

@hunt0000007 im having the same problem put them in an ap div to arrange them its not working

[GamesForLifes999]

@hunt0000007 i can help you if you want. youst go like is showing but that question ... i don't understand =S

[TheAllenahmed]

great man tnx for the tutorial God bless

[haqi9fly]

I like the way this dude talks. clear, and precise. He says light box funny though. LOL!!!

[walumpu]

you are talking too much asshole!

[TheTricia58]

Thank you so much. Just one problem tho. It doesn't work right in ie. It opens up in a white box with the image in the upper left corner. Works perfect in safari & firefox.

Can you tell me how to get it to work in ie. I am using dreamweaver cs5.

[haqi9fly]

Did he tell you yet how to program light box for IE? Can you please tell me?

[TheTricia58]

@haqi9fly Sorry no. I still can't get it to work in IE.

[VistaCerralvo]

awesome...thanks!!!!

[Zaptagious]

Is there a function in Bridge or Photoshop or something to create batch thumbnails when I have a lot of images and dont want to go through every single one seperately :I

[thugs4life22]

Thank you again mate

[Edsilvacunha]

i come here to get help with this when i arrived here b4 watch this vid for 2 minutes i found my error which made i come here finding solution

[Lylecakes]

wow you kind of sound like christian slater lol amazing tutorial! thanks!

[aarellano2424]

Amazing tutorial! Thank you, thank you, thank you :) You made this so easy to understand and easy to apply.

[Rock4oneOTC]

Well done! This is the most comprehensive well structured and easy to understand LightBox tutorial I have seen online...

Thank You

[wayneready]

I love you helped me build a site and make me look like a pro

[GamesForLifes999]

@BRONCOEASY copy paste copy paste and then youst photo file change to ...

[nietolico]

it doesnt work when i put it on the server...

[nietolico]

How do you ad a caption to each photo? instead of just saying image 1 of 5......

[ricky0595]

Perfect!

[chriseekim]

its not working for me. it works when i view it as a sample page but when i actually go to my website nothing happens. i followed the exact instructions. and tried everything from the support section. can anyone help? thanks! great tutorial btw!

[warlocks970]

hey your speed has improved thanks man really helped a lot i will send u the link of my completed website :)

[Rock4oneOTC]

Great Job! Thank You.

[MyUsernameisLena]

It works..



[HawxTeamDelta]

your voice is not boring like others.. nice tut

[ianisth]

Lightbox works in the index.htm file but when I put it into any other file it does not wrok

[donnytyke]

@ianisth Same here! Anyone know how to make it work on other .html pages?

[smithyboi1992]

tried this tut for my own photography portfolio, jumps straight to a new page. So i created a simple site to just try creating the lightbox step by step and still it jumps to a new page... im guessing its because lightbox isnt linking with dreamweaver

[iselaespana]

@smithyboi1992 This was happening to me also.....

with me i was putting the rel="lightbox" in the wrong place i was putting it under img src instead of right after href.....try that!

Hope it helps...Isela

[powellcustomdrums]

Ok i'm getting SOOOO frustrated i spent about an entire 10 hrs trying to do this and every time i click the thumbnail the bigger photo loads in a separate window! I noticed a ton of people out there are having the same issue! Im using Dreamweaver mx and my site files have a ton of files and sub folders i am in fact loading the Lightbox files in the main site root folder is even though my image gallery is deep inside another folder does this matter?

HELP?

[smithyboi1992]

@powellcustomdrums I have the same problem, currently trying to figure out what it is, it seems to be coding between dreamweaver and lightbox

[smithyboi1992]

@smithyboi1992 Got it sorted. Double check to make sure that your Css folder contains "lightbox", and that your js folder contains all files

[powellcustomdrums]

HELP? When i go to drag and drop the 3 files from my desktop into Dreamweaver it says access denied!

[Arjun007ize]

Hey there, Could you please tell me that i've a flash template on hotel and i have few button in it like home,booking,location,contact us, services but i want to add a button for photo gallary,So i am confused do make one.Please reply. i'll be highly oblige.Thanks again.

[rjtkoh]

great tute. But once I put the thumb inside a div, it doesnt work. it just takes me to another page instead of the desired effect. What can I do?

[TechStory]

@TutVid Thanks for all your vid..!

@nicsevern I think you've bought a mirror monitor! If you dont feel me, shows you for the second time that you are DOM!

[nicsevern]

haha why do you sound like you're on helium in this vid? hahaha i cant stop laughing

[PouMpleksame]

Thank you for all your videos!!!

[mslisamurai]

oh my gosh, thanks for explaining it sooo clearly! i've tried to to it myself, tried following written instructions, watched a couple of videos: no results until now!

thanks again!

[ChaqwaSpoofYOU]

Dude. I owe you so much. I'm on the eve of a website assignment due. Thankssss!!!!

[electrohousexxx]

thank you you are amazing!!!!!

[davo809]

awesome, thanks for the tutorial , worked first time ;)

if you ever plan to do a tutorial on flash animated backgrounds ( like the one in your intro/title page) that would be awesome also .

[12345654321sla]

how do i get this to work in an existing site whilst already using ap divs etc for things on my site?i try to follow this tutorial but i must be putting something wrong on my site...any tips?thanks

[JohnnyTie]

@12345654321sla Yeah, I'm having the exact same problem. Have you gotten word on this yet? I'm cracking my head over this for already a week!

[wenwenluluSingapore]

hey, this video do help me a lot! Thanx~~

btw, what am i supposed to do if waht to save image viewed?

[undiscovered47]

I already have a folder called "images" for my website so I can't have the same name for lightbox as well and if I change the name, it won't work. Please help :(

[kukica1976]

You helped me a lot! Thank you :)

AS well, a question: is it possible to name photos in lightbox? Now, if I have 5 pics in photo galery, in lightbox they are named image 1, image 2... So, can I change that?

Thanks once again.

[elmocotopo]

Thnks a lot man, you certainly have a gift for teaching, keep up the excellent work. I never leave comments for anybody, but you have been the exception. I'm a former print graphic designer trying to catch up with the younger kids so I can hopefully do what I love to do the most once again. Seems like everybody expects a graphic designer to know how to build websites, and your tuts have been so helpful. Thnks a lot for your time and dedication.

[NarasimhaVishnu]

dude, thanks a lot! it is amazing!

thanks a lot again!

[humanpong]

this was amazingly helpful!! thanks so much!

[grafxbill]

Awesome this is just fantastic.

[ajarmush]

GREAT TNX!!

[TheSHiNe1992]

thanks so much, been looking for something like this for a long time and now I've found it. it really helped. Thanks!

[moransylvia]

It is your turn to see Asian women *lushfmlk.info*

Best chance to get an Asian lady *lushfmlk.info*

[yoseinthehose]

Nice tutorial. Good thing you are fast and precise.

[L0UDBEAT]

Best tutorial! All working beautifully! Top man!

[7920lainolo]

wow awesome :D can you do a tutorial for scrolling images where the photos scroll across on a website :D

- subscribed

[iveggy]

THANKS!

[iveggy]

THANKS!

[haccuk]

Thank you, another excellent video. I've been struggling with this but it's so easy when I've watched you and I've made a donation as well.

[yacaram1]

en español por favor

[GFSuit]

Excellent tutorial. Followed it and it worked like a charm!

[calctmnt]

Is there a way to make the images load faster? some websites the images load almost instantly when the next button is hit or when a picture is selected without resizing the image for as long.

[yoseinthehose]

@calctmnt

I think it has something to do with the speed of the webserver and your own connection. Feel free to correct me, if this is wrong.

[truegore]

thanks for the vid

[Tward120]

your a legend mate

[kushtra24]

You are big man very very cool !

thank's very mach

[eldiin21]

you're talking too fast :/

[m3xicanSuperman]

thanx , this was very helpful!

[Remiss63]

What a great script. You explanation is quite clear. Thanks!

[altovaco]

Excellent... excellent... excellent tutorial!!!!

Well done!

[merentes]

Great Great!!! Thank you very much!

[jimamily]

A few years back, because of the lack of technology, search engines bypass sites that use an Ajax dashboard. Search engines were not programmed to detect java scripts and thus SEO bots do not list them in the search results, instead they only show crawl-able static websites.

Ajax Dashboard

ajaxdashboard(Dot)com

[sachiokun]

Thanks man I just follow your directions, and 5 minutes later I had it working! Thanks for the help, I'm from Argentina, so greetings from over down here!

[eairnod]

you are the KING!!!!!!!!!!

[NTL808]

thanks for this video, but if i have like 300 photos, i have to manually link them all to their original source? or is there an easy way to do it?

[eradfsvaerv]

and, it is possible just to add the lightbox as a part of an existing page, or it has to be on a separate page?

If yes, were can I find info about it?

[alexbigeli]

but then, how do I add this file into an already built webpage? I already have my webpage done, can I include this image source into one of the pages? please let me know when you can

[profnabil91]

aku baru post aku punya, dalam bahasa melayu. tengok lah. :)

[p78078]

thank you so much

[adamread8888]

hi i also have some jquery on my site how do i stop the jquery or make my lightbox work over the top of it?

[broseld]

I have a question. When I upload my page on the internet, an error occurs:

'builder' is not defined and 'null' is empty or no object.

But when I view the page in Live View it works!

Can you help me with that? I've tried everything!

[broseld]

I have a question. When I upload my page on the internet, an error occurs:

'builder' is not defined and 'null' is empty or no object.

Can you help me with that? I've tried everything!

[ICII0]

thx man! very helpful! ;)

[pakt40]

Thanks for the video. I have been pulling my hair out trying to figure this out and you cleared it right up for me. Thanks a ton!

[Hades3k]

Thank you so much for this tutorial it helped explain the code for us simpletons.

[CriminalCandyscum]

Thank you SO MUCH! <3

This thing almost made me cry just because I couldn't get it to work! xD

So really, really thank you :3

[zeechceez]

how do I do this on videos?

I've seen sites such as facebook esc....using similar effect like this on videos.

how?

[koyikabuto]

Thank a lot Dude! u are the Shiznit!!

[radabideen]

thank youuUuu!U!

[lemona666]

thx ;)

[Niynia]

it only works in live view for me, as i give it a try in safari, image preview comes up somewhere at the bottom of the page. gutted.

[jcage007]

yo man im getting really frustrated this code doesnt work. why its so confusing

[DubHacka]

Wanna say a thankyou because believe it or not your helping alot of new and young website developers out there. youtube needs more easy-going people like you!

[ArkQueue]

Worked like a charm! I put the pictures in a separate folder inside my website images folder and had no problems. Very good, fool-proof tutorial if you follow the steps exactly or are savvy enough to make minor changes.

Thanks!

[bazwacky]

excellent thanks

[grubbyseismic]

Thanks man! Awesome tut', but the sound's *really* quiet! :D

[grubbyseismic]

@grubbyseismic You're not goin to believe this: I had my headphones plugged in... Fail!

[7orqu3]

i got it to work and whe the pic opens up all the effects are ther and the close button everything works great but when i try to put more than 1 pic it doesnt give me the option to move to next or previous when the pic is open any ideas ??????????

[Swaggerty14]

Hey man im a vector artitst and i have sped up vector vids on my page could you check one out and possibly subscribe...Id love any way to help me approve..I really want to network with other vector people on youtube...thanks!!!

[Blipware56]

Thanks this is great, I have cs4 and it works with this but, when I preview it and click on one of my images, it doesn't come up with the lgihtbox or anything, it just opens up a html file with the enlarged image. Can you help me?

[Nickkisixful]

you are an awesome tutor!!

[Reqrezentin]

Awesomeness

[Animeabe]

thank you for this! great tutorial

[breslinv]

brilliant and simple, thanks for the tutorial!!