Adding an Adobe Bridge web gallery to a site

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.

This entry was posted in AJAX/JavaScript, Dreamweaver, Flash. Bookmark the permalink.

39 Responses to Adding an Adobe Bridge web gallery to a site

  1. Jusaniya says:

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

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

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

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

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

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

    It is now. πŸ˜‰

  8. Ladd says:

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

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

    @ 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 says:

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

    Dreamweaver is not compatible with Windows 7. Could you give some suggestions to resolve the issue.

  13. David Powers says:

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

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

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

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

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

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

    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?

  20. jj says:

    working in CS4 DW, HOW I GOT THE slideshow to show in DW. this was a slideshow created in Bridge and inserted in the page using iframe code per Dave Powers very clear tutorial online.

    After getting everything uploaded, and uploading the web gallery straight from BRidge, Bridge couldn’t get permission to create a directory. I thought then that nothing uploaded from that file, but in DW ftp panel, remote view, I saw the gallery named there, and the index.html for the gallery was there, and there was the folder for resources, with no images in it. So I clicked once on “resources” and then clicked the upload up arrow.

  21. jj says:

    I mean to clarify in the post above that when I clicked on the resources file, it was the REMOTE file, and it appeared to know what I meant when I clicked the upload arrow – so I didn’t go to my site files on my computer to upload.

  22. Brian Sutton says:

    David, I have probably missed something, but although you mention the last TWO versions of Bridge, this doesn’t seem available – web gallery – in CS3?

  23. Marina Macchi says:

    Thanks David! Your tutorial about Incorporating an Adobe Bridge Web Gallery into a Dreamweaver Page is amazing, very clear and useful. As you can see here http://www.ecochicpaper.it/ecogallery.html
    I change something in the xml files to have the gallery match my web page. But I wasn’t able to make the gallery autoplay on load. Is there any way to do it?

  24. Michelle says:

    I have succeeded in putting one gallery on a page, I’m not new to HTML… but I have had a nightmare of a time getting two galleries to work.

    Any help would be greatly appreciated!!

    Thanks in advance!

    Michelle

  25. Michelle says:

    well… look at THAT…

    my reading comprehension needs work…

    because it would seem that if I had just KEPT READING I would have found exactly what I was looking for!!!

    Off I go to follow your directions!!!

    WOO HOO!!!!!

    I’ll be back!

    WEEEEEEEEEE

  26. Michelle says:

    I’m BACK!

    TWO galleries!

    ONE page!

    ZERO iframes!

    ALL thanks to YOU!

    You have made me a happy person tonight! (after literally six hours of misery of me chasing my tail trying the same things over and over… )

    Thanks again…

  27. Linda says:

    Like some of you above, my slideshow was displaying perfectly in Dreamweaver’s Preview, but did not display live. I went into my remote files and found that all of the files did not load, even though in Dreamweaver, I “put” all of the supporting files. I went back to my local files, went into the gallery>resources, and selected resources to “put” online. This time all of the files that I needed transferred over. Success!

  28. Mardell says:

    Hi! I have had the same problem as some others. I used the iFrame instructions, and even though it works on my computer, when on the server, the slideshow does not show. I’m using a free hosting service for testing, could that be the problem? Will be eventually moving to another hosting service. My files are now loade on http://caferouge.50webs.com Thanks in advance for any assistance that may be offered.

  29. David Powers says:

    The reason for the page not being found is because your link for the iframe is “Landscapes/index.html”. The page is actually at “landscapes/index.html” (note the difference between Landscapes and landscapes – you’re on a Linux server that is case-sensitive). I got a blank page when I changed the L to lowercase, so presumably the same problem applies to the support files being in an incorrectly named folder (or the links are incorrect).

  30. Peter says:

    David,

    I made a page with multiple Adobe Bridge Galleries using an ‘iframe’ per your instructions.

    It displays perfectly in FireFox and Safari, but in IE, there is a white rectangle on the right-hand side of the gallery.

    I notice this rectangle is also present in your example “Japan Journey” but is more subtle because of your choice of colors.

    Is there a solution for this problem?

  31. David Powers says:

    I don’t remember seeing that problem when I originally wrote the tutorial. I wonder if it’s something peculiar to IE8?

    Anyway, after some experimentation, I found the cure. It’s now detailed on the second page of the tutorial.

  32. Peter says:

    Thank you for such a prompt response to my question about the problem with the unwanted white space that appears when IE displays a page with multiple Adobe Bridge Galleries using an β€˜iframe’.

    I am impressed. I did not really think you would answer let alone add a solution to your tutorial.

    Unfortunately, the solution does not appear to work for me.

    I adapted your tutorial to a web page that someone else constructed. It is very primitive from your point of view (and mine) and my skills at present do not approach your level of expertise.

    I do not have the code you reference in Step 1, Step 3 and Step 4 (Fixing a problem with Internet Explorer).

    Would you be willing to take a look at the source code for the website in question?

    The url is: http://www.conniecarrollart.com/

    I prefer the horizontal links in this instance, but they are in a “table”. I do not know how to do this without a table or if it is possible. And, I do not know if it really matters.

    I am capable of reading through code and could cut and paste what I don’t have of yours into mine (including the appropriate file(s) if necessary). Would this be a solution?

    If you prefer not to involve yourself in this, I will understand.

    If you would help in exchange for a fee, please email me at: person@animotioninc.com and if I can afford it, I will pay myself with the goal of learning something.

    I am very interested in acquiring the kind of skills you have. Are your books appropriate for a person with not so much experience? Which book or books would you recommend I start with.

    Thanks,
    Peter

  33. David Powers says:

    Peter, I emailed you directly with a revised script that should fix the problem.

    As for my books, with the exception of “PHP Object Oriented Solutions”, they’re all designed for what I would call “intelligent beginners” or those with intermediate skill levels. I expect readers to know the basics of web design, but assume no prior knowledge of PHP or MySQL. The books explain everything in detail, but they move at a fairly fast pace.

    If you use Dreamweaver CS5, I would suggest my most recent book Adobe Dreamweaver CS5 with PHP: Training from the Source. If you want a software-neutral book, I would suggest PHP Solutions. I’m currently preparing a second edition of “PHP Solutions”, but it’s not due to be published until December.

  34. Bobby Johnson says:

    hey David, I am trying to create a dynamic photo gallery. People would be able to log in and add their photos to their personal page and the images would go into their gallery galle and change them when needed. Essentially, there will be only one page but depending on the user, there would be different information shown.

    For example, a visitor would click on a person’s name and a results page would come up with Rob’s photo images in a gallery. That same visitor would click on Matt and the same results page would whow up but with Matt’s photos in the gallery instead of Rob’s. Also, Rob would have the ability to change his photos.

    Is the bridge photo gallery able to do dynamic work with phpmyadmin to acheive those functions, or do I need to use something else?

    Thanks,

    Bobby

  35. Bobby Johnson says:

    Also, I am working with dreamweaver cs3. If need be, I could work with cs4. If that helps anything.

    Thanks,

    Bobby

  36. David Powers says:

    I haven’t done it myself, but it should be possible to populate a Bridge gallery dynamically. The way to do it is to create a gallery in the normal way, and then examine the files that it creates. A Bridge gallery generates a folder called resources. Inside that folder are all the files, including the images. Bridge generates three copies of each image, and stores them in folders called large, medium, and thumb. You would need to create a similar structure. It appears that the gallery uses an XML file called group.xml to load the images. You should be able to generate group.xml dynamically with PHP.

  37. Desmond says:

    David, hello and thank you for your tutorial. I seem to be having the same problem as many here (gallery won’t show on server). If you’d be willing to take a look at my page, it would be greatly appreciated. I will also post over on the Dreamweaver forum.

    I have my gallery embedded in this page:

    http://www.stompandcrush.com/quisomnian.html

    This is the gallery index html:

    http://www.stompandcrush.com/graffitigallery_newyork_netaacc.html

  38. Julie Fanning says:

    I followed everything pretty much to a “t” with regard to the iFrame instructions. It works when viewed in a browser locally, and I’ve double checked all links. However each time I’ve uploaded the two pages to my hosting company, I get a blank white box. (I used the iFrame for 2 different galleries for 2009 and 2008 photos)

    My hosting company said there is an inconsistency or issue with some of the values with accessing the Flash, and install of Flash Player, but that’s something Bridge automatically included when I saved the gallery.

    Files:
    (Page with iFrame included)
    http://windyhillhaunt.com/gallery2009.html
    (You can view the frame source for the index file in the white box, correct?)

    Julie

  39. David Powers says:

    Have you uploaded the contents of the resources folder?