Image Gallery with Jquery Lightbox 3 of 3

Posted by: Admin  :  Category: Web Hosting Tutorials

Linux Cpanel shared hosting: 600 GB disk space, 6 TB bandwidth, free domain, unlimited databases and ftp accounts, web hosting cheap and pro at Hostony

Linux Cpanel shared hosting: 600 GB disk space, 6 TB bandwidth, free domain, unlimited databases and ftp accounts, web hosting cheap and pro at Hostony

Host Unlimited Websites For .88 ! Unlimited Hosting, Free Domain, MySQL, PHP, CGI, SSL, FTP, Stats, 0 google adwords, E-Commerce Included, Dreamweaver Ready, 30 Day money back guarantee This is part 3 here is the link to part 2: In this tutorial by James at 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 This is a great tutorial for learning how to postion elements and for using image gallery scripts. Follow me on Twitter: My RSS feed for Dreamweaver Tutorial updates:

Linux Cpanel shared hosting: 600 GB disk space, 6 TB bandwidth, free domain, unlimited databases and ftp accounts, web hosting cheap and pro at Hostony

23 Responses to “Image Gallery with Jquery Lightbox 3 of 3”

  1. LRebisch Says:

    Thank you! This helped me understand how to position thumbs and create my own slideshow..I don’t like to just copy and paste code, I like to know what is goin on… so thanks!

  2. modelzmoneymurda Says:


  3. ChrisBrandsborg Says:

    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?

  4. DreamWeaverTutorial Says:

    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

  5. ChrisBrandsborg Says:

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

  6. ChrisBrandsborg Says:

    Okay, I can try that! Thanks! :)

  7. DreamWeaverTutorial Says:

    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

  8. ChrisBrandsborg Says:

    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:)

  9. MrJoel8881 Says:

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

  10. D1230CP Says:

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

  11. keeezz Says:

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

  12. DreamWeaverTutorial Says:

    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/activision/cod4. well its the same with the images.

  13. MultiNickky Says:

    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

  14. MrKWonder Says:

    Really neat video thanks a lot! But every thing works smoothly until previewing and opening the lightbox for the first time! i think it is down to the folders i downloaded being inside my own website folders as i was hoping i could use this as a page on a website i am making! if this is right could you try and explain how i can fix this problem in a simple way?! thanks alot

  15. DreamWeaverTutorial Says:

    they mate and have a litter of little lightbox galleries but other than that, probably not much else happens.

  16. mslisamurai Says:

    what if you have more than one gallery on the same page?

  17. DreamWeaverTutorial Says:

    hi you can go into the lightbox JS file inside of dreamweaver and click inside of the open file and go to EDIT>FIND AND REPLACE. then type in ‘opacity’ you can adjust the opacity which is currently set to 0.8 and just to the left of that you can set a background color. – James

  18. epics7 Says:

    Good video. Is there a way to display the images without making the background go dark? Example, I have a design made in Fireworks that I want to use. The layout is a white box on a black background. There is a white line towards the bottom that separates the thumbs from the main pictures that will display in the large space. Is this possible using Jquery with the images showing up in the space? Like I can do in Flash.

  19. salevukovi Says:



  20. Raneosa Says:

    Thanks alot mate for this USEFUL video, really helped me
    but i have one question , if i have a large image , how can i make it fit to screen when i click the pic ? i mean i dont want the large image to go farther than the browsers window, hope u get it, and thanks again

  21. lenegand Says:

    thnks i will appreciate i am designing the real website in the backround so please that is not the original i am playing around as i have no experience in web site creation i have been studying html online and with different tutorials i am now onto php and mysql. so it will be a while before the real site is up and running. thanks for the comments appreciated .

  22. DreamWeaverTutorial Says:

    Hey, yeah i had a look at your floating menu. looks pretty cool.

    yes you can get them to auto revolve but you will have to set an interval and will need to know a bit of javascript to do that. If i get a chance ill write some code but it wont be for a few weeks. website looks good glad you got the floating menu to work ok and good to see you made some icons for it too.


  23. lenegand Says:

    thamks a lot great tutorials i set up the floating nav bar on my web page i haven’t finishe all the pages yet but you can check it out.. on my web design page in the small thumbnails i have set up a j query light-box/.i am busy doing the light box gallery. is it possible to do the gallery so it plays automatic when you click on a thumbnail. thanks and keep up the tutorials.

Leave a Reply