Simple way to add an image gallery (lightbox) in Dreamweaver

Adobe Dreamweaver CS5/5.5 has an easy way to insert content into your web pages called widgets. Using the Widget Browser, I'll show you how to add a JQuery lightbox for a gallery of images to a page really easily (without coding!).

Category:

Education

Tags:

• Adobe
• Dreamweaver
• widget
• browser
• widgets
• lightbox
• jquery
• image
• gallery

[keith171]

Please help...i can do this in a new html page. But when i put it in an existing html page and view it...it doesnt have the rev, next and close buttons or the load image in. It works in live view but not in browsers

[askbrianwood]

@keith171 I am betting that the links to the javascript, etc. are not in the header and the image links may be wrong as well. If you open the page that it works in Dreamweaver and go to code view, you will see links to javascript and css files. In the page you have where it doesn't work, those same links need to be there. They also need to point to the files in your folder.

[dekerrede]

i had trouble to make it work in browser - it worked in DW Live view only..

my solution was to first insert this widget in DW (even i know it will not work in browser), then copy lines of code(script part from widget browser) and copy it over script part code lines which DW automaticly inserted..

after that it works fine!

[steviemack1984]

Brilliant tutorial mate thanks

[sciarappa203]

I followed this tutorial at least 7 different times and never made a mistake I got this working on a blank site. However, when I place this in my already made site everything works except when I click on the gallery the image container box doesn't show up. instead it opens up a new page with only the photo on it. Any Theories?

[DaveDLF]

AWESOME!! Thanks bud! Great video

[keith171]

@askbrianwood Thanks for the reply, i ve been working on it for a while and i can get it to work if i use the save preset button and drag all of the coding, css and java into a new website. The image links are fine. I was going through fourms and i found this is an issue with a lot of people. I think it might be because i already have an images folder after i brought in my website design from photoshop. But im still sure how to do it. Thanks anyway.

[jaykid160]

Hi this is great tutorial. If i want the lightbox on top of a slice i made in photoshop, how would i do that? When i insert the lightbox, it goes to the bottom of the page, not the middle on top of the slice i wont.

[Stonecoldmark0316]

@Stonecoldmark0316 ti= to house=hours