• slideshow

    By heinz koton 2 decades ago

    may be i'm already to tired to find the solution by myself. i searched through the project as well. i found a few hints: picture numbering - done, no subfolders - done, no firefox - done with ie 6 sp2 the following status message appears: Picture is loading…(1of 6). Please wait…

    ideas? still wrong config?



    additional:

    and could i suggest to put a next and prev. button on the form(s)

    • Re: slideshow

      By Christian Brandlehner 2 decades ago

      Have a look at the slideshows HTML source (in the browser). Are the URLs to your pictures OK and working?

      If not, what is wrong with the URLs?

      • html source (slideshow)

        By heinz koton 2 decades ago

        hi chris, thxs for quick response.

        for my opinion the html url's are correct and working, here they are:





        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

        <html>

        <head>

        <!– BlogSphere for IBM Lotus Domino: http://www.blogsphere.net –>

        <!– Visit http://www.openntf.org for project information –>

        <link rel="alternate" type="application/rss+xml" title="RSS News Feed" href="http://www.ikotec.at/pub/pictbase.nsf/stories.xml">

        <base href="http://www.ikotec.at/pub/pictbase.nsf/">

        <script type="text/javascript" src="http://www.ikotec.at/pub/pictbase.nsf/comments.js"></script>



        <title>Picture Base, Test</title><link rel="alternative stylesheet" Media="print" title="PrintOut" type="text/css" href="0/print.css"> <link rel="stylesheet" Media="screen" type="text/css" href="0/sample.css"> <meta http-equiv="Link" content="&lt;http://chris.brandlehner.at&gt;; rel=prefetch"> <meta name="generator" content="Lotus Notes"> <meta name="ROBOTS" content="INDEX,FOLLOW"> <script type="text/javascript" src="0/print.js"></script> <script type="text/javascript" src="0/search.js"></script>



        </head>

        <body text="#000000" bgcolor="#FFFFFF">

        <input type="hidden" name="DBPath" value="pub/pictbase.nsf" ><input type="hidden" name="Server_Name" value="www.ikotec.at" ><script language="JavaScript" type="text/javascript">

        var comments="";

        var CommentBy="";

        </script><!– Form AlbumSlideshow –>

        <script language="JavaScript" SRC="/pub/pictbase.nsf/client_sniff.js"></script>

        <script language="JavaScript">

        // Browser capabilities detection —

        // - assume only IE4+ and NAV6+ can do image resizing, others redirect to low

        if ( (is_ie && !is_ie4up) || (is_opera && !is_opera5up) || (is_nav && !is_nav6up)) {

        document.location = "http://www.ikotec.at/pub/pictbase.nsf";

        }

        </script>

        <!– restricting to category: Test in view vwASCp user access is 2, 0, 0, 0, 0, 0, 0, 1, 1 –>

        <p><a id="photo_urls_1" href="/pub/pictbase.nsf/pictures/HKOT-6F3QBS/$File/HKOT-6F3QBS.jpg"></a>

        <a id="full_photo_urls_1" href="/pub/pictbase.nsf/pictures/HKOT-6F3QBS/$File/HKOT-6F3QBS.jpg"></a>

        <a id="photo_urls_2" href="/pub/pictbase.nsf/pictures/HKOT-6F3QBU/$File/HKOT-6F3QBU.jpg"></a>

        <a id="full_photo_urls_2" href="/pub/pictbase.nsf/pictures/HKOT-6F3QBU/$File/HKOT-6F3QBU.jpg"></a>

        <a id="photo_urls_3" href="/pub/pictbase.nsf/pictures/HKOT-6F3QBV/$File/HKOT-6F3QBV.jpg"></a>

        <a id="full_photo_urls_3" href="/pub/pictbase.nsf/pictures/HKOT-6F3QBV/$File/HKOT-6F3QBV.jpg"></a>

        <a id="photo_urls_4" href="/pub/pictbase.nsf/pictures/HKOT-6F3QBX/$File/HKOT-6F3QBX.jpg"></a>

        <a id="full_photo_urls_4" href="/pub/pictbase.nsf/pictures/HKOT-6F3QBX/$File/HKOT-6F3QBX.jpg"></a>



        <a id="photo_urls_5" href="/pub/pictbase.nsf/pictures/HKOT-6F3QBZ/$File/HKOT-6F3QBZ.jpg"></a>

        <a id="full_photo_urls_5" href="/pub/pictbase.nsf/pictures/HKOT-6F3QBZ/$File/HKOT-6F3QBZ.jpg"></a>

        <a id="photo_urls_6" href="/pub/pictbase.nsf/pictures/HKOT-6F3QBQ/$File/HKOT-6F3QBQ.jpg"></a>

        <a id="full_photo_urls_6" href="/pub/pictbase.nsf/pictures/HKOT-6F3QBQ/$File/HKOT-6F3QBQ.jpg"></a>

        </p><script language="JavaScript">

        var timer;

        var current_location = 1;

        var next_location = 1;

        var pics_loaded = 0;

        var onoff = 0;

        var fullsized = 0;

        var direction = 1;

        var timeout_value;

        var images = new Array;

        var photo_urls = new Array;

        var full_photo_urls = new Array;

        var photo_captions = new Array;

        var transitionNames = new Array;

        var transitions = new Array;

        var current_transition = 0;

        var loop = 0;

        photo_captions[1] = "";

        photo_captions[2] = "";

        photo_captions[3] = "";

        photo_captions[4] = "";

        photo_captions[5] = "";

        photo_captions[6] = "";



        transitions[0] = "progid:DXImageTransform.Microsoft.Fade(duration=1)";

        transitions[1] = "progid:DXImageTransform.Microsoft.Blinds(Duration=1,bands=20)";

        transitions[2] = "progid:DXImageTransform.Microsoft.Checkerboard(Duration=1,squaresX=20,squaresY=20)";

        transitions[3] = "progid:DXImageTransform.Microsoft.Strips(Duration=1,motion=rightdown)";

        transitions[4] = "progid:DXImageTransform.Microsoft.Barn(Duration=1,orientation=vertical)";

        transitions[5] = "progid:DXImageTransform.Microsoft.GradientWipe(duration=1)";

        transitions[6] = "progid:DXImageTransform.Microsoft.Iris(Duration=1,motion=out)";

        transitions[7] = "progid:DXImageTransform.Microsoft.Wheel(Duration=1,spokes=12)";

        transitions[8] = "progid:DXImageTransform.Microsoft.Pixelate(maxSquare=10,duration=1)";

        transitions[9] = "progid:DXImageTransform.Microsoft.RadialWipe(Duration=1,wipeStyle=clock)";

        transitions[10] = "progid:DXImageTransform.Microsoft.RandomBars(Duration=1,orientation=vertical)";

        transitions[11] = "progid:DXImageTransform.Microsoft.Slide(Duration=1,slideStyle=push)";

        transitions[12] = "progid:DXImageTransform.Microsoft.RandomDissolve(Duration=1,orientation=vertical)";

        transitions[13] = "progid:DXImageTransform.Microsoft.Spiral(Duration=1,gridSizeX=40,gridSizeY=40)";

        transitions[14] = "progid:DXImageTransform.Microsoft.Stretch(Duration=1,stretchStyle=push)";

        transitions[15] = "special case";

        var transition_count = 15;

        var photo_count = 6;

        // - IE5.5 and up can do the blending transition.

        var browserCanBlend = (is_ie5_5up);



        function stopOrStart() {

        if (onoff) {

        stop();

        } else {

        play();

        }

        }



        function fullOrNormal() {

        images = new Array;

        pics_loaded=0;

        if (fullsized) {

        normal();

        } else {

        full();

        }

        next_location = current_location;

        preload_photo(next_location);

        go_to_next_photo();

        }



        function toggleLoop() {

        if (loop) {

        loop = 0;

        } else {

        loop = 1;

        }

        }



        function changeElementText(id, newText) {

        element = document.getElementById(id);

        element.innerHTML = newText;

        }



        function stop() {

        changeElementText("stopOrStartText", "play");



        onoff = 0;

        status = "The slide show is stopped, Click [play] to resume.";

        clearTimeout(timer);



        }



        function play() {

        changeElementText("stopOrStartText", "stop");



        onoff = 1;

        window.status = "Slide show is running…";

        go_to_next_photo();

        }



        function full() {

        changeElementText("fullOrNormalText", "normal size");

        fullsized = 1;

        status = "The slide is showing full sized images, Click [normal size] to view resized images.";

        }



        function normal() {

        changeElementText("fullOrNormalText", "full size");



        fullsized = 0;

        status = "The slide is showing normal sized images, Click [full size] to view full sized images.";

        }



        function changeDirection() {

        if (direction == 1) {

        direction = -1;

        changeElementText("changeDirText", "forward direction");

        } else {

        direction = 1;

        changeElementText("changeDirText", "reverse direction");

        }

        preload_next_photo();



        }



        function change_transition() {

        current_transition = document.TopForm.transitionType.selectedIndex;

        }



        function preload_complete() {

        }



        function reset_timer() {

        clearTimeout(timer);

        if (onoff) {

        timeout_value = document.TopForm.time.options[document.TopForm.time.selectedIndex].value * 1000;

        timer = setTimeout('go_to_next_photo()', timeout_value);

        }

        }



        function wait_for_current_photo() {



        / Show the current photo /

        if (!show_current_photo()) {



        /*

        • The current photo isn't loaded yet. Set a short timer just to wait
        • until the current photo is loaded.

          /

          status = "Picture is loading…(" + current_location + " of " + photo_count + "). Please wait…" ;

          clearTimeout(timer);

          timer = setTimeout('wait_for_current_photo()', 500);

          return 0;

          } else {

          status = "Slide show is running…" ;

          preload_next_photo();

          reset_timer();

          }

          }



          function go_to_next_photo() {

          /           Go to the next location /

          current_location = next_location;



          /           Show the current photo /

          if (!show_current_photo()) {

          wait_for_current_photo();

          return 0;

          }



          preload_next_photo();

          reset_timer();

          }



          function preload_next_photo() {



          /           Calculate the new next location /

          next_location = (parseInt(current_location) + parseInt(direction));

          if (next_location > photo_count) {

          next_location = 1;

          if (!loop) {

          stop();

          }

          }

          if (next_location == 0) {

          next_location = photo_count;

          if (!loop) {

          stop();

          }

          }



          /           Preload the next photo /

          preload_photo(next_location);

          }



          function show_current_photo() {



          /
        • If the current photo is not completely loaded don't display it.

          /

          if (!images[current_location] || !images[current_location].complete) {

          preload_photo(current_location);

          return 0;

          }



          /           transistion effects */

          if (browserCanBlend){

          var do_transition;

          if (current_transition == (transition_count)) {

          do_transition = Math.floor(Math.random() * transition_count);

          } else {

          do_transition = current_transition;

          }

          document.images.slide.style.filter=transitions[do_transition];

          document.images.slide.filters[0].Apply();

          }

          document.slide.src = images[current_location].src;

          if (is_ie)

          {

          var mH = document.body.offsetHeight-90, mW = document.body.offsetWidth-10;

          //alert(document.body.offsetHeight);

          };

          if (is_nav)

          {

          //alert(document.body.offsetHeight);

          var mH = window.outerHeight-270, mW = window.outerWidth-40;

          };

          //var oH = document.slide.height, oW = document.slide.width;

          var oH = images[current_location].height, oW = images[current_location].width;

          if( oH > mH || oW > mW )

          {

          mH = mH/ oH; mW = mW/ oW;

          var zoomFactor = ( mH < mW ) ? mH : mW;

          oH = Math.floor( oH * zoomFactor );

          oW = Math.floor( oW * zoomFactor );

          if (is_ie || is_nav)
          {<br/>
document.slide.height = oH;<br/>
document.slide.width = oW;<br/>
};<br/>
          } else

          {

          document.slide.height = images[current_location].height;

          document.slide.width = images[current_location].width;

          };



          setCaption(photo_captions[current_location]);



          if (browserCanBlend) {

          document.images.slide.filters[0].Play();

          }



          return 1;

          }



          function preload_photo(index) {



          / Load the next picture /

          if (pics_loaded < photo_count) {



          / not all the pics are loaded. Is the next one loaded? /

          if (!images[index]) {

          images[index] = new Image;

          images[index].onLoad = preload_complete();

          if (fullsized) {
           images[index].src = document.getElementById(&quot;full_photo_urls_&quot; + index).href;<br/>
          } else {
           images[index].src = document.getElementById(&quot;photo_urls_&quot; + index).href;<br/>
          }

          pics_loaded++;

          }

          }

          }



          function setCaption(text) {

          changeElementText("caption", "[" + current_location + " of " + photo_count + "] " + text);

          }



          </Script>

          <form name="TopForm">

          <span class=SlideshowControls>

          <a href="/pub/pictbase.nsf/albums/HKOT-6F3Q4R"></a>

          &nbsp;<a class="SlideshowControls" href='#' onClick='stopOrStart(); return false;'>[

          <span id='stopOrStartText'>stop</span></a>&nbsp;<a class="SlideshowControls" href='#' onClick='changeDirection(); return false;'>[

          <span id='changeDirText'>reverse direction</span></a>&nbsp;<a class="SlideshowControls" href='#' onClick='fullOrNormal(); return false;'>[

          <span id='fullOrNormalText'>full size</span></a>&nbsp;&nbsp;||

          &nbsp;Delay:&nbsp;<select name="time" size=1 onchange="reset_timer()" style="font-size:10px;">



          <option value=1 >1 second</option>

          <option value=2 >2 seconds</option>

          <option value=3>3 seconds</option>

          <option value=4 >4 seconds</option>

          <option value=5 selected>5 seconds</option>

          <option value=10 >10 seconds</option>

          <option value=15 >15 seconds</option>

          <option value=30 >30 seconds</option>



          <option value=45 >45 seconds</option>



          <option value=60 >60 seconds</option>

          </select>

          <script language="Javascript">

          / show the blend select if appropriate /

          if (browserCanBlend) {
           document.write('&amp;nbsp;Transition:&lt;select name=&quot;transitionType&quot; size=1  onchange=&quot;change_transition()&quot; style=&quot;font-size:10px;&quot;&gt; &lt;option value=0 selected&gt;Blend&lt;/option&gt; &lt;option value=1 &gt;Blinds&lt;/option&gt; &lt;option value=2 &gt;Checkerboard&lt;/option&gt; &lt;option value=3 &gt;Diagonal&lt;/option&gt; &lt;option value=4 &gt;Doors&lt;/option&gt; &lt;option value=5 &gt;Gradient&lt;/option&gt; &lt;option value=6 &gt;Iris&lt;/option&gt; &lt;option value=7 &gt;Pinwheel&lt;/option&gt; &lt;option value=8 &gt;Pixelate&lt;/option&gt; &lt;option value=9 &gt;Radial&lt;/option&gt; &lt;option value=10 &gt;Rain&lt;/option&gt; &lt;option value=11 &gt;Slide&lt;/option&gt; &lt;option value=12 &gt;Snow&lt;/option&gt; &lt;option value=13 &gt;Spiral&lt;/option&gt; &lt;option value=14 &gt;Stretch&lt;/option&gt; &lt;option value=15 &gt;RANDOM!&lt;/option&gt; &lt;/select&gt; ');<br/>
          }



          </script>
          &amp;nbsp;Loop:&amp;nbsp;&lt;input type=&quot;checkbox&quot; name=&quot;loopCheck&quot;  onclick='toggleLoop();'&gt;<br/>
&lt;/span&gt;<br/>


          </form>



          <table width=1% border=0 cellspacing=0 cellpadding=0>

          <tr bgcolor="#999999">

          <td colspan=3 height=1><img src="/icons/ecblank.gif" width="1" height="1" alt=""></td>

          </tr>

          <tr>

          <td bgcolor="#999999" width=1><img src="/icons/ecblank.gif" width="1" height="1" alt=""></td>

          <script language="JavaScript">

          firstPhotoURL = document.getElementById("photo_urls_" + 1).href;

          document.write("<td><img border=0 src=\"");

          document.write(firstPhotoURL);

          document.write("\" name=slide alt=image></td>");

          </script>

          <td bgcolor="#999999" width=1><img src="/icons/ecblank.gif" width="1" height="1" alt=""></td>



          </tr>

          <tr bgcolor="#999999">

          <td colspan=3 height=1><img src="/icons/ecblank.gif" width="1" height="1" alt=""></td>

          </tr>

          </table>

          <br>



          <script language="Javascript">

          / show the caption /

          document.write("<div class='SlideshowCaption' id='caption'></div>");



          / Load the first picture /

          setCaption(photo_captions[1]);

          preload_photo(1);



          / Start the show. /

          play();



          </script>

          </body>

          </html>

        • re: html source

          By Christian Brandlehner 2 decades ago

          problem is that line:/pub/pictbase.nsf/client_sniff.js

          there seems to be no design element (it should be a page) named "client_sniff.js".



          Please can you check that with the designer client?

          • client_sniff.js (slideshow)

            By heinz koton 2 decades ago

            i'm sorry i made a design synopsis as well there is no "client_sniff.js" design element in 1.1.9 template dowloaded yesterday.

            • V1.1.9a

              By heinz koton 2 decades ago

              version 1.1.9a verified working fine thnx a lot.



              may i suggest to mark the template file name, the template name and the db title with the release version eg: "open_picture_template119a.ntf", "Open Notes Picture DB Master119a" and "Open Notes Picture Database Template119a".

              • re: template name

                By Christian Brandlehner 2 decades ago

                If I change the template name to include the release number, you can't use refresh design. I manage several databases and do not want to use "replace design" for all of them manually.