Topic: bug with images in other folder

Hi Felix,
i have noticed a bug in Autoviewer:

If you set the xml with images located in another branch folder (like e.g. "../otherfolder/images/images.jpg") these images will not be displayed on Gegko based browsers (e.g. Firefox, Camino, Seamonkey...).
They are perfectly displayed on Internet Explorer, Chrome, Safari.
This appear to be an AutoViewer bug, since Simpleviewer perfectly copes with the same situation on every browser.

Example:
http://www.schirmer-mosel.de/homee1/exhibitions.htm (don't display images in Gecko browsers, but in Internet Explorer)

Regards
RIN67630

Last edited by rin67630 (2010-02-27 13:48:30)

Re: bug with images in other folder

It's not a bug, your XML image paths are wrong. For all URLs you need to use a forward slash, /, not a back slash \. So open your XML in a text editor and do a find replace.

Find: \
Replace: /

Your current XML

<?xml version="1.0" encoding="UTF-8"?>
<gallery frameColor="0x888888" frameWidth="2" imagePadding="30" displayTime="4" enableRightClickOpen="false">
<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_01.jpg</url>
   <caption></caption>
   <width>300</width>
   <height>239</height>
</image>
<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_02.jpg</url>

   <caption></caption>
   <width>300</width>
   <height>239</height>
</image>
<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_03.jpg</url>
   <caption></caption>
   <width>300</width>

   <height>239</height>
</image>
<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_04.jpg</url>
   <caption></caption>
   <width>300</width>
   <height>239</height>
</image>

<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_05.jpg</url>
   <caption></caption>
   <width>300</width>
   <height>239</height>
</image>
<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_06.jpg</url>

   <caption></caption>
   <width>300</width>
   <height>239</height>
</image>
<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_07.jpg</url>
   <caption></caption>
   <width>300</width>

   <height>239</height>
</image>
<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_08.jpg</url>
   <caption></caption>
   <width>300</width>
   <height>239</height>
</image>

<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_09.jpg</url>
   <caption></caption>
   <width>300</width>
   <height>239</height>
</image>
<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_10.jpg</url>

   <caption></caption>
   <width>300</width>
   <height>239</height>
</image>
<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_11.jpg</url>
   <caption></caption>
   <width>300</width>

   <height>239</height>
</image>
<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_12.jpg</url>
   <caption></caption>
   <width>300</width>
   <height>239</height>
</image>

<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_13.jpg</url>
   <caption></caption>
   <width>300</width>
   <height>239</height>
</image>
<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_14.jpg</url>

   <caption></caption>
   <width>300</width>
   <height>239</height>
</image>
<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_15.jpg</url>
   <caption></caption>
   <width>300</width>

   <height>239</height>
</image>
<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_16.jpg</url>
   <caption></caption>
   <width>300</width>
   <height>239</height>
</image>

<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_17.jpg</url>
   <caption></caption>
   <width>300</width>
   <height>239</height>
</image>
<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_18.jpg</url>

   <caption></caption>
   <width>300</width>
   <height>239</height>
</image>
<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_19.jpg</url>
   <caption></caption>
   <width>300</width>

   <height>239</height>
</image>
<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_20.jpg</url>
   <caption></caption>
   <width>300</width>
   <height>239</height>
</image>

<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_21.jpg</url>
   <caption></caption>
   <width>300</width>
   <height>239</height>
</image>
<image>
   <url>..\homed1\images/Showroom_Voelker_Meerschweinchen_22.jpg</url>

   <caption></caption>
   <width>300</width>
   <height>239</height>
</image>

</gallery>
Mike Richards
SimpleViewer Support Team.

Re: bug with images in other folder

miker wrote:

It's not a bug, your XML image paths are wrong. For all URLs you need to use a forward slash, /, not a back slash \.

Ups! I am very sorry, I should have found that myself!
Thank you so much for your help.
RIN67630

Re: bug with images in other folder

I'm having the same problem... I checked my paths.   For some reason simple viewer works fine in Safari and Chrome, but doesn't show in Camino.  Here is the url: http://www.marcoslafarga.com/dd.html

Any suggestions?

Thanks!
Marcos

Re: bug with images in other folder

@marcoslafarga you have a bunch of HTML errors such as having 2 copies of the  </head> and <body> tags. If you fix the errors I linked to, your page will probably work.

Your code:

<!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>x xx Design is Dead xx x</title>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <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 = "dd.xml";
            var params = {};            
            params.allowscriptaccess = "always";
            params.bgcolor = "#FFFFFF";
            swfobject.embedSWF("simpleviewer.swf", "flashContent", "100%", "100%", "9.0.124", false, flashvars, params);
        </script>
        
        <script type="text/javascript" src="dropdown.js"></script>

        
        <style type="text/css" media="screen">    
            html, body    { height:100%; }
            body {            
                margin:0;
                padding:0;
                background-color: ##FFFFFF;
                color:#666;
                font-family:sans-serif;
                font-size:20px;        
            }
            a {    
                color:#FFFFFF;    
            }
            #header {
        background-color: #FFFFFF;
        width: 100%;
        height: 125px;        
    }
            
            
        a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
</style>
        
    </head><body>
    
      <table width="190" height="545" border="0" align="left" cellpadding="0" cellspacing="0">
        <tr>
          <td width="197" align="left" valign="top"><p><img src="images/ML_final_thumb.jpg" width="150" height="108" hspace="20" vspace="20" align="texttop" /><br />

</p>
            <div id="sample_attach_menu_parent" class="sample_attach"></div>
<div id="sample_attach_menu_child"></div>
            <div id="sample_attach_menu_parent" class="sample_attach"></div>

<div id="sample_attach_menu_child"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="ddaccordion.js">

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>


<script type="text/javascript">


ddaccordion.init({
    headerclass: "expandable", //Shared CSS class name of headers group that are expandable
    contentclass: "categoryitems", //Shared CSS class name of contents group
    revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
    defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
    onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: true, //persist state of opened contents within browser session?
    toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
        //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
        //do nothing
    }
})


</script>

<style type="text/css">

.arrowlistmenu{
width: 180px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(titlebar-active.png);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

</style>

</head>

<body>

<div class="arrowlistmenu">

<h3 class="menuheader expandable">ART</h3>
<ul class="categoryitems">
<li><a href="http://www.marcoslafarga.com/sexy.html">Sexy </a></li>
<li><a href="http://www.marcoslafarga.com/dd.html">Design is Dead</a></li>
<li><a href="http://www.marcoslafarga.com/portraits.html">Portraits</a></li>
<li><a href="http://www.marcoslafarga.com/graffiti.html">Graffiti</a></li>
<li><a href="http://www.marcoslafarga.com/comissions.html">Commissions</a></li>

</ul>

<h3 class="menuheader expandable">DESIGN</h3>
<ul class="categoryitems">
<li><a href="http://www.marcoslafarga.com/print.html">Print</a></li>
<li><a href="http://www.marcoslafarga.com/web.html">Web Design</a></li>
<li><a href="http://www.marcoslafarga.com/typorgraphy.html">Typography</a></li>
<li><a href="http://www.marcoslafarga.com/typorgraphy.html">Branding</a></li>
</ul>

<h3 class="menuheader" style="cursor: default"><a href="http://www.marcoslafarga.com/about">ABOUT</h3>

<h3 class="menuheader" style="cursor: default"><a href="http://www.marcoslafarga.com/shop">SHOP</h3>
<h3 class="menuheader" style="cursor: default"><a href="http://marcoslafarga.blogspot.com/">NEWS</h3>
<h3 class="menuheader" style="cursor: default"><a href= "mailto:info@marcoslafarga">CONTACT</h3>
<div><br />
</div>
</div>

</p>
          <p>&nbsp;</p></td>
          
        </tr>
    </table>

    </div>
    <table width="1116" height="680" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="1182" align="left" valign="middle"><div id="flashContent"> 
          <div align="left">SimpleViewer requires JavaScript and the Flash Player. <a href="http://get.adobe.com/flashplayer/">Get Flash</a></div>
        </div></td>
      </tr>
    </table>

    </body>
</html>
Mike Richards
SimpleViewer Support Team.

Re: bug with images in other folder

Thanks Miker... I should have Validated before asking. Sorry I'm still novice.  I'll report back if it works.

-Marcos

Re: bug with images in other folder

Miker... I resolved all the errors except for one on line 196 height tag, which I have to leave in or else the gallery gets wonkity.  Either way though, the viewer doesn't display in Camino.

Here is the  new url: http://www.marcoslafarga.com/dd-r.html

Anymore suggestions?

Thanks a bunch.

-Marcos

Re: bug with images in other folder

Try the following:

<!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>x xx Design is Dead xx x</title>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="dropdown.js"></script>
<script type="text/javascript" src="ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<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 = "dd.xml";
    var params = {};            
    params.allowscriptaccess = "always";
    params.bgcolor = "#FFFFFF";
    swfobject.embedSWF("simpleviewer.swf", "flashContent", "100%", "100%", "9.0.124", false, flashvars, params);
</script>
<script type="text/javascript">
ddaccordion.init({
    headerclass: "expandable", //Shared CSS class name of headers group that are expandable
    contentclass: "categoryitems", //Shared CSS class name of contents group
    revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
    defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
    onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: true, //persist state of opened contents within browser session?
    toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
        //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
        //do nothing
    }
})
</script>
<style type="text/css" media="screen">    
    html, body    { height:100%; }
    body {            
        margin:0;
        padding:0;
        background-color: #FFFFFF;
        color:#666;
        font-family:sans-serif;
        font-size:20px;        
    }
    a {    
        color:#FFFFFF;    
    }
    #header {
        background-color: #FFFFFF;
        width: 100%;
        height: 125px;        
    }    
    a:link {
        text-decoration: none;
    }
    a:visited {
        text-decoration: none;
    }
    a:hover {
        text-decoration: none;
    }
    a:active {
        text-decoration: none;
    }

.arrowlistmenu{
width: 180px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(titlebar-active.png);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

</style>
</head>
<body>    
    <table width="190" border="0" align="left" cellpadding="0" cellspacing="0">
        <tr>
            <td width="197" align="left" valign="top">
                <p>
                <img src="http://www.marcoslafarga.com/images/ML_final_thumb.jpg" width="150" height="108" hspace="20" vspace="20" style="vertical-align:text-top;" alt="" />
                <br />
                </p>        
                <div id="sample_attach_menu_parent" class="sample_attach"></div>
                <div id="sample_attach_menu_child"></div>         
                <div class="arrowlistmenu">
                    <h3 class="menuheader expandable">ART</h3>
                    <ul class="categoryitems">
                        <li><a href="http://www.marcoslafarga.com/sexy.html">Sexy </a></li>
                        <li><a href="http://www.marcoslafarga.com/dd.html">Design is Dead</a></li>
                        <li><a href="http://www.marcoslafarga.com/portraits.html">Portraits</a></li>
                        <li><a href="http://www.marcoslafarga.com/graffiti.html">Graffiti</a></li>
                        <li><a href="http://www.marcoslafarga.com/comissions.html">Commissions</a></li>
                    </ul>
                    <h3 class="menuheader expandable">DESIGN</h3>
                    <ul class="categoryitems">
                        <li><a href="http://www.marcoslafarga.com/print.html">Print</a></li>
                        <li><a href="http://www.marcoslafarga.com/web.html">Web Design</a></li>
                        <li><a href="http://www.marcoslafarga.com/typorgraphy.html">Typography</a></li>
                        <li><a href="http://www.marcoslafarga.com/branding.html">Branding</a></li>
                    </ul>
                    <h3 class="menuheader" style="cursor: default"><a href="http://www.marcoslafarga.com/about">ABOUT</a></h3>
                    <h3 class="menuheader" style="cursor: default"><a href="http://www.marcoslafarga.com/shop">SHOP</a></h3>
                    <h3 class="menuheader" style="cursor: default"><a href="http://marcoslafarga.blogspot.com/">NEWS</a></h3>
                    <h3 class="menuheader" style="cursor: default"><a href= "mailto:info@marcoslafarga">CONTACT</a></h3>
                    <div>
                        <br />
                    </div>
                     <p>&nbsp;</p>
                </div>
            </td>
        </tr>
    </table>
    <table border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td width="1182" height="680" align="left" valign="middle">
                <div id="flashContent"> 
                    <div align="left">SimpleViewer requires JavaScript and the Flash Player. <a href="http://get.adobe.com/flashplayer/">Get Flash</a></div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
Mike Richards
SimpleViewer Support Team.

Re: bug with images in other folder

That Worked... What was the fix?   Looks like you cleaned up all the code, especially the scripts... Anyway, thanks.  Looks awesome!

-Marcos

Re: bug with images in other folder

If you look at your code in my first post there was an extraneous </p> tag that was confusing Firefox.

...
</div>
</div>

</p>
          <p>&nbsp;</p></td>
         
        </tr>
...

Mike Richards
SimpleViewer Support Team.

Re: bug with images in other folder

New issue... Everything seems to be working fine, except for my logo on the top left side.

Page, including logo looks fine on Safari, Firefox, and Chrome... but logo doesn't show up in Internet Explorer.  Any suggestions?

I feel like I'm wearing out my welcome.  Thanks again in advanced.

+Marcos

Re: bug with images in other folder

Sounds like either a validation error or like you need to fix your CSS positioning.

Mike Richards
SimpleViewer Support Team.

Re: bug with images in other folder

Hi Miker,

Site is validated, but still no logo showing in Internet Explorer.  Any other suggestions?
Thanks again for all your help.

Here is the url again: http://www.marcoslafarga.com/dd.html

Re: bug with images in other folder

Your logo not showing in IE is not a SimpleViewer issue. When I try to go directly to the image in IE it does not show up. There is either something wrong with the image or your server. I try would contact your hosting company.

http://www.marcoslafarga.com/ml_final_thumb.jpg

Mike Richards
SimpleViewer Support Team.

Re: bug with images in other folder

Sorry about that.. It was something buggy with the image.