8 Replies Latest reply: Jun 18, 2013 3:21 PM by Nancy O. RSS

    How to Insert Web Gallery in Web Page?

    Ief_DR Community Member

      I created a Web Photo Gallery in Adobe Bridge CS4. I want to INSERT it in a web page using Dreamweaver. The problem is that the Web Gallery is an index.html file and appears to be a web page itself. But I need it to just be part of a web page that contains my background images, texts and links. The Web Gallery is NOT a flash animation.

       

      Thanks,

       

      Ief

        • 1. Re: How to Insert Web Gallery in Web Page?
          Nadia-P CommunityMVP

          Hopefully you know some HTML & CSS

           

          What you need to do is open the Gallerys Index page that was created and copy and paste the code where the gallery was started and paste that into your current page.  (Making sure you keep a backup of your original files in case of problems).

          • 2. Re: How to Insert Web Gallery in Web Page?
            mojopin8

            I'm having problems doing the same thing. In Bridge CS4 I created a Lightroom Flash Web Gallery. I want to insert this gallery in a pre-existing web page I have created in Dreamweaver CS4.

             

            I tried the response above...copying and pasting the code from the index page generated by the Bridge Flash Gallery. This didn't work.

             

            Why is this so difficult? In previous versions you could just insert a flash file right into a page in Dreamweaver. Why is Bridge creating a separate "index" page that is useless for existing Dreamweaver pages??

             

            Is there a workaround for this? Obviously I'm short on time and want to use Bridge's automated features. But now I'm losing time on the Dreamweaver end because I have to make special exceptions to house the file, which didn't work anyway.

             

            What am I doing wrong and is there a more detailed explanation??

             

            Thank you so much!

            • 3. Re: How to Insert Web Gallery in Web Page?
              Nadia-P CommunityMVP

              With so many questions about this, I decided to create a test gallery using Bridge and I must admit, it's not as easy as one would think to incorporate it into an existing site.  Admittedly I didn't spent too much time on this, but I agree, it should be much easier to implement.

               

               

              Here's a few links dealing with Photo Galleries and Slideshows that may be useful:

              Photo album using spry

              http://www.adobe.com/devnet/dreamweaver/articles/spry_photo_album.html

               

              Image gallery

              http://www.simpleviewer.net/simpleviewer/

               

              LightBox 2

              http://www.lokeshdhakar.com/projects/lightbox2/

               

              FLOATBOX:

              http://randomous.com/floatbox/demo

               

              Phatfusion lightbox - photos, flash

              http://www.phatfusion.net/multibox/

               

              PrettyPhoto:

              http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/

               

              Scrolling Images

              http://sorgalla.com/jcarousel/

               

               

              --

              Nadia

              Adobe® Community Expert : Dreamweaver

              http://www.perrelink.com.au

              --------------------------------------------------------------------------

              Unique CSS Templates | Tutorials | SEO Articles

              http://www.DreamweaverResources.com

              --------------------------------------------------------------------------

              http://twitter.com/nadiap

               

               

              • 4. Re: How to Insert Web Gallery in Web Page?
                petarsubotic

                Hi,

                 

                Here's a simple solution for this:

                 

                1. Publish the gallery from bridge as you would normally.

                 

                2. Open up your template page (wherever you want to INSERT the gallery) in Dreamweaver.

                 

                3. Click on the page where you want to insert the gallery.

                 

                4. Go to code view (or split)

                 

                5. paste:

                 

                <iframe src ="galleryFolder/index.html" width="100%" height="100%"> </iframe>

                 

                and you're done

                 

                Note:

                Of course you can change the width and height as you please.

                • 5. Re: How to Insert Web Gallery in Web Page?
                  Zabeth69 CommunityMVP

                  See David Powers's announcement: http://forums.adobe.com/thread/497139

                   

                  Beth

                  • 6. Re: How to Insert Web Gallery in Web Page?
                    jwylie11

                    Hello,

                    I have gone through both your tutorials and they worked great for Flash based galleries generated with Bridge, however I'm struggling with the sizing of the HTML gallery. What I would like is for the gallery to stay properly sized without any scroll bars needed or appearing.

                     

                    Here is a link to the page with a problem http://www.wyliegalt.com/print.html and I've posted the code below.

                     

                    Thanks in advance for your help.

                    J

                     

                     

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                    <html xmlns="http://www.w3.org/1999/xhtml">

                    <head>

                    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                    <title>Wylie Galt Advertising Website Design Samples</title>

                    <link href="css/layout.css" rel="stylesheet" type="text/css" />

                    <style type="text/css">

                    <!--

                    home_imagearea {

                    width: 1000px;

                    }

                    #home_text {

                    background-color: #CCC;

                    width: 860px;

                    margin-right: auto;

                    margin-left: auto;

                    padding-top: 5px;

                    padding-right: 20px;

                    padding-bottom: 5px;

                    padding-left: 20px;

                    margin-top: 12px;

                    }

                    -->

                    </style><script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

                    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

                    <style type="text/css">

                    <!--

                    body {

                    background-color: #FFF;

                    }

                    -->

                    </style></head>

                     

                    <body>

                    <div id="wrapper">

                      <div id="top"></div>

                      <div id="navigation">

                        <ul id="MenuBar1" class="MenuBarHorizontal">

                          <li><a href="index.html">home</a>      </li>

                          <li><a href="about.html">about</a></li>

                    <li><a href="interactive.html">interactive</a></li>

                    <li><a href="broadcast.html">broadcast</a></li>

                    <li><a href="print.html">print</a></li>

                    <li><a href="articles.html">articles</a></li>

                    <li><a href="contact.html">contact</a></li>

                        </ul>

                      </div>

                      <div id="body">

                        <div id="imagearea"><div id="rightlogo"></div>

                          <div id="gallery"><iframe  src="galleries/web/index.html" width="700" height="600" name="web"></iframe>

                     

                          </div>

                        </div>

                      </div>

                      <div id="footer"></div>

                    </div>

                    <script type="text/javascript">

                    <!--

                    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                    //-->

                    </script>

                    </body>

                    </html>

                    • 7. Re: How to Insert Web Gallery in Web Page?
                      k11ngy Community Member

                      Hi Nadia

                       

                      I see your post about flash gallery, can u assist?

                       

                      I am happy with my flash gallery but I would like to put an image (Static one) on the actual page itself, maybe left or right hand side of gallery, is this easy to do?

                       

                      Thank you

                       

                      Steve

                      • 8. Re: How to Insert Web Gallery in Web Page?
                        Nancy O. CommunityMVP

                        This is a very old discussion begun in 2009.  Unfortunately, Nadia is not a participant here anymore.  If you still need help with your layout, please start a new discussion with an appropriate subject line and provide a link to your web page.  Answers to layout questions are contained in your code.

                         

                         

                        Nancy O.