Slideshow

[url=http://www.zamna.be/zamna/modules/downloads/files/zSlideshow/presentation.php]Alles in een rar-bestand[/url].

*** example.php ***
<?php
include_once("core/class.slideshow.inc.php");
//new slideshow(images with their captions in an array, interval between two images [milliseconds], time fade-effect[milliseconds], slideshow width, slideshow height);
$objSlideshow = new slideshow(
array
(
array("images/hamster.jpg","Hamster"),
array("images/ijsvis.jpg","Ijsvis"),
array("images/kuikens.jpg","Kuikens"),
),
3000, 1000, 320, 240);
//$objSlideshow->setResizeWidth(360);
//$objSlideshow->setResizeHeight(260);
$objSlideshow->show();
?>

*** core/class.slideshow.inc.php ***
<?php
class slideshow {
	private $picsWithCaptions;
	private $interval;
	private	$fadeInterval;
	private $slideshowWidth;
	private $slideshowHeight;
	private $resizeWidth = 0;
	private $resizeHeight = 0;
			
	public function __construct($picsWithCaptions, $interval, $fadeInterval, $slideshowWidth, $slideshowHeight) {
		$this->picsWithCaptions = $picsWithCaptions;
		$this->interval = $interval;
		$this->fadeInterval	= $fadeInterval;
		$this->slideshowWidth = $slideshowWidth;
		$this->slideshowHeight = $slideshowHeight;
	}
	
	public function setResizeWidth($w) {
      $this->resizeWidth = $w;
	}
	
	public function setResizeHeight($h) {
      $this->resizeHeight = $h;
	}	
	
	public function show() {
		echo "<script type=\"text/javascript\">";
			
		$picsString = "";
		$captionString = "";
		foreach ($this->picsWithCaptions as $pictureWithCaption) {
			if (substr($pictureWithCaption[0], 0, 4) != "http") {
				$prefix = "../";
			} else {
				$prefix = "";
			}
			if ($this->resizeWidth != 0 && $this->resizeHeight != 0) {
		 		$picsString .= "'core/resize.php?file=".$prefix.$pictureWithCaption[0]."&w=".$this->resizeWidth."&h=".$this->resizeHeight."',";
			} elseif ($this->resizeWidth != 0 && $this->resizeHeight == 0) {
				$picsString .= "'core/resize.php?file=".$prefix.$pictureWithCaption[0]."&w=".$this->resizeWidth."',";
			} elseif ($this->resizeWidth == 0 && $this->resizeHeight != 0) {
				$picsString .= "'core/resize.php?file=".$prefix.$pictureWithCaption[0]."&h=".$this->resizeHeight."',";
			} else {
		 		$picsString .= "'".$pictureWithCaption[0]."',";				
			}
			$captionString .= "'".$pictureWithCaption[1]."',";			
		}		 
		$picsString = substr($picsString, 0, (strlen($picsString)- 1));
		$captionString = substr($captionString, 0, (strlen($captionString)- 1));
						
		echo
		"

		var pics = new Array(".$picsString.");
		var captions = new Array(".$captionString.");
		var interval = ".$this->interval.";
		var fade_interval = ".$this->fadeInterval.";
		var width = ".$this->slideshowWidth.";
		var height = ".$this->slideshowHeight.";
		";	
		
		include("slideshow.js");
		
		echo "</script>";
		
		include("slideshow.html");
	}
}
?>

*** core/slideshow.js ***
<!--
/* 
=====================================================
Copyrighted by Zamna.Be
=====================================================
*/
var number = 0;
for (x in pics)
{
	number++;
}
var timer = 0;
var timeron = false;
var pic = -1;

var opacity_pic1 = 99;
var opacity_pic2 = 1;

function add_css() 
{
	//preload
	var p = pics.length
	var preLoad = new Array()
	for (i = 0; i < p; i++){
	   preLoad[i] = new Image();
	   preLoad[i].src = pics[i];
	}
	
	//div#slideshow
	document.getElementById("slideshow").style.backgroundColor = '#CCCCCC';
	document.getElementById("slideshow").style.width = width + 'px';
	document.getElementById("slideshow").style.height = height + 'px';
	document.getElementById("slideshow").style.overflow = 'hidden';
	
	//div#slide_background
	document.getElementById("slide_background").style.position = 'relative';
	document.getElementById("slide_background").style.zIndex = '0';
	document.getElementById("slide_background").style.top = '0px';
	document.getElementById("slide_background").style.height = height + 'px';
	
	//div#slide_foreground
	document.getElementById("slide_foreground").style.position = 'relative';
	document.getElementById("slide_foreground").style.zIndex = '1';
	document.getElementById("slide_foreground").style.top = '-' + height + 'px';
	document.getElementById("slide_foreground").style.height = height + 'px';
	
	//div#controlbar
	document.getElementById("controlbar").style.position = 'relative';
	document.getElementById("controlbar").style.zIndex = '2';
	document.getElementById("controlbar").style.top = '-' + (height + 50) + 'px';
	document.getElementById("controlbar").style.textAlign = 'center';
	
	//div#caption 
	document.getElementById("caption").style.position = 'relative';
	document.getElementById("caption").style.zIndex = '2';
	document.getElementById("caption").style.top = '-' + (height + 50) + 'px';
	document.getElementById("caption").style.textAlign = 'center';
	document.getElementById("caption").style.color = '#000000';
	document.getElementById("caption").style.backgroundColor = '#CCCCCC';
	document.getElementById("caption").style.fontWeight = 'bold';
	document.getElementById("caption").style.fontFamily = 'Verdana, Arial, Helvetica, sans-serif';
	document.getElementById("caption").style.fontSize = '14px';
	change_opacity(60, 'caption');
		
	//img#play
	document.getElementById("play").style.display = 'none';
}
function slideshow_pause()
{
	document.getElementById("pause").style.display = 'none';
	document.getElementById("play").style.display = 'inline';
	document.getElementById("back").src = 'images/back.gif';
	document.getElementById("next").src = 'images/next.gif';	
	timeron = false;
}
function slideshow_play()
{
	document.getElementById("play").style.display = 'none';
	document.getElementById("pause").style.display = 'inline';
	document.getElementById("back").src = 'images/back_inactive.gif';
	document.getElementById("next").src = 'images/next_inactive.gif';
	timeron = true;	
	change_pic(1);
}
function slide_back()
{
	if(timeron == false) 
	{
		change_pic(-1);
	}
}

function slide_next()
{
	if(timeron == false) 
	{
		change_pic(1);
	}
}
function change_pic(step)
{
	change_opacity(99, "slide_foreground");
	document.getElementById("slide_foreground").style.background = 'url(' + pics[pic] + ') center no-repeat'; 
	
	pic +=step;
	
	if (pic > number - 1){
		pic = 0;
	} 
	
	if (pic < 0){
		pic = number - 1;
	} 
	
	change_opacity(1, "slide_background");
	document.getElementById("slide_background").style.background = 'url(' + pics[pic] + ') center no-repeat'; 
 	opacity_pic1 = 99;
 	opacity_pic2 = 1;
	fade('slide_foreground', 'slide_background', fade_interval);
	if (captions[pic] == "") 
	{
		document.getElementById("caption").style.display = 'none';
	} 
	else 
	{
		document.getElementById("caption").style.display = 'block';
		document.getElementById("caption").innerHTML = captions[pic];
	}
    timer = interval; 
    counter(); 
}
function counter() 
{ 
	if (timeron == true) {
		if(timer == 0) 
		{ 
			change_pic(1); 
		} 
		else 
		{ 
			timer = timer - 1000; 
			setTimeout("counter()", 1000); 
		} 
	}
} 
function fade(pic1, pic2, interval) {
	var step = Math.round(interval/100);
	for (i=1; i<99; i++) {
		opacity_pic1--;
		setTimeout("change_opacity(" + opacity_pic1 + ",'" + pic1 + "')", (i * step));
		opacity_pic2++;			
		setTimeout( "change_opacity(" + opacity_pic2 + ",'" + pic2 + "')", (i * step));
	}
}
function change_opacity(opacity, id) {	
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}
//-->

*** core/resize.php ***
<?php 
header("Content-type: image/png"); 

$file = $_GET['file'];
$fileInfo = getimagesize($file); 
$width = $fileInfo[0]; 
$height = $fileInfo[1];
$fileType = image_type_to_mime_type($fileInfo[2]);

if (isset($_GET['w']) && isset($_GET['h']) && is_numeric($_GET['w']) && is_numeric($_GET['h'])) {
	$newWidth = $_GET['w']; 
	$newHeight = $_GET['h']; 
}
if (isset($_GET['w']) && !isset($_GET['h']) && is_numeric($_GET['w'])) {
	$newWidth = $_GET['w']; 
	$a = $width / $_GET['w']; 
	$newHeight = round($height / $a); 	
} 
if (!isset($_GET['w']) && isset($_GET['h']) && is_numeric($_GET['h'])) {
	$newHeight = $_GET['h'];
	$a = $height / $_GET['h']; 
	$newWidth = round($width / $a); 	 
} 

if ($fileType == "image/jpg" || $fileType == 'image/jpeg'){
	$image = imagecreatefromjpeg($file);
} elseif ($fileType == "image/gif"){
	$image = imagecreatefromgif($file);
} elseif ($fileType == 'image/png'){
	$image = imagecreatefrompng($file);
}
$newImage = imagecreatetruecolor($newWidth, $newHeight); 
imagecopyresized($newImage, $image, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height); 
imagedestroy($image); 
imagepng($newImage); 
?> 

*** core/slideshow.html ***
<div id="slideshow">
	<div id="slide_background"></div>
    <div id="slide_foreground"></div> 
    
    <div id="controlbar">
   		<img src="images/back.gif" id="back" alt="back" onclick="slide_back()" />  
        <img src="images/play.gif" id="play" alt="play" onclick="slideshow_play()" /><img src="images/pause.gif" id="pause" alt="pause" onclick="slideshow_pause()" /> 
        <img src="images/next.gif" id="next" alt="next" onclick="slide_next()" />           
    </div> 
      
    <div id="caption"></div>
</div>

<script type="text/javascript">	
	add_css();
	slideshow_play();
</script>