Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Important Slideshow question

    Any help would be greatly appreciated.

    I am building a site for my photography and friends as well. Itís still very early in development because Iím having issues figuring out how to set up a slideshow the way I want it to be. I finally found the script that displays the things I want (i.e. the image, a description, who it was taken by and then number of pictures). The script is below but here is a link so you can see it in action -
    http://www.endhaven.com/thehold/phot...lideshow.shtml

    That is all fine and dandy but here is the issue that I canít figure outÖ The page before the slideshow has a bunch of thumbnails and each thumbnail links to that one page "slideshow.shtml". That page is here - http://www.endhaven.com/thehold/phot...ms/index.shtml
    How do I have the slideshow start on the picture that was selected on the thumbnail page?

    I know that I could easily just create as many slideshow.shtml pages as I have pictures and then just rearrange the images but I will be creating other sections that will have 50+ pictures on them. So I think it would be silly to do all that work since I know this can be done.

    I found a script that did similar things but it didnít do the other things I listed above (showing the image, a description, who it was taken by and then number of pictures). Also the other script I found opened it in a separate window and I donít want to do that.

    If anyone out there knows of a script that does what Iím looking for please let me know because I couldnít find one anywhere. Please, please, please help me out.

    It may seem like it would be rather simple but I can't figure it out for the life of me.

    Here is the script I'm using just in case it helps out:

    `````````````````````````````````````````````
    <table width="652" border="0" bgcolor="#669900">
    <tr><td>
    <table align="center">
    <tr align="center"><td>
    <input type="button" id="btnPrev" value="< " onclick="Prev();" class="btn" onmouseover="hov(this,'btn btnhov')" onmouseout="hov(this,'btn')" /> <input type="button" id="bntPlay" value="Stop & Go" onclick="Play()" class="btn" onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'"/> <input type="button" id="btnNext" value=" >" onclick="Next();" class="btn" onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'"/>
    <br>
    </td></tr>

    <tr align="center" class="Photography"><td>
    <img id="_Ath_Slide" onload="OnImgLoad()" class="pictureborder">
    </td></tr>

    <tr align="center"><td>
    <table class="Photography"><tr><td align="left">
    <b>Description:</b> <SPAN id="_Ath_FileName"> </SPAN> <br>
    <b>Photo By:</b> <SPAN id="_Ath_FileBy"> </SPAN> <br>
    <b>Number of Pictures:</b> <b><SPAN id="_Ath_Img_X"></SPAN></b>&nbsp;of&nbsp;&nbsp;<b><SPAN id="_Ath_Img_N"></SPAN></b>
    </td></tr>
    </table>
    </td></tr>
    </table>

    <p align="center">

    <script language="JavaScript1.2">

    /*
    Interactive Image slideshow with text description
    By Christian Carlessi Salvadů (cocolinks@c.net.gt). Keep this notice intact.
    Visit http://www.dynamicdrive.com for script
    */


    g_fPlayMode = 0;
    g_iimg = -1;
    g_imax = 0;
    g_ImageTable = new Array();

    function ChangeImage(fFwd)
    {
    if (fFwd)
    {
    if (++g_iimg==g_imax)
    g_iimg=0;
    }
    else
    {
    if (g_iimg==0)
    g_iimg=g_imax;
    g_iimg--;
    }
    Update();
    }

    function getobject(obj){
    if (document.getElementById)
    return document.getElementById(obj)
    else if (document.all)
    return document.all[obj]
    }

    function Update(){
    getobject("_Ath_Slide").src = g_ImageTable[g_iimg][0];
    getobject("_Ath_FileName").innerHTML = g_ImageTable[g_iimg][1];
    getobject("_Ath_FileBy").innerHTML = g_ImageTable[g_iimg][2];
    getobject("_Ath_Img_X").innerHTML = g_iimg + 1;
    getobject("_Ath_Img_N").innerHTML = g_imax;
    }


    function Play()
    {
    g_fPlayMode = !g_fPlayMode;
    if (g_fPlayMode)
    {
    getobject("btnPrev").disabled = getobject("btnNext").disabled = true;
    Next();
    }
    else
    {
    getobject("btnPrev").disabled = getobject("btnNext").disabled = false;

    }
    }
    function OnImgLoad()
    {
    if (g_fPlayMode)
    window.setTimeout("Tick()", g_dwTimeOutSec*1000);
    }
    function Tick()
    {
    if (g_fPlayMode)
    Next();
    }
    function Prev()
    {
    ChangeImage(false);
    }
    function Next()
    {
    ChangeImage(true);
    }


    ////configure below variables/////////////////////////////

    //configure the below images and description to your own.
    g_ImageTable[g_imax++] = new Array ("/images/photography/jeremiahisms/Sylvia011.jpg", "Sylvia", "");
    g_ImageTable[g_imax++] = new Array ("/images/photography/jeremiahisms/Justin000.jpg", "Justin", "");
    g_ImageTable[g_imax++] = new Array ("/images/photography/jeremiahisms/Chris005.jpg", "Chris", "");
    g_ImageTable[g_imax++] = new Array ("/images/photography/jeremiahisms/Chris002.jpg", "Chris", "");
    g_ImageTable[g_imax++] = new Array ("/images/photography/jeremiahisms/Tysen010.jpg", "Tysen", "");
    //g_ImageTable[g_imax++] = new Array ("", "", "");
    //extend the above list as desired
    g_dwTimeOutSec=2

    ////End configuration/////////////////////////////

    if (document.getElementById||document.all)
    window.onload=Next

    </script>
    </p>
    </td></tr></table>

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Here's one you should be able to adapt for your layout

    Page1.htm


    <HTML>
    <HEAD>
    <TITLE>Document Title</TITLE>

    <script language="javascript">
    <!--
    var launchSlideShowX = (screen.width/2)-191;
    var launchSlideShowY = (screen.height/2)-238;
    var pos = "left="+launchSlideShowX+",top="+launchSlideShowY;
    function launchSlideShow(n){
    location.href="page2.htm?"+n
    }
    //-->
    </script>

    </HEAD>
    <BODY>

    <img src="images/pic01_tn.jpg" width="50" height="50" border="0" onclick="launchSlideShow(0)">
    <img src="images/pic02_tn.jpg" width="50" height="50" border="0" onclick="launchSlideShow(1)">
    <img src="images/pic03_tn.jpg" width="50" height="50" border="0" onclick="launchSlideShow(2)"><BR>

    open popup and start slideshow from chosen thumbnail

    </BODY>
    </HTML>


    {b]Page2.htm[/B]


    <HTML>
    <HEAD>
    <TITLE>Document Title</TITLE>
    <script language="javascript">
    <!--
    // ==============================
    // Set the following variables...
    // ==============================

    var picture = new Array(); // Specify the image files...
    picture[0] = 'images/pic01_tn.jpg';
    picture[1] = 'images/pic02_tn.jpg';
    picture[2] = 'images/pic03_tn.jpg';

    var Caption = new Array(); // Specify the Captions...
    Caption[0] = "This is the first caption.";
    Caption[1] = "This is the second caption.";
    Caption[2] = "This is the third caption.";

    if (location.search.length > 0){
    data = unescape(location.search.substring(1))
    var jss= data
    }
    else{
    var jss = 0;
    }

    var preload = new Array();
    for (var iss = 0; iss < picture.length; iss++){
    preload[iss] = new Image();
    preload[iss].src = picture[iss];
    }

    function init_show(){
    document.images.pictureBox.src = picture[jss];
    }

    function control(how){
    if (how=="H"){jss = 1}
    if (how=="F"){jss++}
    if (how=="B"){jss--}
    if (jss > picture.length-1){jss=0}
    if (jss < 0){jss = pss}
    if (document.all){
    document.images.pictureBox.style.filter="blendTrans(duration=2)";
    document.images.pictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
    document.images.pictureBox.filters.blendTrans.Apply();}
    document.images.pictureBox.src = picture[jss];
    if (document.getElementById){
    document.getElementById("CaptionBox").innerHTML= Caption[jss]
    }
    if(document.all){
    document.images.pictureBox.filters.blendTrans.Play();
    }

    }
    //-->
    </script>

    <HEAD>
    <BODY onload='init_show();self.focus();' bgcolor=#000000 link="#FF0000" vlink="#FF0000" alink="#FF0000">

    <div align="center">
    <center>
    <table border=0 cellpadding=10 cellspacing=0>
    <tr>
    <td width=350 height=280 colspan="3">
    <img src=image00.gif name=pictureBox width=350 height=280>
    </td>
    </tr>
    <tr>
    <td id=CaptionBox class=Caption align=center colspan="3">
    This is the default caption.
    </td>
    </tr>
    <tr>
    <td align="center">
    <a class=Controls href="#" onclick="control('B');">< <</a>
    </td>
    <td align="center">
    <a class=Controls href="#" onclick="control('H');">| | |</a>
    </td>
    <td align="center">
    <a class=Controls href="#" onclick="control('F');"><b>> ></b></a>
    </td>
    </tr>
    </table>
    </center>
    </div>
    </BODY>
    </HTML>

    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help Mr J but that is the other one that I already tried to adabt and ran into issues. One of the biggest issues is it opens in a separate widow and I don't want to do that. I just don't know how to change it to not open in another window. Thank you so very much for the help though.

    Any other advice would be greatly appreciated.

  • #4
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    You will have to pass data on the image selected from the thumbnail page. Like :
    Code:
    <a href="http://www.endhaven.com/thehold/pho...slideshow.shtml?3">
      <img src="4th thumbnail image">
    </a>
    then on the slideshow page read the value and start the image array at the corresponding numeric placeholder. The variable assignment g_iimg = -1; sets the slideshow to start at the first image, if you set this value on the fly you can start the slideshow at any point.

    Try replacing the fixed variable line :
    Code:
    g_iimg = -1;
    with
    Code:
    var ref = location.href.toString();
    var num = ref.split("?");
    if (!num[1]) g_iimg=-1;
    else g_iimg=num[1];
    /Bob

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Similar to rwedges reply


    Look for this line near the top of the script and delete

    g_iimg = -1;

    Then put this at the beginning of the script

    if (location.search.length > 0){
    dataPassed = unescape(location.search.substring(1))
    g_iimg=dataPassed-1
    }
    else{
    g_iimg = -1
    }

    In your thumbnail links append the thumbnail number to the file info

    slideshow.shtml?0

    Remember to start from zero
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #6
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you both so very much! I've got it now. I can't thank you enough.

    Have a great and wonderful day!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •