Topic: TiltViewer and index conflict

Hi ,

i embeded my tiltviewer SWF in and html page , using adobe contribute , placed my TiltViewer folder ( with all files and images ) in my Root folder ( stephanegormand.com )  , and it works well when i visit the page on safari , but the problem is that the player display the sample images , and not my images ( the one i used to create the TiltViewer , and that are placed in the folder( images ) ,uploaded on my web domain. As i am not used with html ( even if tried to check in this way) , with html editor , i tried different tricks , and could get at least my image displayed in the tiltviewer player ( on safari), when i replaced my website Index html ( located in the root folder ) , by the index from TiltViewer folder ... but of course couldn't anymore access to others pages / links of my website my home page as  my original website Index html was deleted ....
I don't know how to do , and where place the TiltViewer index  , so can still access my webpages , and can display my pictures in the TiltViewer player ( embeded in one of my html page called: Tilt ) Again all the tiltviewer files are in one folder called TiltViewer , bellow my webpage content folder ( Tilt_files) , where i embeded the swf file . I inserted the swf files using Adobe Contribute by pointing the swf file  in my web domain root:  stephanegormand.com / Tiltviewer folder / Tiltviewer.swf
If you could provide me a solution , i would be really great  ;-)
Please find bellow the copy of html page ( where tiltviewer is embeded)
If you need more infos , please let me know ,

thank you ,
best regards,
stephane


<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
  <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   
  <meta name="Generator" content="iWeb 3.0.4" />
  <meta name="iWeb-Build" content="local-build-20110805" />
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <meta name="viewport" content="width=700" />
  <title>Tilt</title>
  <link rel="stylesheet" type="text/css" media="screen,print" href="Tilt_files/Tilt.css" />
  <!--[if lt IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='Tilt_files/TiltIE.css'/><![endif]-->
  <!--[if gte IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='Media/IE8.css'/><![endif]-->
  <script type="text/javascript" src="Scripts/iWebSite.js"></script>
  <script type="text/javascript" src="Scripts/Widgets/SharedResources/WidgetCommon.js"></script>
  <script type="text/javascript" src="Scripts/Widgets/Navbar/navbar.js"></script>
  <script type="text/javascript" src="Tilt_files/Tilt.js"></script>
    <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
  </head>
<body style="background: rgb(255, 255, 255); margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();">
  <div style="text-align: center; "></div>
  <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="800">
    <param name="movie" value="TiltViewer/TiltViewer.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="9.0.45.0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don't want users to see the prompt. -->
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="TiltViewer/TiltViewer.swf" width="1000" height="800">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="9.0.45.0" />
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <p style="margin-top: 0; margin-bottom: 0;">&nbsp;</p>
<div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p style="margin-bottom: 0;"><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
  </script>
</body>
</html>




  Here is my tiltviewer index html:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TiltViewer</title>
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">   
    /* hide from ie on mac \*/
    html {
        height: 100%;
        overflow: hidden;
    }

    #flashcontent {
        height: 100%;
    }
    /* end hide */

    body {
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #000000;
        color:#ffffff;
        font-family:sans-serif;
        font-size:40;
    }

    a {
        color:#cccccc;
    }
</style>
</head>
<body>
    <div id="flashcontent">TiltViewer requires JavaScript and the latest Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash here.</a> </div>   
    <script type="text/javascript">

        var fo = new SWFObject("TiltViewer.swf", "viewer", "100%", "100%", "9.0.28", "#000000");

        // TILTVIEWER CONFIGURATION OPTIONS
        // To use an option, uncomment it by removing the "//" at the start of the line
        // For a description of config options, go to:
        // http://www.airtightinteractive.com/proj … tions.html

        //FLICKR GALLERY OPTIONS
        // To use images from Flickr, uncomment this block
        //fo.addVariable("useFlickr", "true");
        //fo.addVariable("user_id", "48508968@N00");
        //fo.addVariable("tags", "jump,smile");
        //fo.addVariable("tag_mode", "all");
        //fo.addVariable("showTakenByText", "true");

        // XML GALLERY OPTIONS
        // To use local images defined in an XML document, use this block
        fo.addVariable("useFlickr", "false");
        fo.addVariable("xmlURL", "gallery.xml");
        fo.addVariable("maxJPGSize","640");

        //GENERAL OPTIONS
        fo.addVariable("useReloadButton", "false");
        fo.addVariable("columns", "5");
        fo.addVariable("rows", "5");
        //fo.addVariable("showFlipButton", "true");
        //fo.addVariable("showLinkButton", "true");
        //fo.addVariable("linkLabel", "View image info");
        fo.addVariable("frameColor", "0xFFFFFF");
        fo.addVariable("backColor", "0xFFFF00");
        fo.addVariable("bkgndInnerColor", "0x333333");
        fo.addVariable("bkgndOuterColor", "0x000000");
        //fo.addVariable("langGoFull", "Go Fullscreen");
        //fo.addVariable("langExitFull", "Exit Fullscreen");
        //fo.addVariable("langAbout", "About");

        // END TILTVIEWER CONFIGURATION OPTIONS

        fo.addParam("allowFullScreen","true");
        fo.addParam("wmode", "transparent");
        fo.write("flashcontent");   
    </script>   
</body>
</html>

Re: TiltViewer and index conflict

Please see the 'Note for Dreamweaver Users:' at the bottom of this page as it applies to Contribute also:  http://simpleviewer.net/tiltviewer/supp … dding.html

Steven Speirs
SimpleViewer Support Team.

Re: TiltViewer and index conflict

Thank you very much steven  for your quick answer  , the fact is that i already checked this page ,  but some few points are not clear for me ( again , i am 0 in html texting..;-)

1 - "Copy the entire contents of your TiltViewer gallery folder into the folder that contains your HTML page":

   Means i copy all the files , take them out of the TiltViewer folder , and place them in the Html folder (  that would mean Tilt_files  , which is the folder name of the Html page where i embeded the swf file   ) , right?



2- " Edit your HTML document using a HTML or text editor. Copy and paste this code block where you want TiltViewer to appear:"
   
   Means i edit the Html file ( Tilt.html  , that is out of the Html folder named  Tilt_files) ,and paste the block there .

   I will again copy the block , but the thing is that i don't know where/what line  should i paste it ..   Sorry for my ignorance but i need your help for this . Thank you very much Steven.

Here is again my Html ( Tilt.html ) :


?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
  <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   
  <meta name="Generator" content="iWeb 3.0.4" />
  <meta name="iWeb-Build" content="local-build-20110805" />
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <meta name="viewport" content="width=700" />
  <title>Tilt</title>
  <link rel="stylesheet" type="text/css" media="screen,print" href="Tilt_files/Tilt.css" />
  <!--[if lt IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='Tilt_files/TiltIE.css'/><![endif]-->
  <!--[if gte IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='Media/IE8.css'/><![endif]-->
  <script type="text/javascript" src="Scripts/iWebSite.js"></script>
  <script type="text/javascript" src="Scripts/Widgets/SharedResources/WidgetCommon.js"></script>
  <script type="text/javascript" src="Scripts/Widgets/Navbar/navbar.js"></script>
  <script type="text/javascript" src="Tilt_files/Tilt.js"></script>
  <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
  </head>
<body style="background: rgb(255, 255, 255); margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();">
<div style="text-align: center; "></div>
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="800">
  <param name="movie" value="tiltviewer/TiltViewer.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  <param name="swfversion" value="9.0.45.0" />
  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don't want users to see the prompt. -->
  <param name="expressinstall" value="Scripts/expressInstall.swf" />
  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="tiltviewer/TiltViewer.swf" width="1000" height="800">
    <!--<![endif]-->
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="9.0.45.0" />
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    <p style="margin-top: 0; margin-bottom: 0;">&nbsp;</p>
<div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p style="margin-bottom: 0;"><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
    </div>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

Re: TiltViewer and index conflict

If you have a complete TiltViewer gallery self-contained in a folder, then the gallery will be embedded in an HTML file within this folder. In your case, this file is named 'Tilt.html'.

If you wish to embed this gallery into another HTML page alongside existing content, you could either:

(1) Copy the embedding code from the 'Tilt.html' file within your gallery folder:

<div id="flashcontent">TiltViewer requires JavaScript and the latest Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash here.</a> </div>   
    <script type="text/javascript">

        var fo = new SWFObject("TiltViewer.swf", "viewer", "100%", "100%", "9.0.28", "#000000");

        // TILTVIEWER CONFIGURATION OPTIONS
        // To use an option, uncomment it by removing the "//" at the start of the line
        // For a description of config options, go to:
        // http://www.airtightinteractive.com/proj … tions.html

        //FLICKR GALLERY OPTIONS
        // To use images from Flickr, uncomment this block
        //fo.addVariable("useFlickr", "true");
        //fo.addVariable("user_id", "48508968@N00");
        //fo.addVariable("tags", "jump,smile");
        //fo.addVariable("tag_mode", "all");
        //fo.addVariable("showTakenByText", "true");

        // XML GALLERY OPTIONS
        // To use local images defined in an XML document, use this block
        fo.addVariable("useFlickr", "false");
        fo.addVariable("xmlURL", "gallery.xml");
        fo.addVariable("maxJPGSize","640");

        //GENERAL OPTIONS
        fo.addVariable("useReloadButton", "false");
        fo.addVariable("columns", "5");
        fo.addVariable("rows", "5");
        //fo.addVariable("showFlipButton", "true");
        //fo.addVariable("showLinkButton", "true");
        //fo.addVariable("linkLabel", "View image info");
        fo.addVariable("frameColor", "0xFFFFFF");
        fo.addVariable("backColor", "0xFFFF00");
        fo.addVariable("bkgndInnerColor", "0x333333");
        fo.addVariable("bkgndOuterColor", "0x000000");
        //fo.addVariable("langGoFull", "Go Fullscreen");
        //fo.addVariable("langExitFull", "Exit Fullscreen");
        //fo.addVariable("langAbout", "About");

        // END TILTVIEWER CONFIGURATION OPTIONS

        fo.addParam("allowFullScreen","true");
        fo.addParam("wmode", "transparent");
        fo.write("flashcontent");   
    </script>

... and paste it over the current embedding code in your other HTML page:

<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="800">
  <param name="movie" value="tiltviewer/TiltViewer.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  <param name="swfversion" value="9.0.45.0" />
  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don't want users to see the prompt. -->
  <param name="expressinstall" value="Scripts/expressInstall.swf" />
  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="tiltviewer/TiltViewer.swf" width="1000" height="800">
    <!--<![endif]-->
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="9.0.45.0" />
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    <p style="margin-top: 0; margin-bottom: 0;">&nbsp;</p>
<div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p style="margin-bottom: 0;"><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
    </div>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>

In copying the embedding code into another HTML page, the HTML file within the gallery folder ('Tilt.html') now becomes redundant. However, you should copy all the other files within the gallery folder into the same directory as the HTML file into which you have just pasted the embedding code.

... or:

(2) Upload the complete gallery folder (not just the contents) to your web server and embed the gallery into another HTML page using an <iframe>.
If your gallery folder is named 'Tilt_files' and you upload the folder to the root of your web server, then the <iframe> code you would use would be:

<iframe src="http://stephanegormand.com/Tilt_files/Tilt.html" width="1000" height="800" frameborder="0" scrolling="no"></iframe>
Steven Speirs
SimpleViewer Support Team.

Re: TiltViewer and index conflict

Hi Steven , sorry for late reply , and thank you very much  for informations , worked on it and could make it work using iFrame.