FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


How do I make a simple slideshow?(RESOLVED)





Squeeky
I want to make a simple slideshow to put on the gallery page of my site. It doesn't have to have any fancy effects and I would like the delay to be 20 seconds. Does anyone know how I can do this, I know basic HTML and i looked on hotscripts and it has tonnes of fancy gallery things which I dont want. I also don't want to do it in Flash because it takes too long to load and not everyone has flash player.

Please help,
Regards

Squeeky
mathiaus
dynamic drive to the rescue again. I love this place
http://www.dynamicdrive.com/dynamicindex14/index.html
I'd recommend a specific one but it depends exactly what you want really. Just a slideshow or one a user can pause, fast forward, rewind etc. Either way I'd follow that link and use of those. They give a demo as well so you know what the results going to be like Wink
rohan2kool
Here's a small intro frm my side to do so using JavaScript...
Create an array of your image src's...

Code:

<script type="text/javascript">
   var imgs = new Array();
   imgs[0] = "me.jpg";
   imgs[1] = "mydog.jpg";
   imgs[2] = "mygirl.jpg";
   imgs[3] = "mygirlsdog.jpg";
   imgs[4] = "mygirlsdogsgirl.jpg";
   imgs[5] = "mygirlsdogsgirlsowner.jpg";


additionaly... you may also add captions to it..

Code:

   var captions = new Array();
   captions[0] = "Me";
   captions[1] = "My dog";
   captions[2] = "My Girlfriend";
   captions[3] = "My girlfriend's dog";
   captions[4] = "My Girlfriend's dog's girlfriend";
   captions[5] = "My Girlfriend's dog's girlfriend's owner";


Then you need to create a function to start slideshow...

Code:

   function startShow() {
      var t;
      var c=0;
      initShow();
   }


I made the two functions different so that you may also do any additional things if required while starting the slide show... Now for the initShow() function...

Code:

   function initShow() {
      t = setTimeOut("initShow()", 3000);
      holder.src = imgs[c];
      capts.innerHTML = captions[c];
      c++;
   }


Also, to stop the slideshow... just use the following piece of code:

Code:

clearTimeOut(t);


And dont forget to close it with </script> tag...

the HTML... this is very important.

Code:

<body>
 <img src="" id="holder" />
 <div id="capts"></div>
 <a href="javascript:clearTimeOut(t)">Stop Show</a>
 <a href="javscript:startShow()">Start show</a>
</body>


I believe that'd be all. Feel free to ask any questions...
Squeeky
Thanks so much rohan2kool.

This is the code as I have put it in my site but it doesnt work. I am not familiar with java script so i dont know what to do. I have probably not put in enough info.
Code:
<script type="text/javascript">
   var imgs = new Array();
   imgs[0] = "for ndlc website 002.jpg";
   imgs[1] = "for ndlc website 004.jpg";
   imgs[2] = "for ndlc website 006.jpg";
   imgs[3] = "for ndlc website 007.jpg";
   imgs[4] = "for ndlc website 008.jpg";
   imgs[5] = "for ndlc website 010.jpg";
   imgs[6] = "for ndlc website 013.jpg";
   imgs[7] = "for ndlc website 014.jpg";
   imgs[8] = "for ndlc website 016.jpg";
   imgs[9] = "for ndlc website 017.jpg";
   var captions = new Array();
   captions[0] = "Decorative slabs of Agate";
   captions[1] = "A chain with a turquoise pendant";
   captions[2] = "Gold and silver chains with faceted stones in pendants";
   captions[3] = "A large collection of cabochons and faceted stones";
   captions[4] = "Various natural minerals";
   captions[6] = "Three cabochons on silver chain necklaces";
   captions[7] = "A nice cabochon";
   captions[8] = "A collection of different natural and lapidary items...";
   captions[9] = "Silver chains on quartz";
 
   function startShow() {
      var t;
      var c=0;
      initShow();
   }
 
  function initShow() {
      t = setTimeOut("initShow()", 2000);
      holder.src = imgs[c];
      capts.innerHTML = captions[c];
      c++;
   }
   clearTimeOut(t);
   </script>
<img src="for ndlc website 002.jpg" name="holder" width="640" height="480" id="holder" />
 <div id="capts"></div>
 <a href="javascript:clearTimeOut(t)">Stop Show</a>
 <a href="javscript:startShow()">Start show</a>


I have changed the file names, captions and the delay i think it is and the img source in the HTML. Please tell me what I have done wrong.

Thanks,
Squeeky
virtualpointer
Javascript and java applet can do it for you.

Here is the javascript code for you, edit the file names and urls to fit your site.


Code:
<SCRIPT LANGUAGE="JavaScript">
<!--

//set image paths
src = ["image1.gif", "image2.gif", "image3.gif", "image4.gif"]


//set corresponding urls
url = ["http://somesite.com", "http://yoursite.com", "http://yoursite.com", "http://www.yoursite.com"]

//set duration for each image
duration = 4;

//Please do not edit below
ads=[]; ct=0;
function switchAd() {
var n=(ct+1)%src.length;
if (ads[n] && (ads[n].complete || ads[n].complete==null)) {
document["Ad_Image"].src = ads[ct=n].src;
}
ads[n=(ct+1)%src.length] = new Image;
ads[n].src = src[n];
setTimeout("switchAd()",duration*1000);
}
function doLink(){
location.href = url[ct];
} onload = function(){
if (document.images)
switchAd();
}
//-->
</SCRIPT>

<A HREF="javascript:doLink();" onMouseOver="status=url[ct];return true;"
onMouseOut="status=''">
<IMG NAME="Ad_Image" SRC="image1.gif" BORDER=0>
</A>



Cheers!
phx777
btw i would really recommend you to avoid the usage of spaces in filenames...
mathiaus
if however you do have spaces in the filenames then replace the spaces in scripts, links etc to %20
eg
me pic 1.gif becomes me%20pic%201.gif
Squeeky
Thanks soo much guys for the help. I am just about to try it and will tell you if it works.

Yay! It works great, thanks.
shadedflame
When I have enough point sI want to learn how to use it to do things like this, but I can't stand java script...it seems tooo complicated for its own good, they shouldve left everything in binary code...101010101...see now this is easy! Laughing but I Know its supposed to make things easier, but It confuses me..
svecia
I have a php script that does a slideshow . The neat thing is
that You dont have to change to add new pictures.
Just add pictures to a directory and the script make a slideshow
of it.

Put the code below in a file named index.php :
<html>
<body>
<?php
if ( isset( $next)) {
$nn=$next+1;
} else
{
$nn=0;
}
$i=0;
$found=0;
$path=opendir(".");
while ( $file = readdir($path)) {
if ( $file!="." and $file!=".." and $file!="index.php" ) {
if ( $i==$nn) {
$found=1;
break;
}
$i++;
}
}
if ( $found==1 ) {
echo "<meta http-equiv='refresh' content='10;URL=index.php?next=$nn'>";
echo "<img src=$file></img>";
} else
{
echo "<meta http-equiv='refresh' content='0;URL=index.php'>";
}

echo "</body></html>";
?>
Related topics
Simple or Bulky/Heavy ?
Simple PHP Navigation
Mail with PHP (Simple Tutorial)
the simple guestbook
A Simple Form Mail in PHP
INCREDIBLE THINGS HAPPEN IN AMERICA... In a simple 20$ bill
Gilmore Girls
What i need make here, to make a simple Web Site??
Simple ways to bost your Website Traffic!
When dating a new girl, how long do you wait before you kiss
Simple Plan
simple webserver on cable line.
Sound and Picture Transistion
Looking for Simple Cut & Paste Slideshow with Captions
This topic is locked: you cannot edit posts or make replies.    Frihost Forum Index -> Scripting -> Php and MySQL

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.