Results 1 to 8 of 8

Thread: Possible to obtain image source from array?

  1. #1
    Join Date
    Jan 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Possible to obtain image source from array?

    I have a slideshow that uses an array to provide the sources for all the pictures therein.

    What I want is for the user to be able to click on the slideshow at any time, and have the current image appear (full size) in a new window. Also, I want to to this without having to make thumbnail-size copies of each image (there are hundreds) and without having to make individual html files for every image. Is there a way to do this automatically?

    I have never learned anything about javascript and am a total newbie to css. Everything I have here I pieced together from other people's free scripts.

    I thought I could make some kind of onclick event call a function to open a new window, but I don't know how to change the source image dynamically with the slideshow content. Any help would be terrific!

    The script for the slideshow page is below.:

    <html>

    <head>

    <style>
    .Caption {
    font-family: Book Antiqua, Georgia, Garamond, Arial;
    color: #FFFFCC;
    font-style: bold
    {font-size: 150%}
    }
    </style>

    <script>

    // (C) 2002 www.CodeLifter.com
    // http://www.codelifter.com
    // Free for all users, but leave in this header.

    // ==============================
    // Set the following variables...
    // ==============================

    // Set the slideshow speed (in milliseconds)
    var SlideShowSpeed = 3000;

    // Set the duration of crossfade (in seconds)
    var CrossFadeDuration = 0.5;

    var Picture = new Array(); // don't change this
    var Caption = new Array(); // don't change this

    // Specify the image files...
    // To add more images, just continue
    // the pattern, adding to the array below.
    // To use fewer images, remove lines
    // starting at the end of the Picture array.
    // Caution: The number of Pictures *must*
    // equal the number of Captions!

    Picture[1] = 'imgs/ComoOil-Pict01.jpg';
    Picture[2] = 'imgs/ComoOil-Pict02.jpg';
    Picture[3] = 'imgs/ComoOil-Pict03.jpg';
    Picture[4] = 'imgs/ComoOil-Pict04.jpg';
    Picture[5] = 'imgs/ComoOil-Pict05.jpg';
    Picture[6] = 'imgs/ComoOil-Pict06.jpg';
    Picture[7] = 'imgs/ComoOil-Pict07.jpg';
    Picture[8] = 'imgs/ComoOil-Pict08.jpg';
    Picture[9] = 'imgs/ComoOil-Pict09.jpg';
    Picture[10] = 'imgs/ComoOil-Pict10.jpg';
    Picture[11] = 'imgs/ComoOil-Pict11.jpg';

    // Specify the Captions...
    // To add more captions, just continue
    // the pattern, adding to the array below.
    // To use fewer captions, remove lines
    // starting at the end of the Caption array.
    // Caution: The number of Captions *must*
    // equal the number of Pictures!

    Caption[1] = "View from Street";
    Caption[2] = "Front Entry";
    Caption[3] = "First Floor Plan";
    Caption[4] = "Second Floor Plan";
    Caption[5] = "Elevation";
    Caption[6] = "Rear View";
    Caption[7] = "Interior";
    Caption[8] = "Interior";
    Caption[9] = "Interior";
    Caption[10] = "Interior";
    Caption[11] = "Site Plan";


    // =====================================
    // Do not edit anything below this line!
    // =====================================

    var tss;
    var iss;
    var jss = 1;
    var pss = Picture.length-1;

    var preLoad = new Array();
    for (iss = 1; iss < pss+1; iss++){
    preLoad[iss] = new Image();
    preLoad[iss].src = Picture[iss];}

    function runSlideShow(){
    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 = preLoad[jss].src;
    if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
    if (document.all) document.images.PictureBox.filters.blendTrans.Play();
    jss = jss + 1;
    if (jss > (pss)) jss=1;
    tss = setTimeout('runSlideShow()', SlideShowSpeed);
    }

    </script>


    </head>

    <body onload=runSlideShow() bgcolor=#000000>

    <center>

    <table border=0 cellpadding=0 cellspacing=0>
    <tr>
    <!--
    The next table cell holds the captions.
    This table cell must have id=CaptionBox and
    class=Caption in its tag. The default caption
    shows whilst loading in all browsers; NS4
    will show only the default caption, throughout.
    //-->
    <td id=CaptionBox class=Caption align=center bgcolor=#000000 height=60>
    &nbsp
    </td>
    </tr>
    <tr>
    <td height=10>
    </td>
    </tr>
    <TR>
    <!--
    The next table cell holds the images.
    Set cell and image width and height the same.
    The img src must have name=PictureBox in its
    tag. Usually the first image in the Picture
    array in the script is used here.
    //-->
    <td>
    <img src=imgs/ComoOil-Pict01.jpg name=PictureBox width=400>
    </td>
    </tr>
    </table>

    </body>

    </html>

  2. #2
    Join Date
    Dec 2006
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts

    Default

    Quick and dirty, near the end of the code replace the line of image with this;

    <img src=imgs/ComoOil-Pict01.jpg name=PictureBox width=400 onclick="clearTimeout(tss);window.open(this.src)">

  3. #3
    Join Date
    Jan 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That worked a treat! Thanks so much. Is it equally easy to have the new window automatically fit to the picture?

  4. #4
    Join Date
    Jan 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    pssst...not that I'm complaining, but this also stops the slideshow. Can that be fixed?

  5. #5
    Join Date
    Jan 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    eeek....it doesn't work if the page is inside a frame, either.....oh and I was so excited.

  6. #6
    Join Date
    Jan 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Never mind it works just fine--I wasn't looking at the refreshed page. Dumb newbie mistake.

  7. #7
    Join Date
    Dec 2006
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts

    Default

    onclick="clearTimeout(tss);window.open(this.src)">

    If you want the slide show to continue under the new window, remove the bits of
    clearTimeout(tss);

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Crystal Shards View Post
    That worked a treat! Thanks so much. Is it equally easy to have the new window automatically fit to the picture?
    If the images have been successfully preloaded before any of them are clicked on, this will work:

    Code:
    <img src="imgs/ComoOil-Pict01.jpg" name="PictureBox" width="400" onclick="window.open(this.src,'','width='+[preLoad[jss-1>0? jss-1 : pss].width+20]+', height='+[preLoad[jss-1>0? jss-1 : pss].height+20]);">
    Last edited by jscheuer1; 01-13-2007 at 07:50 AM. Reason: correct code
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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