Jump to content
Sign in to follow this  
natimage

Image Script

Recommended Posts

OK...I'm familiar with some of the image gallery scripts and slide show scripts, but I can't seem to find something that will do exactly what I want.

 

I don't actually want a gallery! Let me try to explain. I have a photos.php page. This would be an introduction to the photos section of the site. Then, using a database or whatever method is out there, I'd like to have users view all the images (no thumbnails), one by one, using next and back buttons. The site will probably maintain no more than 20-30 images, to be changed out as new photos become available.

 

It really doesn't need to be very complicated. I'm sure it would be pretty easy to do using php and mysql...but I'm not very well versed in such things yet! If someone could get me started, I'd be willing to learn though!

 

Any ideas/recommendations will be appreciated!!!

Share this post


Link to post
Share on other sites

Hi Tracy.

 

Here's one I came across that's pure php - no javascrpt involved I think. Put it in the directory with your images and call it. Modification possible but not necessary:

 

http://www.zinkwazi.com/pages.php?page_name=scripts

 

Then, here's the code of one that uses php to build a javascript array of the files in the directory. I don't even remember where I got this one. Again, you can just put it in the directory with the images and call it. I modified it myself so it has forward and back 'buttons' and a pause/play button.

<?php

//This script originally written by random 1-16-2001

//Free for use and modification, just give me a little credit eh? ;-)

 

//I wouldn't edit this unless you know what you're doing...

$handle=opendir('.'); //current directory, can be changed

$counter = 0;

while ($file = readdir($handle)) {

  //check file type for images

  $the_type = strrchr($file, ".");

  $is_picture = eregi("jpg|gif|bmp|png",$the_type);  //adjust for other image types

  if ($file != "." and $file != ".." and $is_picture) {

    $mypics[$counter]= $file;

    $counter++;

    }

  }

closedir($handle);

sort($mypics);

?>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

 

<html>

<head>

<title>Slide Show</title>

<script type="text/javascript">

<!--

<?php

//pic for starting point

$firstpic = $mypics[0];

//loop to write array for Javascript, except last element

print('var imagearray = new Array(');

for ($i=0; $i < ($counter-1); $i++) { print("'" . $mypics[$i] . "', "); }

//write last element with different string

print("'" . $mypics[$counter-1] . "');\n");

?>

 

maximum = imagearray.length;

 

var rotation = (maximum - 1);  // initialize

var mydelay = 3000; // milliseconds between slides

var pause = 0; // pause flag

 

function chgImage() {

if (document.images) { document.images.rotate.src = imagearray[rotation]; }

else { document.all.rotate.src = imagearray[rotation]; }

}

 

function nextImage() {

pause = 1;

rotation++;

if (rotation == maximum) {rotation = 0;}

chgImage();

}

 

function priorImage() {

pause = 1;

if (rotation == 0) {rotation = maximum;}

rotation--;

chgImage();

}

function rotate(){

if (pause == 1);

else {

  rotation++;

  if (rotation == maximum) rotation = 0;

  chgImage();

  mytimer = setTimeout("rotate()", mydelay);

}

}

 

function pausePlay() {

if (pause == 1) {

  pause = 0;

  rotate();

}

else pause = 1;

}

 

function showInit() {

rotation++;

if (rotation == maximum) {rotation = 0;}

if (pause == 1);

else {mytimer = setTimeout("rotate()", mydelay);}

}

//-->

</script>

 

</head>

 

<body onLoad="showInit()">

 

<p align="center">

<table width="340" height="340" border="0" cellspacing="0" cellpadding="20">

<tr>

  <td align="center"><img name="rotate" src="<?php print($firstpic); ?>" border="0" alt="" /></td>

</tr>

</table><br>

<a href="java script:priorImage()" onFocus="if(this.blur)this.blur()"><<</a>  <a href="java script:pausePlay()" onFocus="if(this.blur)this.blur()">•</a>  <a href="java script:nextImage()" onFocus="if(this.blur)this.blur()">>></a>

</p>

 

</body>

</html>

 

I have used the second one several times. The first one I've tried out for testing, but never used on a site (so far).

 

A place to start anyway. Hope it helps.

Jim

Share this post


Link to post
Share on other sites

Thanks Jim...I'll definitely check it out. Between all the computer/internet problems! :)

Share this post


Link to post
Share on other sites

That first suggestion was just what the doctor ordered...or in this case...the designer! :dance: Thanks, Jim! It is up and running. Now I just have to get the rest of the site finished!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...