Adding an Adobe Bridge web gallery to a site
September 24th, 2009
For the past two versions, Dreamweaver has come bundled with Adobe Bridge, a program that’s designed to make it easy to sort through visual assets, such as photographs, PDFs, and Flash movies. The idea behind Bridge is that it gives you quick access to items that you might want to work with in different parts of the Adobe Creative Suite. It’s particularly useful for Flash developers who want to build part of their movie in Illustrator or Photoshop. However, most Dreamweaver users seem to remain blissfully ignorant of its existence; or if they do know about it, they leave Bridge firmly shut.
That’s a shame, because Bridge has some very useful features. I use it frequently for batch renumbering my photos and for selecting photos to use in websites. The thumbnail images can be resized, making light work of choosing the best photo to zap into Photoshop and optimize for a web page. The other great feature in Bridge is what is called the Adobe Output Module. Among other things, this creates Flash-based web galleries of your visual assets. It’s incredibly easy to use, and produces really nice results.
The only problem is that the HTML file generated by Bridge makes the Flash movie fill the entire browser window, making it impossible to incorporate the gallery into an existing website. Well, it’s not really impossible. All it needs is a little editing of the HTML and JavaScript. I have created a new tutorial with step-by-step instructions to show how to incorporate an Adobe Bridge web gallery into a website. I hope you find it useful.
Entry Filed under: AJAX/JavaScript, Dreamweaver, Flash
19 Comments Add your own
1. Jusaniya | October 9th, 2009 at 3:14 pm
Thank you, thank you, thank you! I have spent soooo much time trying to figure out / research how to get a photo gallery onto my new site I am building. I finally found the Bridge gallery which was very simple to make, but getting it onto my site was another issue. Your step by step tutorial was very clear and I finally had success! Much appreciated!
Jusaniya
2. Josh | November 7th, 2009 at 7:27 pm
hey,
that tut was amazing!! thanks alot really appreciate it.
how do you incorporate it though when using Nano CMS? through php. because I took over a site created with php, and I have to edit it through NANO CMS
3. David Powers | November 7th, 2009 at 10:10 pm
Glad you found it useful. Sorry, I have no idea how you would implement it with Nano CMS. Never even heard of that content management system. Too many things to keep track of in web development these days.
4. Tony | November 19th, 2009 at 6:49 pm
hi found your artical very useful followed it to the letter but i still cannot get the gallery to show up ,just a grey box, am i missing something here ?Can’t see whats wrong any ideas so close .
5. David Powers | November 19th, 2009 at 6:59 pm
The best way to get help with web display problems is to post a question in the Dreamweaver forum. Include the URL of your problem page, and someone should be able to assist you. Although you say you followed my tutorial to the letter, you have probably missed a step or misinterpreted one of the instructions.
6. Wonder Wyant | November 26th, 2009 at 1:42 pm
Wow, great resources on your blog! I’m off to look for one of your books.
However, today is my “you need an editor” day. I’m going about pointing out typos on the web so that I may pawn myself off as an “editor” and hence, ergo, thus get a paid position as a “VA”.
Last sentence, paragraph one; “or if they do know about it, the leave Bridge firmly shut”, “the” should be “they”.
7. David Powers | November 26th, 2009 at 1:52 pm
It is now.
8. Ladd | December 10th, 2009 at 6:54 pm
David, VERY nice information. Your “Opening Specific Tabs and Panels from Another Page” was perfect. I only commented here as it was the most recent posting at the time. I WILL pick-up the CS4 essential guide just because of what I found today! Thank you!
Ladd
9. Erin | January 6th, 2010 at 2:36 am
I am having the same problem as Tony. Does anyone know how to fix this? It works fine in preview but wont work when I host it, but the architecture of the site is okay. help?!?!?
10. David Powers | January 6th, 2010 at 8:46 am
@ Erin, The only way anyone can help with that sort of problem is by looking at the live page. Without a URL to look at, it’s impossible to say what the problem might be.
11. Judy | January 12th, 2010 at 11:20 am
I am also having the problem of not having the web gallery show up on the site. The boarder shows up with the info I placed, but not the pictures–although when I preview it in my browser it it seems to work fine. I uploaded, but there were not specific instructions on how to do that part, so not totally positive I did that right. Everything else I think I followed exactly. What am I missing?
12. Andrea | January 21st, 2010 at 4:24 am
Dreamweaver is not compatible with Windows 7. Could you give some suggestions to resolve the issue.
13. David Powers | January 21st, 2010 at 2:09 pm
Dreamweaver not compatible with Windows 7? If that’s so, perhaps you can explain to me how I have been running Dreamweaver CS4 without difficulty on Windows 7 64-bit for over a month?
The only problem that I am aware of is a bug with not selecting the site root correctly in the Site Definition dialog box. However, this affects all the latest versions of Windows. See http://forums.adobe.com/thread/478327 for an explanation. The Adobe website also has an extensive FAQ about compatibility with Windows 7.
14. Judy | January 26th, 2010 at 12:44 pm
I am having a problem with the pictures not showing up in FireFox. They seem to show up fine in Opera and Safari, but not FF. I can see the frame of the web gallery and the extra info I put in there, and even the number of pictures–just not the actual images!! Does anyone know what the problem could be with trying to see them using FireFox?
15. Nuria | February 9th, 2010 at 3:53 pm
Seems like my problem is recurrent. Your tutorial is AMAZING and works perfect locally, but something happens when is in a server and the gallery doesn’t display; tried 3 browsers, Mac and W, and even 2 servers. I tried both methods also, iFrame and code, and had the same result. Here is the URL. Hope you can help.
http://iworldclassdesign.com/fgtemp/gallery.html
16. Nuria | February 10th, 2010 at 12:19 am
Just want to let you know that I tried something else and it worked. I’m a mac user and always test my work in a PC, but this time I went further. After trying many things over there that also failed, I finally found the perfect combo: re-created the gallery in Windows and uploaded it from there… it worked.
Don’t know if it was a software issue, or a Mac “thing”, but at least is working now. I wonder if exporting the gallery from Lightroom2 would behave the same…will see.
THANK YOU very much again for your excellent tutorial.
17. Paul K | February 17th, 2010 at 2:03 pm
Dear David, Thank you for your great tutorial on embedding photo gallery from Bridge into existing page in DW. Very helpful to a novice website builder..I have one issue that I can’t seem to resolve. After embedding the gallery into my boiler plate website page inside the main content box…it leaves a white column down the right side which seems to be an attribute of the actual gallery itself..I embedded it just as your instructions state…first the div tag, then the Iframe..I have searched each css for each element and have no borders, margins, padding I can find anywhere that is causing this..it looks like perhaps a space left for a scroll bar but no scroll bar appears…I don’t know if that is clear but any suggestions?
18. David Powers | February 17th, 2010 at 3:10 pm
I suggest that you post a request for help in the Dreamweaver forum. There are several CSS wizzes there who should be able to hunt down whatever’s causing the problem. Include a URL to the problem page with your request.
19. Mique | February 28th, 2010 at 6:28 pm
Everything works really fine, exept for unwanted white lines alongside the webgallery when the site is opened in I.E. (klick the URL) In firefox everything looks allright. Does somebody know how to get rid of these white lines?
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed