Topic: How Can I Embed Multiple Galleries on One Page in Another Web Page?

I have created two galleries (with more to come) and embedded them into one page. I have created links using images in the header area to navigate to the other galleries.

Viewable here: http://www.mazlyn.com/ramp/logos

However, whenever I embed this gallery into a web page on my site, the header and footer regions of the gallery .html page disappear. As a result, I can't access my other galleries through this single viewer.

Viewable here: http://www.mazlyn.com/ramp/logos/portfolio.html

Is what I'm trying to accomplish possible? If so, what the heck am I missing??

I'm using Dreamweaver CS3 and SimpleViewer Pro.

Any assistance you can provide would be greatly appreciated.

Thanks!
Mike

Re: How Can I Embed Multiple Galleries on One Page in Another Web Page?

However, whenever I embed this gallery into a web page on my site, the header and footer regions of the gallery .html page disappear. As a result, I can't access my other galleries through this single viewer.

Viewable here: http://www.mazlyn.com/ramp/logos/portfolio.html

I'm not having any issue seeing the header or footer. Did you fix the issue?

Mike Richards
SimpleViewer Support Team.

Re: How Can I Embed Multiple Galleries on One Page in Another Web Page?

Hi Mike, thank you for the reply. I have not been able to get it to work. If you look at:

http://www.mazlyn.com/ramp/logos

You will see that there is a white header with images in it that I added using the <div id = "header"> in the gallery's index.html file (i also added the same page element to the other gallery's index.hml) - shown below:

<!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" lang="en" xml:lang="en">
    <head>
        <title>Ramp Graphics - Logo Gallery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="shortcut icon" href="../images/favicon.ico" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
        <script type="text/javascript">
            var flashvars = {};
            flashvars.galleryURL = "gallery.xml";
            //flashvars.firstImageIndex = "0";
            //flashvars.preloaderColor = "#FFFFFF";
            var params = {};
            params.allowfullscreen = true;
            params.allowscriptaccess = "always";
            params.bgcolor = "000";
            swfobject.embedSWF("simpleviewer.swf", "flashContent", "785", "715", "9.0.124", false, flashvars, params);
        </script>

        <style type="text/css" media="screen">
            html, body    { height:100%; }
            body {
                margin:0;
                padding:0;
                overflow:hidden;
                background-color: #000;
                color:#fff;
                font-family:sans-serif;
                font-size:20px;
            }
            a {
                color:#fff;
            }
                
            #header {
                text-align: center; 
                background-color: #fff;
                width: 100%;
                height: 60px;
                padding: 5px 0 5px 0;
 
            }
 
            #footer {
                text-align: center;
                background-color: #77787a;
                color:#000;
                width: 100%;
                height: 20px;
                padding: 10px 0 10px 0;
            }
            
            #flashcontent {
                width: 785px;
                height: 715px;
            }
        
        </style>
    </head>
<body>
<div id="header"> <a href = "index.html"><img src="../images/logo_link.gif" border="0" /></a> <strong>|</strong> <a href = "../illustrations/index.html"><img src="../images/illus_link.gif" border="0" /></a> <strong>|</strong> <a href = "index.html"><img src="../images/coll_link.gif" border="0" /></a> <strong>|</strong> <a href = "../illustrations/index.html"><img src="../images/print_link.gif" border="0" /></a> <strong>|</strong> <a href = "index.html"><img src="../images/bkcovers_link.gif" border="0" /></a> <strong>|</strong> <a href = "../illustrations/index.html"><img src="../images/transit_link.gif" border="0" /></a></div>

<div id="flashContent">SimpleViewer requires JavaScript and the Flash Player. <a href="http://www.adobe.com/go/getflashplayer/">Get Flash.</a>.</div>

<div id="footer">This is the footer.</div>

</body>
</html>

When I embedded this gallery into my web page, the index.html file's header element (i.e., <div id = "header">) with all the images and links to the other galleries is no longer visible. This also happens if I remove the graphics and simply use text links. As a result, the other galleries are no longer accessible through the viewer, as you can see at:

http://www.mazlyn.com/ramp/logos/portfolio.html

The embed code I am using in my web page is below:

HEAD:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.galleryURL = "gallery.xml";
var params = {};
params.bgcolor = "222222";
params.allowfullscreen = true;
params.allowscriptaccess = "always";
swfobject.embedSWF("simpleviewer.swf", "flashContent", "785", "715", "9.0.124", false, flashvars, params);
</script>

BODY:

<div id="flashContent" align="center">SimpleViewer requires JavaScript and the Flash Player. 
<a href="http://www.adobe.com/go/getflashplayer/">Get Flash.</a></div>

I'm sure I'm missing something in the coding, but after about 10 hours of searching and trying possible solutions, I'm at a loss  tongue

Thanks in advance for your help!

Mike

Re: How Can I Embed Multiple Galleries on One Page in Another Web Page?

Ok I'm seeing the <div id="header"> in the code for http://www.mazlyn.com/ramp/logos, but I do not see <div id="header"> in the code for http://www.mazlyn.com/ramp/logos/portfolio.html how are you adding it in there?

Also you have 2 copies of the following line in your portfolio page and you only need one.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

Mike Richards
SimpleViewer Support Team.

Re: How Can I Embed Multiple Galleries on One Page in Another Web Page?

Hi Mike. Sorry for the delayed response, I've been out of band for a couple days. I didn't have the <div id="header"> in the code for http://www.mazlyn.com/ramp/logos/portfolio.html, so I added it in the following location:

<td>
        <div id="header">
         <a href = "../logos/index.html" target="_parent"><img src="../images/logo_link.gif" border="0" /></a> <strong>|</strong> <a href = "index.html"><img src="../images/illus_link.gif" border="0" /></a> <strong>|</strong> <a href = "../logos/index.html"><img src="../images/coll_link.gif" border="0" /></a> <strong>|</strong> <a href = "index.html"><img src="../images/print_link.gif" border="0" /></a> <strong>|</strong> <a href = "../logos/index.html"><img src="../images/bkcovers_link.gif" border="0" /></a> <strong>|</strong> <a href = "index.html"><img src="../images/transit_link.gif" border="0" /></a></div>
        <div id="flashContent" align="center">SimpleViewer requires JavaScript and the Flash Player. 
<a href="http://www.adobe.com/go/getflashplayer/">Get Flash.</a></div>
</td>

The header now appears above the gallery with the various links. However, when I click any one of the links, the next gallery opens up as if it's a new page, regardless of the "Target" setting (i.e., _blank, _parent, _top, _self).

Do I need to be using Frames to get this to work the way I want??

You can see what I'm talking about at:

http://www.mazlyn.com/ramp/logos/portfolio.html

Thanks!
Mike

Re: How Can I Embed Multiple Galleries on One Page in Another Web Page?

If you want to open the gallery without reloading the page you will have to write or find some JavaScript which will dispose the the current flash instance and load a new one using the desired XML. If you did some searching you might be able to find an example on the forums. Other wise you or a developer would have to come up with an ajaxian method of doing this.

A simpler solution would be to put your links to the different galleries in a flash and embed SimpleViewer into that flash. There is an example of this included with the pro download.

Mike Richards
SimpleViewer Support Team.

Re: How Can I Embed Multiple Galleries on One Page in Another Web Page?

Thanks a million Mike. I'll check out the sample in the download and do some poking around for an appropriate JavaScript.

BTW, I love the product - it has met all my needs perfectly.

Thanks for the assistance,
Mike