Installing and activating lightbox 2 into your web site using dreamweaver

[wdesignstudio1]

Thanks so much for a great, easy-to-follow tutorial ethernet kid :)

BreatheAlew, it might sound simple, but have you made sure you have placed your lightbox2 folder into the root folder of the site you are building? I made the same mistake where I previewed my page, it didn't work as expected, but I had forgotten to pull in the lightbox2 folder... hope thats your problem as well :)

[banshi68]

my name is mikey monotone I am a robot

[BreatheAlew]

Hey Ethernet Kid, Im having this same problem where the photo just shows up on the left side of the page when i click on it in the browser. Ive checked the css file, did what you did to the js file, can you help please...?

[mags62ish]

Good tutorial, many thanks. Unfortunately, it doesn't work on my pc at all. I get the thumbnails, but nothing happens when I click on them in any browser :o(

[donriddick]

can you make a tut, how to make the gallery content then?

[jollylau08]

thank you very much , help me a lot!

[AirForceSoldier89]

AWSOME TUTORIAL DUDE ! :D im having problems with the "NEXT and PREV" buttons they dont appear on my pictures what am i supposed to do so i get does? and how i make them work ?

many thnx Mike

[sweetcheeeeese]

BIG HELP THANK YOU

[badgerkins1991]

um it doesn't work for me for some reason. when i click the thumbnail, the large image appears wtih no effects. no white border, no darkened background, just the image on the left side. i follwed you steps but why is this happening? 0_o

[Mr1970Phil]

@badgerkins1991

That was the same for me too!

[hippopotas100]

@Mr1970Phil throw the folder into your site folder if that doesn't work make sure everything is typed in correctly for it can be case sensitive.

[indiciaobscure]

Thank you so much! Wonderful straightforward info!

[lautaarmy]

thanks man!

[colourtherainbowow]

Does where you put the 'lightbox2' folder matter?

[DJnaturalselecta]

Cheers mate ive got it working where im displaying images from the filename being stored in a database and the file stored in a directory

[sandratenz]

very useful and straightforward, thanks!

[eherothundergiant]

Thank you. Your tutorial is great.

[prickelyheat]

can this be used on commercial websites?

[EthernetKid]

@prickelyheat yes

[Bezmo871]

This is great! Very easy and simple to understand :) thanks a bunch!

[javidee12]

THANK YOU MY MAN!

[jasmir19]

@ chelcito787 , Me too - it works perfectly in the preview, but doesn't work when I upload to the server. Have you managed to figure it out?

[chelcito787]

only works in preview , when everything is uploaded on to the server it doesn't work , i've done this several times, watched your video to make sure i was doing it right (and was) but still doesn't work..

[siddhuisasuperstar]

i viewewd many videos on how to keep an pop up everything failed after i lost hope i found video and it worked like an magic thanks a lot i done it in my first turn thanks a lot

[NicAndNat1]

Great video. I have been reluctant to start using JS as am fairly new to web design. Every time i tried to use it it just wouldnt work This tutorial was simple and easy to understand and helped me a lot. Thanks Ethernetkid!

[EpicSoftworks]

I've got a video about Lytebox, it doesn't need as much scripts and is lighter, faster and easier to setup. Give me a chance and watch my video. Leave good comments plox.

[droid740]

This put me to sleep.



[dricojar]

Thanks a lot!!!!

[zenonithus]

Hi, great tutorial!

just one question: how would you link higher resolution versions of the images to the lightbox versions?

I've seen this where you click on the lightbox image and it takes you to a high res version.

thanks

[Joooooakim64]

At 5:45, Why do u change the picture script? And which picture do u change it in to?

[RonaldLochard]

you the man

[Grayfox215th]

Hey, I rarely comment mainly because I'm lazy as all hell but this was hands down the best tutorial I've come across. Really simple and well done. I'm fairly above average when it comes to these things but for some reason I was having issues getting lightbox to work and this was an amazing video to get my items working. Great job!

[Xoda000]

thanks for the vid! for straight forward and helpful.

[anyways345]

is there a way to get rid of the blue line around the picture?

[crappymeal]

@anyways345 click on your image go to the propertes and put 0 in the border box

[jhowellkids]

thanks awesome

[BoBShmiFF]

When I click on the image live on the web it pops up in larger image on a page of its own and not on the same page as the smaller image. What is going on?

Thanks!

[Xoda000]

@BoBShmiFF refer to 4:10 in the vid. My guess is you haven't properly changed the path name for the "src" section. If you're using Dreamweaver, a good way to check if this is the case is to click on the JavaScript files (like Prototype.js) that are being referenced by your html document and see if you can see if you get an error rather than the JavaScript code. I'm talking about the area right below "file/edit/etc".

[MilksteakJellybeans]

thanks dude

[wbmkk]

I tried having everything in one folder, but it wasn't working properly .. see my comment from yesterday.

I tried again and copies the 3 separate folders (images, css and js) then everything is fine. I just changed my previous images and css folder to images2 and css2.

Many thanks EthernetKid ... a very good tutorial and easy to follow.

[Rock4oneOTC]

Thanks, Great job!

[wbmkk]

I did everything as per your very good instruction video and everything works except there is no next / previous buttons on the screen.

if I click on the image it moves to te next one, but the next button would be helpful.

I changed the js file to lightbox2.

Any advice would be appreciated.

William (UK)

[xCaucashx]

@wbmkk did you figure out this problem, as i have the same one

[NicAndNat1]

@wbmkk

Dont know if this is still helpful for you but if you go to layout.css you will see:

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

change the background url to (../lightbox2/prevlabel.gif) and (../lightbox2/nextlabel.gif)

hope that helps. Took me a while to figure it out 

[wbmkk]

@NicAndNat1

Many thanks for that .. I haven't used Lightbox since I tried it when I wrote my question and looked for a reminder on Youtube. SAw my name, then your reply.

Everything sorted now

Kind regards from Whitley Bay, UK

[Thunder081]

@NicAndNat1 thanks alot! I was stuck on that bit too.

[KayakingEll]

@wbmkk same

[damallis]

Thanks :)

[TheCreativeItch]

awesome job, thank you very much.

[cristianegro12]

its not working. am I the only one...

[Calgurllw]

Thanks. This was really helpful!

[SteveRedFox]

Thanks a lot man, this video has been a big help!

[PokerClinicOfficial]

Quick question.. why the hell are you breathing so hard?

[HEJJAGAEGERALLT]

I LOVE YOU MAN <3!

[tweb14]

i love u so much right now dood

[OE47]

Works fine exept for one thing:

In google chrome the next and previous buttons doesn't appear, but you can get to the next picture.

In Firefox Close doesn't appear and have to close it by pressing somewhere else on the site.

In Opera next and previous appear but the close button is a picture that doesn't load but you can press it.

And for Internet explorer it's the same as Opera.

Anyone knows how to solve this?

[herlaug]

For some reason I get links, although when I click the links lightbox is used to open the image. I can't seem to figure out what I did wrong. I want the pictures (thumbnails that is) to be a certain size.

[undertakerguru101]

@herlaug I get this too, can someone please help.... it is really annoying :S

[UptonGirl4]

I'm impressed with both your work and our presentation!

[crunkss]

doesn't work in safari.

only Firefox

[Horror92]

i got a question man, i would be very greatful if you or anyone else who knew the answer could tell me, ar would this work with videos aswell? like have a thumbnail of a video and if you click it you get the same loading screen on the same page and just plays the video at full size? cheers

[vcuramstrack]

Hey EthernetKid...I followed your instructions to a T, and for some reason, I'm the "next" and "prev" images aren't appearing on my website when I open an image. Also, the "loading" image isn't appearing as well.

[scolks]

Hi i am using CS3 followed instructions but lightbox did not open, the full image just opened in another window! just cant see where I am going wrong.

[TutorialKing100]

Do you know of any pre configured comment scrips that use mysql and php. I need it so i can add a comments section to my website. BTW i am using HTML so i need one that can be called using HTML. Thanks and nice video.

[Petey0707]

not bad but it didn't work at all, all it does is redirect me to a separate page with the image rather than have it pop up, idk maybe im doing something wrong = /

[AngelaNB]

Thank you so much! This was awesome, simple and quick :)

[opicakuz]

Thx a lot, man!

[unclecabo]

Thank you for posting this.  It was very helpful.

[trampstarpfc]

Thanks, massive help!

[dougoin]

This tutorial is excellent! I have one problem though. I really hope you can help. I have finished my lightbox for my webpage and it has 4 images in the set. It works perfect!

The problem is I want three more sets of images on the same webpage, each with four images. When i try to put an additional set in the webpage doesnt fully load and the lightbox expands to the full size of the screen and flashs. I hope someone can help, or will I need to create a new webpage for each image set.

Thanks

[israelda1]

For some reason I can not get the close, next, and preview to appear when my image shows but the description is showing. How do I get this to work?

All my images are located in an "images" folder for the close, next, & preview.

THANKS!!

[israelda1]

@israelda1 - never mind I figured it out :)

[dougoin]

@israelda1 Hi, if you can help How did you solve this problem? I have the close button working but the next and previous buttons do not appear. Can you help me solve this Thanks

[israelda1]

@dougoin I just made a new folder for all my images. But the close, prev, next finctions I saved outside my images folder then the path found it. Thats when it worked.

[nuclearbombada]

@israelda1 this method didn't work for me :(

It still couldn't find the Prev and next button.

[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?

[paranoic11]

hey Ethernetkid,

hope you could give me some extra tips for this...

actually, i wanna install this lightbox so, when someone enters my website to get opened automatically right away, or within 10 second of using website which might be a better solution. of course without user should not be clicking on somewhere to open it. this would be an advertising solution.

so could you share any more tips how to get this done.

this is great so far, keep on ;)

[Sera9080]

Thank you sooo much !

You helped me for my end Exam :P

[soonbig]

It worked! Thanks a lot.

[jano10y8]

Muchas Gracias, Funciono perfecto!

Inao - Chile

[amatang]

Can anyone help me out... my arrows aren't showing up but I have the ability to click between images.. thanks

[demetzjump]

Thank you very much.

Nice tutorial... (HD)  =)

[30dagar]

thanks helped a lot. but why have not I (next label), etc.

only (closelabe. ..)? help

[asphaltjunkiez]

i followed the instructions from this and other tutorials and nothing.. images still open in a new window ...

[audiosyncratic1989]

@asphaltjunkiez I have the same problem, did you find a fix?

[BofSerenity]

Hey man that is a big help Thank You.

[EthernetKid]

@BofSerenity Anytime thanks :D please subscribe

[bluallstr]

thanks! very helpful!!!!

[baranko3222]

Its very helpful ty man

[baranko3222]

It's very helpful ty u ..

[UnderTheWig]

Awsome tutorial really useful!!!

one question!

How do you do to get the arrows to appear to change picture??

thx again

[TheLazyGenius]

Very helpful and informative tutorial.

One question.

Do did you use Fraps to record your footage and Sony Vegas to edit your video?

[EthernetKid]

I use camtasia studio 6 to record and edit

[IhsSthlm]

Hi, do you have any idea how i can put Lightbox2 in my flash website gallery?

Thanx!

[yeppayoun]

Thank you! It worked~!

[sakurablue15]

Thank you for the tutorial! It worked like a charm!

[hotxbunny92]

I don't recommend anyone mashing all the files together, as it's easier to manage and sort files on your website. Just keep them in the folders provided and you shouldn't need to change the js/css code provided at all.

[Remiss63]

Good job!

[EthernetKid]

thanks

[llennnell]

Thank you - worked first time - recommended!

[whosyadaddys]

great video easy to follow much apprecaited :-) do u have other tuts for dreamweaver

[EthernetKid]

Yeah sure, send me a message if you want a video.

[fartass23]

to get the NEXT and PREV to work place both gifs in our image folder.

[xCaucashx]

@fartass23 THANKYOUUUU!!!!! soo much i was going crazy tryna figure it out !!

[SimpleIsa]

Uhm hey, I did everything you told me.

So I decided to do all the things you do.

And it worked! Thanks for helping.

BUT.. I've made a new website, and I want those lightboxes too on that page. And it just doesn't work. When I click the image it opens a new page.

So someone told me that it has something to do with the scripts and stuff. I really linked everything the right way!

And then I read that you have to do something with the"<body onload=" But I just don't get it.

Can you tell me? x Laila!

[NZMacStreet]

Thankkk youu

[angelodeathrpr]

Thanks alot I tried for 2 hours to get this effect but once I found your video I got it in 10 minutes!!

[EthernetKid]

nice bro

[bumfuzzle]

I spent a hundred hours trying to get this to work on my own. With your tutorial I had it working perfectly in one viewing. Great job. Thanks.

[steinvader]

thanks man just amazing I really apreciate your work you're the man

[SIRgabzalot]

Me again, I manage to get the video to work as well thanks to these instructions. The problem I am now having is getting it to operate online. I wonder why it won't work online, but it will locally on my computer.

[SIRgabzalot]

Thanks! This worked. You are a little genius. How do I do the same with a video. Does anyone know where to find a tutorial? EthernetKid?

[sadielola]

Thanks soooo much. totally works great

[br0wns0undsum41]

this video saved me from super rage... thanks man

[DRNOWSCHECK]

yea.. it doesnt work with me either

[numberLXXXIV]

great tutorial - thanks!!!

[darkrobes]

I'm ahving the same problem, click on the image and it only displays a larger image without any of the loading graphic, shadow or anything. can you please advise what the problem could be as i seem not to be the only one with this problem? thanks =)

[xdayz]

The same here. When I clicked the thumbnail, it only shows a larger image. Followed the steps. It's been 3 hours and I still can't get it to work.

[fatherfigurine]

Followed everything and double checked all the code, but for some reason when I click on the thumbnail image all I get is a larger image. No gray out, no caption, no loading wheel, not next button. Suggestions?

[steinvader]

I also wasn't able to see the next button and I sow I had a prblem in the java script code I've fixed it and works great If you want give me your e-mail and I can send you my files.

[amatang]

yo do u think u could help me out... im not able to see the arrows either and i have no idea how to fix it. thanks

[steinvader]

@amatang I think that the explanation here won't be useful If you don't know a bit of code, but if you want you can send me your email address & I will send you my files revised along with a sample and directions. The problem could be that the nextLinkimage & prevlinkimage are not specified in the lightbox.js file check it and write both missing routes they are in the top of the code past lightboxoptions=... HOPE IT'S HELPFUL.& THANK YOU ETHERNETKID.

[EthernetKid]

@steinvader No prob. Thanks for helpin out the kids. And in the js file, it worked for me. Is what you said an easier method? I'd be curious to hear it if you'd PM me

[Diamonddeath]

I followed everything exactly, but it's still not working for me. Instead of showing up with a lightbox effect, it opens in a new page. What do I need to do to fix this?

[LloydSimcoe]

Hi, I got the exact same end result as you! It displays my larger image in a new webpage. I was wondering, did you manage to sort this problem out?

[Setik01]

i tried to install lightbox a couple of times, but it never worked.

now it works.

thanks!

peace

[luvie11uk]

Many Many Thanks Indeed

Helped me Loads

[ClosestToHeaven]

Was having a tough time and you answered my questions. Thank you. 5 out of 5.

[EthernetKid]

np, glad I could help, please subscribe:)

[starnflame]

Thank you so much, Ethernetkid!!!! You rock!

[EthernetKid]

np, glad I could help, please subscribe:)

[cottageorgan]

Thanks a lot ethernet kid..you rule!! You've saved me a couple of hours of hair pulling..

[Pythoner]

Cheers mate, was clear, concise, to the point and helped me out!

[EthernetKid]

np, glad I could help, please subscribe:)

[jensayswhat]

Thank you for this.

I love you.

[TtakingOover]

Thanks a lot man! 5 stars

[antechamber]

After watching most of the Lightbox 2 tutorials on YouTube, I found yours to be the most helpful. Thank you very much, EthernetKid.

[sannapixell]

very good tutorial. However I still can't work out how to link the popup photo to some URL? Is that possible at all?

Thanks,

Susanne

[askjjang]

thanks a lot ethernetkid!

[nayoofee767]

oǝpıʌ sıɥʇ ƃuıɥɔʇɐʍ ɯoɹɟ uʍop pǝddıןɟ pɐǝɥ ʎɯ ƃuıɥʇʎuɐ puɐʇsɹǝpun ʇou pıp ı

[EthernetKid]

lol

[kandyjet]

excellent tuto. my lb works charm !!! 15 min's only consumed.

[TrevOwnz89]

Thanks a million!!!

[leotheweblion]

Thanks for the tutorial! I'm building a website and thanks to this info it's looking much cooler ; )

[NAZMABADIS]

Thanks soo much for this.

Just a question though, how do i allign the images together so that they're not all over the place when i preview in firefox?

The first 2 rows are aligned properly the last one has images at all distances.

Cheers :)

[rakeshfx]

thanks ethernet kid.. nice tutorial..

[GracelynnCrews]

i am up to the point of linking the smaller to the larger and when i try to view it i just get "errors" it doesn't even open. it just says there are two errors? i have everthing in a "lightbox" folder. so i changed things like "js/prototype.js" to "lightbox/js/prototype.js" i didnt miss anything either. blaah

UHG

PLEASE help fast!

[Tirdfish]

Thanks for the lesson.

One slight problem, my thumb image, has a blue line around it, anyone know how to stop this from showing on live preview, apart from that it works great.

[EthernetKid]

In Dreamweaver, set the border to 0

[Tirdfish]

Thanks EthernetKid.

[EthernetKid]

No problem

[gloomseh]

very well explained :)

thanks for the vid, saved me a lot of strife!!

[saranni79]

Thanks for the very instructive tutorial. But it doesn't seem to work to have another css -stylesheet on the same page? I've tried and it works fine when lightbox goes solo but not when I'm integrating it in an already existing styled home page. Or do you have some tips on how to get it working?

[noktin]

Awesome tutorial Ethernetkid, it works perfectly. Thank you =))

[Phenphentwins]

it wont work...

i use a template?

[ebeste2]

Hey do you know of any video's on how to install shadowbox? Or thickbox? I've read tutorials and nothing works for me.

[Souldza]

Thank you so much!!!!!!!!1

[tomphotog022]

hey dude i am sorry i am new to this but i did everything u did and all it is doing when i click on a photo is zooming out if you could help me out that would be great thanks!

[ebeste2]

Yer the effin man! Thanx.

[kofukasho]

I've been stuck on this all night, but finally got it working after finding your tutorial ... thank you so much!

[mermaidcastles]

this is not working with me. help ? :P

[mermaidcastles]

hi, i'm using mac. and i can't do the extract thing. how??

[timmypaints]

awesome tutorial man! thanks~

[SamuraiZr0]

I gotta tell you this is awesome and so are you for posting this