...

View Full Version : picture slideshow on a website help



vivaissy
08-21-2006, 10:06 AM
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

zenweezil
08-29-2006, 10:07 PM
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 (http://www.huddletogether.com/projects/lightbox/)
Lightbox 2 (http://www.huddletogether.com/projects/lightbox2/)

lookaa
09-04-2006, 09:24 AM
Hello issy,

I'm sure I used Wondershare Flash Slideshow Builder (http://www.photo-to-dvd.com/flash-slide-show.html)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.


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

vivaissy
09-05-2006, 01:50 PM
thanks for all your help!

i have gone with this 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.org/english/finterviews.html

vivaissy
09-05-2006, 01:54 PM
thanks for all your help!

i have gone with this 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.org/english/slideshowcode.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum