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 5 of 5
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question picture slideshow on a website help

    hi,
    i am wondering if it is possible to create a slideshow of photographs on a webpage so that it looks professional (so i am not thinking about the ones on myspace!!).

    i think this can be done in several ways, via javascript or as a animated gif, is there any other way? i also need to add text to the bottom of each photo as an explanation to what each photo is

    any ideas?
    thanks in advance
    issy
    Last edited by vivaissy; 08-21-2006 at 10:22 AM.
    vivaissy

    my music blog

    "...when we planned to go nowhere"

  • #2
    Regular Coder
    Join Date
    Jan 2003
    Posts
    111
    Thanks
    2
    Thanked 0 Times in 0 Posts
    There are a million scripts out there for slide shows - some that actually look professional if you work with them.

    I would recommend checking out the slideshows and galleries at DynamicDrive (a good site to start with when looking for scripts):
    http://www.dynamicdrive.com/dynamicindex4/index.html

    Also, I haven't tried these myself yet, but they look:
    Lightbox
    Lightbox 2

  • #3
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello issy,

    I'm sure I used Wondershare Flash Slideshow Builder in the past and was impressed with its features.
    It lets you automatically create a elegant slideshow of photos on a webpage, complete with stunning transitions and flash animated effects.

    Quote Originally Posted by vivaissy
    hi,
    i am wondering if it is possible to create a slideshow of photographs on a webpage so that it looks professional (so i am not thinking about the ones on myspace!!).

    i think this can be done in several ways, via javascript or as a animated gif, is there any other way? i also need to add text to the bottom of each photo as an explanation to what each photo is

    any ideas?
    thanks in advance
    issy

  • #4
    New Coder
    Join Date
    May 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for all your help!

    i have gone with this code:
    Code:
    <html>
    
    <DIV><head><title>slideshow</title><script language="JavaScript">
    
    <!--
    function doPreload()
    {
    var the_images = new Array('GI_Modell_Background.gif');
    preloadImages(the_images);
    }
    function preloadImages(the_images_array) {
    for(var loop = 0; loop < the_images_array.length; loop++)
    {
    var an_image = new Image();
    an_image.src = the_images_array[loop];
    }
    }
    // -->
    </script>
    </head>
    <body onLoad="doPreload();" STYLE="background-image: url(http://www.governanceinternational.org/english/test/GI_Modell_background3.gif); 
    background-repeat: no-repeat; background-attachment: fixed; background-position: left top"
    font FACE="arial" font COLOR="#606060" LINK="#ff9000" VLINK="#909090">
    <A NAME="top_slides2" ></A>
     <p align="CENTER"><IMG SRC="casebookheader.gif" WIDTH="570" HEIGHT="69"
        ALIGN="BOTTOM" BORDER="0" NATURALSIZEFLAG="3"><BR>
        <IMG SRC="ruler.jpg" WIDTH="567" HEIGHT="10" ALIGN="BOTTOM" 
        BORDER="0" NATURALSIZEFLAG="0">
    </p>
    <p align="center"><b>Community empowerment in Ireland</b> – Strategic planning in the village of <b>Blarney</b> - <i>Photos</i> 
    </p>
    <script language="JavaScript">
    <!-- 
    var interval = 10000; 
    var image_dir = ""
    var ImageNum = 0;
    imageArray = new Array();
    imageArray[ImageNum++] = new imageItem(image_dir + "IMG_0211.JPG");
    imageArray[ImageNum++] = new imageItem(image_dir + "IMG_0192.JPG");
    imageArray[ImageNum++] = new imageItem(image_dir + "IMG_0193.JPG");
    imageArray[ImageNum++] = new imageItem(image_dir + "IMG_0198.JPG");
    imageArray[ImageNum++] = new imageItem(image_dir + "IMG_0199.JPG");
    imageArray[ImageNum++] = new imageItem(image_dir + "IMG_0200.JPG");
    imageArray[ImageNum++] = new imageItem(image_dir + "IMG_0208.JPG");
    
    
    var number_of_image = imageArray.length;
    function imageItem(image_location) {
    this.image_item = new Image();
    this.image_item.src = image_location;
    }
    function get_ImageItemLocation(imageObj) {
    return(imageObj.image_item.src)
    }
    function randNum(x, y) {
    var range = y - x + 1;
    return Math.floor(Math.random() * range) + x;
    }
    function getNextImage() {
    if (0) {
    ImageNum = randNum(0, number_of_image-1);
    }
    else {
    ImageNum = (ImageNum+1) % number_of_image;
    }
    var new_image = get_ImageItemLocation(imageArray[ImageNum]);
    return(new_image);
    }
    function getPrevImage() {
    ImageNum = (ImageNum-1) % number_of_image;
    var new_image = get_ImageItemLocation(imageArray[ImageNum]);
    return(new_image);
    }
    function prevImage(place) {
    var new_image = getPrevImage();
    document[place].src = new_image;
    }
    function rotateImage(place) {
    var new_image = getNextImage();
    document[place].src = new_image;
    var recur_call = "rotateImage('"+place+"')";
    timerID = setTimeout(recur_call, interval);
    }
    //   -->
    </script>
    </head>
    <body align="center" bgcolor="#ffffff" onLoad="rotateImage('rImage')">
    <table border="0" cellpadding="4" cellspacing="0" height="300" width="400" align="center">
    <tr>
    	<td class="td" align="center"><img name="rImage" src="IMG_0211.JPG" border=1 height="350" width="450"><!--<body onLoad="switchImage(slideImg')">-->
    </td>
    </tr>
    <tr>
    	<td class="td" align=center><font size=3><b></b>
    	<p>
    <!--<A href="#top_slides2" onclick="rotateImage('rImage')" >start the slideshow</A>&nbsp;&nbsp;<A href="#top_slides2" onclick="clearTimeout(timerID)" >|| pause the slideshow</A><br>-->
    <A href="#top_slides2" onclick="prevImage('rImage'); clearTimeout(timerID)" ><font size="3" color="#A9A9A9"><i>Previous</i></font></A>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A href="#top_slides2" onclick="rotateImage('rImage'); clearTimeout(timerID)" ><font size="3" color="#A9A9A9"><i>Next</i></font></A><br>
    <!--<A href="slideshowcode.html#top_slides" ><font size="3">Return to First Slide</font>
    </A>--><form action='slideshowcode.html'><input type='submit' value='Return to First Slide'></form>
    <br><font size="1"><i>(pictures may take a second to load)</i></font></td>
    </tr>
    <tr>
    <td><br/><p align="center"><a href="casebook.html">Back to Casebook</a></p><P><CENTER><IMG SRC="ruler.jpg" WIDTH="567" HEIGHT="10" ALIGN="BOTTOM"
        BORDER="0" NATURALSIZEFLAG="0"><TABLE WIDTH="570" BORDER="0"
        CELLSPACING="5" CELLPADDING="5"></td>
    </tr>       
          <TR>
            <TD WIDTH="100%">
            <P><CENTER><B><FONT SIZE="-1" FACE="Times New Roman">Dr. Elke
            Loeffler<BR>
            </FONT></B><FONT SIZE="-1" FACE="Times New Roman">Chief Executive<BR>
            Governance International<BR>
            PO Box 10884<BR>
            Birmingham B1 2XG UK<BR>
            tel/fax: + 44 (0) 121 643 5724<BR>
            email: <A HREF="mailto:elke.loeffler@govint.org">elke.loeffler@govint.org</A></FONT></CENTER></TD>
          </TR>
    </table>
    </body>
    </html>
    </DIV>
    only problem now is i am trying to work out how to add text to each photo to explain what each photo is showing. is this possible with this code?

    here is the web page it creates:
    http://www.governanceinternational.o...nterviews.html
    vivaissy

    my music blog

    "...when we planned to go nowhere"

  • #5
    New Coder
    Join Date
    May 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for all your help!

    i have gone with this code:
    Code:
    <html>
    
    <DIV><head><title>slideshow</title><script language="JavaScript">
    
    <!--
    function doPreload()
    {
    var the_images = new Array('GI_Modell_Background.gif');
    preloadImages(the_images);
    }
    function preloadImages(the_images_array) {
    for(var loop = 0; loop < the_images_array.length; loop++)
    {
    var an_image = new Image();
    an_image.src = the_images_array[loop];
    }
    }
    // -->
    </script>
    </head>
    <body onLoad="doPreload();" STYLE="background-image: url(http://www.governanceinternational.org/english/test/GI_Modell_background3.gif); 
    background-repeat: no-repeat; background-attachment: fixed; background-position: left top"
    font FACE="arial" font COLOR="#606060" LINK="#ff9000" VLINK="#909090">
    <A NAME="top_slides2" ></A>
     <p align="CENTER"><IMG SRC="casebookheader.gif" WIDTH="570" HEIGHT="69"
        ALIGN="BOTTOM" BORDER="0" NATURALSIZEFLAG="3"><BR>
        <IMG SRC="ruler.jpg" WIDTH="567" HEIGHT="10" ALIGN="BOTTOM" 
        BORDER="0" NATURALSIZEFLAG="0">
    </p>
    <p align="center"><b>Community empowerment in Ireland</b> – Strategic planning in the village of <b>Blarney</b> - <i>Photos</i> 
    </p>
    <script language="JavaScript">
    <!-- 
    var interval = 10000; 
    var image_dir = ""
    var ImageNum = 0;
    imageArray = new Array();
    imageArray[ImageNum++] = new imageItem(image_dir + "IMG_0211.JPG");
    imageArray[ImageNum++] = new imageItem(image_dir + "IMG_0192.JPG");
    imageArray[ImageNum++] = new imageItem(image_dir + "IMG_0193.JPG");
    imageArray[ImageNum++] = new imageItem(image_dir + "IMG_0198.JPG");
    imageArray[ImageNum++] = new imageItem(image_dir + "IMG_0199.JPG");
    imageArray[ImageNum++] = new imageItem(image_dir + "IMG_0200.JPG");
    imageArray[ImageNum++] = new imageItem(image_dir + "IMG_0208.JPG");
    
    
    var number_of_image = imageArray.length;
    function imageItem(image_location) {
    this.image_item = new Image();
    this.image_item.src = image_location;
    }
    function get_ImageItemLocation(imageObj) {
    return(imageObj.image_item.src)
    }
    function randNum(x, y) {
    var range = y - x + 1;
    return Math.floor(Math.random() * range) + x;
    }
    function getNextImage() {
    if (0) {
    ImageNum = randNum(0, number_of_image-1);
    }
    else {
    ImageNum = (ImageNum+1) % number_of_image;
    }
    var new_image = get_ImageItemLocation(imageArray[ImageNum]);
    return(new_image);
    }
    function getPrevImage() {
    ImageNum = (ImageNum-1) % number_of_image;
    var new_image = get_ImageItemLocation(imageArray[ImageNum]);
    return(new_image);
    }
    function prevImage(place) {
    var new_image = getPrevImage();
    document[place].src = new_image;
    }
    function rotateImage(place) {
    var new_image = getNextImage();
    document[place].src = new_image;
    var recur_call = "rotateImage('"+place+"')";
    timerID = setTimeout(recur_call, interval);
    }
    //   -->
    </script>
    </head>
    <body align="center" bgcolor="#ffffff" onLoad="rotateImage('rImage')">
    <table border="0" cellpadding="4" cellspacing="0" height="300" width="400" align="center">
    <tr>
    	<td class="td" align="center"><img name="rImage" src="IMG_0211.JPG" border=1 height="350" width="450"><!--<body onLoad="switchImage(slideImg')">-->
    </td>
    </tr>
    <tr>
    	<td class="td" align=center><font size=3><b></b>
    	<p>
    <!--<A href="#top_slides2" onclick="rotateImage('rImage')" >start the slideshow</A>&nbsp;&nbsp;<A href="#top_slides2" onclick="clearTimeout(timerID)" >|| pause the slideshow</A><br>-->
    <A href="#top_slides2" onclick="prevImage('rImage'); clearTimeout(timerID)" ><font size="3" color="#A9A9A9"><i>Previous</i></font></A>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A href="#top_slides2" onclick="rotateImage('rImage'); clearTimeout(timerID)" ><font size="3" color="#A9A9A9"><i>Next</i></font></A><br>
    <!--<A href="slideshowcode.html#top_slides" ><font size="3">Return to First Slide</font>
    </A>--><form action='slideshowcode.html'><input type='submit' value='Return to First Slide'></form>
    <br><font size="1"><i>(pictures may take a second to load)</i></font></td>
    </tr>
    <tr>
    <td><br/><p align="center"><a href="casebook.html">Back to Casebook</a></p><P><CENTER><IMG SRC="ruler.jpg" WIDTH="567" HEIGHT="10" ALIGN="BOTTOM"
        BORDER="0" NATURALSIZEFLAG="0"><TABLE WIDTH="570" BORDER="0"
        CELLSPACING="5" CELLPADDING="5"></td>
    </tr>       
          <TR>
            <TD WIDTH="100%">
            <P><CENTER><B><FONT SIZE="-1" FACE="Times New Roman">Dr. Elke
            Loeffler<BR>
            </FONT></B><FONT SIZE="-1" FACE="Times New Roman">Chief Executive<BR>
            Governance International<BR>
            PO Box 10884<BR>
            Birmingham B1 2XG UK<BR>
            tel/fax: + 44 (0) 121 643 5724<BR>
            email: <A HREF="mailto:elke.loeffler@govint.org">elke.loeffler@govint.org</A></FONT></CENTER></TD>
          </TR>
    </table>
    </body>
    </html>
    </DIV>
    only problem now is i am trying to work out how to add text to each photo to explain what each photo is showing. is this possible with this code?

    here is the web page it creates:
    http://www.governanceinternational.o...eshowcode.html
    vivaissy

    my music blog

    "...when we planned to go nowhere"


  •  

    Posting Permissions

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