Dreamweaver CS 5 Tutorial – Using the Widget Browser and CSS Lightbox Image Gallery

Video is ready, Click Here to View ×

This gallery is the result of combining css with the Widget Browser feature.
I used some css 4 with powerful rounded corners, using the border-radius and box-shadow properties.
Please check your browser compatibility first.

Mohit Manuja


Global trainers for Adobe products Dreamweaver and Flash cs5 with Actionscript 3.0, Mumbai, India.

Light box

Dreamweaver tutorial



Photo album

Widget browser



Adobe cs 5

small parts


Adobe training

Software tutorial


You May Also Like

About the Author: admin


  1. Yes it is sad since it is a fantastic program, thank you for your response back to me. I do enjoy Dreamweaver also and is this the main program that you use for creating websites.

  2. I was told by others not to use flash in building websites due to it not being seo friendly and causes large files. Others say it's out dated. What is your views please on this because i did a small amount at college a few years ago and enjoyed using it as part of my exam.

  3. Hi i am looking at building a new Dreamweaver Website and i will use your tutorials to help me out. Do you build a lot of websites using Dreamweaver once i get familiar with this program i was thinking of learning wordpress. Can you give me some good advice on what i should start with. I think Dreamweaver i could get familiar with quiet quickly but not sure on anything else. Your tutorials are very good Thank You.

  4. Thank you for your excellent tutorials on using a slideshow and picture gallery. I can see that i will learn alot from you. When building websites do you mainly use dreamweaver or do you use other programs. Thank You

  5. Hi sir, Do you conduct any classes around mumbai, as your tutorials are really helpful, and u seem like a great teacher too. Pls, lemme know as i am very keen to learn dreamweaver css6 from you. thanx.

  6. Cracked it – it was loading the jquery.js twice (don't fully understand why this stopped the second from functioning) but removing the second instance of "script src="js/jquery.js" type="text/javascript"></script" from the script solved the issue!

  7. Hi Mohit,

    Firstly a big thanks for the hugely useful videos (no matter what i've been struggling to do, i've always ended up coming back here for the best, easiest to follow solution).
    I've a query related to this – I've added the lightbox widget and all is working well, but I subsequently added the "Social Share links" widget to the bottom of the page with this lightbox on it and uniquely on this page the social share button does not work…wondering if you could shed any light?


  8. thank you for a nice and simple tutorial,but I have a question.when I tried to customize my gallery for mozila,as you show in the video,it doesn`t worked.the code was wrote right.why it doesn`t worked?

  9. Oh at first I just clicked on the demo image and changed the links at the properties window, that didn't seem to work so I just replaced the demo image link with my own image link by just inserting the image and replacing the demo image code, looks like that worked ^^ thanks though!

  10. Not working for me somehow.. I've inserted the widget and changed the images.. it shows the right way in design mode but once I open it in a browser you see the box but the images broken somehow.. wonder what I'm doing wrong

  11. thank you, this was very helpful. Could you let me know how to make the gallery thumbnails run all in the same line, rather then on top of each-other in a block as they are when you add more than 5 images?

  12. Thanks for the excellent tutorial! Question: I would like to be able to have a couple different galleries on my page and have each gallery load from a single image. I've been doing some research and nothing has worked for me as of yet. Any suggestions?

  13. hello, i applied the lightbox widget, it didnt locate the navigation buttons. how do i link them please? thank you.
    imageLoading: 'images/lightbox/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon
    imageBtnPrev: 'images/lightbox/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image

  14. I am wondering is there away to get this to work on a mobile device. I have tried it on a Samsung GalaxyIII and everything works fine except for the lightbox popup. The images dont respond to the screen width. Would like to be able to get the image that pops up to fit in the screen width.

  15. Thanks for the tutorial 🙂 I spent a long time looking for a gallery like this one. Allthough, I seem to have a problem. When I preview my webpage with the gallery in Safari the thumbnails work perfectly, but when i click on the thumbnails, it doesn't open the "image container box" but it treats it as a link and opens it in a new tab… would you happen to know why this is happening ? Thanks very much anyways 🙂

  16. Thanks for this tutorial was very helpful .
    I have 2 Questions for you:
    1-How i can publish it to my website and view it?
    2-I'm Using Mac's application iWeb, So if you have an idea about iWeb, how to bring the light box gallery to iWeb?
    But the 1st Question is more important.
    Thanks Again!

  17. Changing the image and thumbnails file names could get old quick. I use Fireworks to rename as a batch the image names to be sequential, and the thumbnails as well, perhaps with a prefix. You can use Fireworks to resize the images as a batch process, too, so they are all consistent sizes.
    Once you get the LightBox widget happy with TH1.img and 1.img, it can be reused as needed.

  18. Thanks very much for this.. I'm learning a lot, not only by watching and hearing what you say, but by picking up the way widgets are handled in general.. You're a very good teacher!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.