Image Gallery with Jquery Lightbox 3 of 3

Loading...

Sign in or sign up now!
Alert icon
Upgrade to the latest Flash Player for improved playback performance. Upgrade now or more info.
12,028
Loading...
Alert icon
Sign in or sign up now!
Alert icon

Uploaded by on May 17, 2010

Host Unlimited Websites For $3.88 ! http://bit.ly/Powweb-Hosting-Sale
Unlimited Hosting, Free Domain, MySQL, PHP, CGI, SSL, FTP, Stats, $150 google adwords, E-Commerce Included, Dreamweaver Ready,
30 Day money back guarantee


This is part 3 here is the link to part 2:

http://www.youtube.com/watch?v=Jyl86HZJ5Hg

In this tutorial by James at http://www.dreamweavertutorial.co.uk we will be installing a custom image gallery with a layered alpha transparent polorioid effect background image.

We will create the free image gallery with minimal html and css and then attach the image gallery to the jquery lightbox plugin which will animate a larger image into the center stage of your website.

Your website visitors can then click through the images as if they were a slideshow gallery or peruse the images individually.

The image gallery is available for a free download, here is the link to the Dreamweaver Tutorial exercise files:


http://bit.ly/lightbox-gallery-files


This is a great tutorial for learning how to postion elements and for using image gallery scripts.

Follow me on Twitter:

http://www.twitter.com/dreamweaverman


My RSS feed for Dreamweaver Tutorial updates:

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

  • likes, 1 dislikes

Link to this comment:

Share to:

Uploader Comments (DreamWeaverTutorial)

  • Everything worked perfect until the "lightbox-screen" (I copied everything you did, and past it where you did) but when I browse my site, and press an image, it just opens up normal (I don't have the option to push next or "close" etc... It's like nothing happened! But everything else worked perfect so thank you! Put if you know what I could have done wrong, please let me know:)

  • @ChrisBrandsborg Hi Chris, go to my website and look for the written tutorial of the same name. There are full code examples for you to copy and paste. Check for errors based on the code on the site

  • @DreamWeaverTutorial I think maybe I found the problem! Do the large pictures need to be 500 x 300 ? because my pictures are way bigger! ^^

  • @ChrisBrandsborg No the picture size can be whatever you want it to be within reason. If you have not fixed it then upload your page to the web and ill tell you what the problem is. - James

  • Great video but you know when you link the big image with the tumbnail ones right how do you do it in php or html if you are not using DW

  • @MultiNickky look at the code generated on screen and copy it. its just a path to the images its html already, its not dreamweaver code. Just like if i asked you to find your start up icon for your favourite game like COD4, how would you find the start up icon in your computer? maybe, c drive/users/programfiles/activ­ision/cod4. well its the same with the images.

see all

All Comments (22)

Sign In or Sign Up now to post a comment!
  • THANK YOU SO FUC#ING MUCH!!!!!!! I'VE BEEN TRYING TO CREATE THIS TYPE OF PHOTO GALLERY FOR MONTHS!!!!!!! DOING ENDLESS GOOGLE SEARCHES AND YOUTUBE SEARCHES FOR TUTORIALS. THANK YOU AGAIN DUDE YOU FUC#ING ROCK!!!!!!!!

  • @DreamWeaverTutorial the html file or the link? because I have no link right now.. I haven't published it yet! I don't want to do that before the whole website is finished :) But I can send you the "html" file, with the images in it, and you can see what's wrong?

  • @DreamWeaverTutorial Okay, I can try that! Thanks! :)

  • love ur tuts.. but how do you play asf videos coz i have bben trying check on the internet there are no sources.thanks.....

  • Hey james! I have been viewing your videos for quite a while now! I think they are the best areound youtube! thanx James!

  • If you wanted to use escape key to close the large image, how would you approach that ?

    Thanks in advance

Loading...

Alert icon
0 / 00Unsaved Playlist Return to active list
    1. Your queue is empty. Add videos to your queue using this button:
      or sign in to load a different list.
    Loading...Loading...Saving...
    • Clear all videos from this list
    • Learn more