Download image slideshow II

Put this into your <HEAD> section

	<STYLE type="text/css">
	#imageSlideshowHolder{

		/* This is a CSS hack in order to get a nice look in IE 5.5 and lower 

		In these versions of Internet Explorer, we need to add borders and padding to the width. In this example, we have a 3 pixel
		border on all sides. This means that the width in IE5.5 should be 606 pixels(600 + border 3px on the left + border 3 px on the right). Height
		should be set to 456 pixels(450 + 3 +3). IE 5.5 will ignore the width attributes below the first line. These will be applied to other browsers.

		*/
		/* CSS HACK */
		width: 606px;	/* IE 5.x */
		width/* */:/**/600px;	/* Other browsers */
		width: /**/600px;
		
		/* CSS HACK */
		height: 456px;	/* IE 5.x */
		height/* */:/**/450px;	/* Other browsers */
		height: /**/450px;
		
		background-color:#000;
		border:3px solid #317082;
		position:relative;	/* Never change this value */
		
	}
	.imageInGallery{		
		width:600px;
		height:450px;
		background-color:#000;
		
		/* Never change these 3 value */
		left:0px;
		top:0px;
		position:absolute;	
	}
	
	
	#imageSlideshowHolder img{
		position:absolute;
	}


	</style>
	<SCRIPT type="text/javascript">
	/************************************************************************************************************
	(C) www.dhtmlgoodies.com, October 2005
	
	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	Terms of use:
	You are free to use this script as long as the copyright message is kept intact. However, you may not
	redistribute, sell or repost it without our permission.
	
	Thank you!
	
	www.dhtmlgoodies.com
	Alf Magne Kalleland
	
	************************************************************************************************************/	
	// You can modify these three values
	var slideshow2_noFading = false;	// Just normal show/hide without fading ?
	var slideshow2_timeBetweenSlides = 1500;	// Amount of time between each image(1000 = 1 second)
	var slideshow2_fadingSpeed = 20;	// Speed of fading
	
	
	/* Don't change any of these values */
	var slideshow2_galleryHeigh;	// Height of galery	
	var slideshow2_galleryContainer;	// Reference to the gallery div
	var slideshow2_galleryWidth;	// Width of gallery	
	var slideshow2_slideIndex = -1;	// Index of current image shown
	var slideshow2_slideIndexNext = false;	// Index of next image shown
	var slideshow2_imageDivs = new Array();	// Array of image divs(Created dynamically)
	var slideshow2_currentOpacity = 100;	// Initial opacity
	var slideshow2_imagesInGallery = false;	// Number of images in gallery
	
	function getGalleryImageSize(imageIndex)
	{
		if(imageIndex==slideshow2_imagesInGallery){			
			showGallery();
		}else{
			var imgObj = document.getElementById('galleryImage' + imageIndex);
			var imgWidth = imgObj.width;
			var imgHeight = imgObj.height;
			if(imgWidth>50){						
				var tmpDiv = document.createElement('DIV');
				tmpDiv.id = 'galleryDiv' + imageIndex;
				tmpDiv.style.visibility = 'hidden';
				tmpDiv.className='imageInGallery';
				slideshow2_galleryContainer.appendChild(tmpDiv);
				tmpDiv.appendChild(imgObj);
				imgObj.style.left = Math.round((slideshow2_galleryWidth - imgWidth)/2)  + "px";
				imgObj.style.top = Math.round((slideshow2_galleryHeight - imgHeight)/2)  + "px";
				tmpDiv.style.visibility = 'hidden';
				slideshow2_imageDivs.push(tmpDiv);
				imageIndex++;
				getGalleryImageSize(imageIndex);
			}else{
				setTimeout('getGalleryImageSize(' + imageIndex + ')',10);
			}
		}		
	}
	
	function showGallery()
	{
		if(slideshow2_slideIndex==-1)slideshow2_slideIndex=0; else slideshow2_slideIndex++;	// Index of next image to show
		if(slideshow2_slideIndex==slideshow2_imageDivs.length)slideshow2_slideIndex=0;
		slideshow2_slideIndexNext = slideshow2_slideIndex+1;	// Index of the next next image
		if(slideshow2_slideIndexNext==slideshow2_imageDivs.length)slideshow2_slideIndexNext = 0;
		
		slideshow2_currentOpacity=100;	// Reset current opacity

		// Displaying image divs
		slideshow2_imageDivs[slideshow2_slideIndex].style.visibility = 'visible';
		if(navigator.userAgent.indexOf('Opera')<0){
			slideshow2_imageDivs[slideshow2_slideIndexNext].style.visibility = 'visible';
		}
		
		
		if(document.all){	// IE rules
			slideshow2_imageDivs[slideshow2_slideIndex].style.filter = 'alpha(opacity=100)';
			slideshow2_imageDivs[slideshow2_slideIndexNext].style.filter = 'alpha(opacity=1)';
		}else{
			slideshow2_imageDivs[slideshow2_slideIndex].style.opacity = 0.99;	// Can't use 1 and 0 because of screen flickering in FF
			slideshow2_imageDivs[slideshow2_slideIndexNext].style.opacity = 0.01;
		}		
		

		setTimeout('revealImage()',slideshow2_timeBetweenSlides);		
	}
	
	function revealImage()
	{
		if(slideshow2_noFading){
			slideshow2_imageDivs[slideshow2_slideIndex].style.visibility = 'hidden';
			showGallery();
			return;
		}
		slideshow2_currentOpacity--;
		if(document.all){
			slideshow2_imageDivs[slideshow2_slideIndex].style.filter = 'alpha(opacity='+slideshow2_currentOpacity+')';
			slideshow2_imageDivs[slideshow2_slideIndexNext].style.filter = 'alpha(opacity='+(100-slideshow2_currentOpacity)+')';
		}else{
			slideshow2_imageDivs[slideshow2_slideIndex].style.opacity = Math.max(0.01,slideshow2_currentOpacity/100);	// Can't use 1 and 0 because of screen flickering in FF
			slideshow2_imageDivs[slideshow2_slideIndexNext].style.opacity = Math.min(0.99,(1 - (slideshow2_currentOpacity/100)));
		}
		if(slideshow2_currentOpacity>0){
			setTimeout('revealImage()',slideshow2_fadingSpeed);
		}else{
			slideshow2_imageDivs[slideshow2_slideIndex].style.visibility = 'hidden';			
			showGallery();
		}
	}
	
	function initImageGallery()
	{
		slideshow2_galleryContainer = document.getElementById('imageSlideshowHolder');
		slideshow2_galleryWidth = slideshow2_galleryContainer.clientWidth;
		slideshow2_galleryHeight = slideshow2_galleryContainer.clientHeight;
		galleryImgArray = slideshow2_galleryContainer.getElementsByTagName('IMG');
		for(var no=0;no<galleryImgArray.length;no++){
			galleryImgArray[no].id = 'galleryImage' + no;
		}
		slideshow2_imagesInGallery = galleryImgArray.length;
		getGalleryImageSize(0);		
		
	}
		
	</SCRIPT>

Put this into your <BODY> section

<div id="imageSlideshowHolder">
	<img src="images/image1_big.jpg">	
	<img src="images/image3_big.jpg">
	<img src="images/image4_big.jpg">
	<img src="images/image5_big.jpg">
	<img src="images/image6_big.jpg">
	<img src="images/image7_big.jpg">
</div>
<p>Normal web content
<SCRIPT type="text/javascript">
initImageGallery();
</SCRIPT>

Configuration

You add images to the slideshow by use of standard HTML. Example:
<div id="imageSlideshowHolder">
  <img src="images/image1.jpg">
  <img src="images/image2.jpg">
  <img src="images/image3.jpg">
</div>

First of all, you have the <div id="imageSlideshowHolder">, which is the elements that holds all the images in the slideshow. Then, we use standard <IMG> tags for the images. As you can see, this slideshow contain 3 images, image1.jpg, image2.jpg and image3.jpg.

You also have 3 javascript variables available which you could modify as you need:
var slideshow2_noFading = false; // No fade effect?
var slideshow2_timeBetweenSlides = 1500; // Time between images(1000 = 1 sec)
var slideshow2_fadingSpeed = 20; // Speed of fading(Higher = slower)

These controls the behaviour of the slideshow. You can play with them to see how they works.

The size and background color of the entire slideshow is set by CSS. Example:
  #imageSlideshowHolder{
    width:600px;
    height:450px;
    background-color:#000;
    border:3px solid #317082;
    position:relative;  /* Never change this value */

  }
  .imageInGallery{
    width:600px;
    height:450px;
    background-color:#000;

    /* Never change these 3 value */
    left:0px;
    top:0px;
    position:absolute;
  }

Here, width is set to 600 pixels, height to 450 pixels and background color to black(#000). As you also can see, you have to set these values 2 places.

Comments

Post your comment

Please wait...

Your name:
Your email:
Your website:
Don't have an avatar? Create one at Gravatar.com.