Topic: iOS and Non-flash mobile viewing

Hello Guys,

I had a big problem two years ago and Steven's advice really helped me out. I'm really hoping that One of you will be able to help me out again. cool

I simply just want to upgrade my three simple viewer galleries that are on one HTML page so that they can be viewed on Apple and non-flash devices.

I thought I could simply just use the awesome new Adobe Air app 'svbuilder' and open up the gallery then save it again...but obviously this didn't work...and when I right click on the gallery on my page it states that the gallery version is 2.0.3 instead of 2.3.0.

Please let me know what i am doing wrong. I want everything the same as before but all three galleries to work on non-flash devices. THANKS.

Here is what my root files look on my comp/domain-http://i123.photobucket.com/albums/o308/rndmlaw/Screenshot2012-06-10at202020.png

Here is the page I'm working on-http://okenwa.com/images.html

Please check the code source to see the code

Re: iOS and Non-flash mobile viewing

and when I right click on the gallery on my page it states that the gallery version is 2.0.3 instead of 2.3.0.

Make sure you using the latest version of svBuilder (v2.3.0). It can be found inside the SimpleViewer-Standard zip download package available from the download link on this page.

You can then upgrade your existing galleries to v2.3.0 by following the instructions here.

Once your galleries have been upgraded, you will need to change the embedding code on your HTML page.
Currently, you page embeds only a single SWF file (so there is no fallback mechanism for the gallery to be displayed by the Mobile Player if Adobe Flash Player is not detected in the user's browser). In order for your galleries to feature Universal Playback, you will need to use the recommended embedding code for v2.3.0 and follow the instructions here.

Steven Speirs
SimpleViewer Support Team.

Re: iOS and Non-flash mobile viewing

Hello Steven,

Thanks for replying...again.

1. I am using the latest build of svbuilder. I opened up my old gallery and saved it.

2. You say that my page only embeds one SWF file but I currently have three simple galleries on one page.

3. If i use the recommended embedded code for each gallery on one page how will each gallery be referenced?


Here is my page code:



 
  <br />

  <div id="imageheader">

<p id="imagewriteup">SHOOTS: Papua, AFF 2010, Henry Holland, Lotte Delima, Crocs
</p></div>

<div>
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600">
    <param name="movie" value="webport/simpleviewer.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" />
    <param name="flashVars" value="baseURL=/webport/" />
    <param name="allowFullscreen" value="true" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="webport/simpleviewer.swf" width="800" height="600">
      <!--<![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" />
      <param name="flashVars" value="baseURL=/webport/" />
       <param name="allowFullscreen" value="true" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><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></div>
 
  <div id="imageheader">

<p id="imagewriteup">EVENTS: Lewis Hamilton, Roberto Cavalli,The Misshapes, King Charles, Audi Charity Ball, The Rakes, TimeOut Magazine, Starlight Alchemy, AFF 2010 Backstage, Marc by Marc Jacobs Launch, WORK IT! Girls, Kardinal Offishall,
</p>
</div>

<div>
<object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600">
    <param name="movie" value="eventsport/simpleviewer.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" />
    <param name="flashVars" value="baseURL=/eventsport/" />
    <param name="allowFullscreen" value="true" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="eventsport/simpleviewer.swf" width="800" height="600">
      <!--<![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" />
      <param name="flashVars" value="baseURL=/eventsport/" />
      <param name="allowFullscreen" value="true" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><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>
  </div>

<div id="imageheader">
<p id="imagewriteup">ADVENTURE: Indonesia, Thailand, Philippines, Singapore, Malaysia
</p>
</div>

<div>
<object id="FlashID3" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600">
  <param name="movie" value="adventureport/simpleviewer.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" />
  <param name="flashvars" value="baseURL=/adventureport/" />
  <param name="allowFullscreen" value="true" />
  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="adventureport/simpleviewer.swf" width="800" height="600">
    <!--<![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" />
    <param name="flashvars" value="baseURL=/adventureport/" />
    <param name="allowFullscreen" value="true" />
    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    <div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p><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>
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID3");
swfobject.registerObject("FlashID");
</script>
</body>
</html>

Last edited by RNDM (2012-06-12 12:21:00)

Re: iOS and Non-flash mobile viewing

2. You say that my page only embeds one SWF file but I currently have three simple galleries on one page.

I should have said that each gallery embeds only a single SWF file (so it will result in a Flash gallery or nothing).
In order for SimpleViewer to provide the Mobile Player as a fallback mechanism when Adobe Flash Player is not available, the entire 'svcore' folder (not just a single SWF file) comprising CSS, HTML, JavaScript and other files must be used in conjunction with the recommended embedding code.

3. If i use the recommended embedded code for each gallery on one page how will each gallery be referenced?

As you have multiple galleries on your page, I would leave each gallery in its own folder and upload your gallery folders in their entirety to your web server.
Then, use the baseURL method of embedding to embed each gallery in your web page.
For example, for the first gallery on your page, replace:

<div>
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600">
    <param name="movie" value="webport/simpleviewer.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" />
    <param name="flashVars" value="baseURL=/webport/" />
    <param name="allowFullscreen" value="true" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="webport/simpleviewer.swf" width="800" height="600">
      <!--<![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" />
      <param name="flashVars" value="baseURL=/webport/" />
       <param name="allowFullscreen" value="true" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><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></div>

... with:

<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="/webport/svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
var flashvars1 = {};
flashvars1.baseURL = "/webport/";
simpleviewer.ready(function () {
simpleviewer.load("sv-container1", "800", "600", "222222", true, flashvars1);
});
</script>
<div id="sv-container1"></div>
<!-- END SIMPLEVIEWER EMBED -->

... replacing the two paths as necessary depending on where you have uploaded your gallery folder on your web server.

When you come to embed the second gallery, make sure that your 'flashvars' variable has a unique name (e.g. 'flashvars2') and embed the gallery in a <div> with a unique id (e.g. 'sv-container2').

Steven Speirs
SimpleViewer Support Team.

Re: iOS and Non-flash mobile viewing

If you ever need a kidney let me know. It is a little annoying that I always need your help but thanks for it anyway. The only problem now is that when I viewed the page on an iPhone the third title "ADVENTURE: Papua,Indonesia, Thailand, Philippines, Singapore, Malaysia" was covered by the second gallery. I assume this is because it is now javascript and not necessarily a coded object/SWF. I tried to space this out with <br />'s to no avail. Maybe with iframes? I can understand if you cant help with this situation...speak to you in another two years!!!

Thanks again.

Re: iOS and Non-flash mobile viewing

In Firefox 13, your galleries are displayed at the right-hand side of the screen.
In order to fix this, change each of your 'sv-container' <div>s from:

<div id="sv-container1"></div>

... to:

<div id="sv-container1" style="float: left;"></div>

This may also help with your gallery title being partially obscured.

Also, because you are embedding all three galleries on the same page, you do not need to load the 'simpleviewer.js' file three times so keep it at the beginning of the embedding code for the first gallery and you can then remove:

<script type="text/javascript" src="/eventsport/svcore/js/simpleviewer.js"></script>

... and:

<script type="text/javascript" src="/adventureport/svcore/js/simpleviewer.js"></script>

... from the second and third galleries respectively.

Steven Speirs
SimpleViewer Support Team.

Re: iOS and Non-flash mobile viewing

Thanks alot