jQuery Lightbox 2 of 2

http://bit.ly/GoDaddy-Hosting-Sale Check out these great GoDaddy Hosting Plans!


This is part 2 , here is the link to part 1:

http://www.youtube.com/watch?v=75188CuRmSg


In this dreamweaver tutorial by James from http://www.dreamweavertutorial.co.uk we will link thumb nail images to larger images and use the jquery lightbox plugin to animate a pop up gallery for the images in our web page. You can use the images in a jquery slideshow, or animate a single image on a page in a lightbox popup.


where to get the lightbox plugin:

http://leandrovieira.com/projects/jquery/lightbox/


This dreamweaver tutorial will also show you how to download the files and set up the js lightbox on in your html and css. its very easy to use the jquery lightbox plugin if you know how.

follow me on twitter:

http://www.twitter.com/dreamweaverman

my RSS feed for dreamweaver tutorial updates:

http://www.dreamweavertutorial.co.uk/feed.xml

Category:

Howto & Style

Tags:

• jquery lightbox
• jquery slideshow
• js lightbox
• lightbox js
• jquery image gallery
• lightbox popup
• jquery lightbox plugin
• jquery light box
• lightbox with jquery
• jquery lightbox video
• jquery lightbox html
• dreamweaver tutorial

[md1997]

AMAZING VIDEO. Thanks. One question!

It doesn't show the close button or the left and right ones.

[DreamWeaverTutorial]

@md1997 hi, I just messaged you and then saw this message. the arrows are not showing because the JS file is looking for the images in a certain location. If you put the arrow images in a different place than in the tutorial, maybe an extra folder you placed them in then you will need to type the path into the javascript file. Just search using find and replace in the JS file for one of the image names and then you will be able to change the paths

[williamhobson62]

i followed the steps exacly but absoultly nothing happens, all that comes up is the bigger image in a diffrent page. is it to do with the thumbnails being inside a overlay div thing?

[DreamWeaverTutorial]

@williamhobson62 if nothing happens and assuming you coded the html correctly then you have not connected the script hooks correctly.

[ChickCelineCS]

@DreamWeaverTutorial

So how do u connect script hooks? Does this video explain such thing, or any complications that may ocure? No it does not.

Cuz i checked, triple checked this tutorial, with dreamweaver next to it, followed every step, no luck..

[DreamWeaverTutorial]

@ChickCelineCS I show you how to do it in the tutorial. All you need to do is watch and copy. There should be no complications unless you have attention deficit disorder. If you drop the attitude I might help you. Put it online and send me the link and ill find the problem in 3 seconds flat.

[Kezazaa]

hey mate, question - i wanna use this to make a portfolio page for someone. That means i need to click on a like picture, and then many pictures come up, and i able to use this meaning - can i have 4 pictures on page, yet when iclick on each pic, they have different pics than on page?

[ChickCelineCS]

@williamhobson62

Same here

[lalameds9]

THANK YOUUUUUUU!!! ♥

[duncanmagee]

Hi, what did you do between 0:30 and 0:40? I don't see how to set it as a link or press OK,

[DreamWeaverTutorial]

@CandysCreations Hi, Go to the website, it has full code examples and written instructions. its Copy and Paste. - James

[trolt69]

Thanks for the tutorial! I finally found one that made it simple to understand for a newbie like me and it works!!

@ernesto95guitar I too have the same question. Did you figure this out? I have several thumbnails on the page, but want each one to launch and be able to file through 3-4 images that are not shown on the page. ie: a thumbnail of a web site & when launched shows different screens.

Can we use the same tutorial with minor modifications, or do we need to use something altogether new?