Background Slideshow

Description

This is a script for a background slideshow with navigation controls. In order for images to appear you must create a folder in the root directory called slideshowimages and the name of the image will go in the HTML

This is a script for a background slideshow with navigation controls. In order for images to appear you must create a folder in the root directory called slideshowimages and the name of the image will go in the HTML

HTML Source Code

                        
                          <div id="headeroutter2">
 
   <!-- jQuery handles to place the header background images -->
   <div id="headerimgs">
      <div id="headerimg1" class="headerimg"></div>
      <div id="headerimg2" class="headerimg"></div>
   </div>
  
 
  <div id="headerinner2"> 
  
  <div class="headerinner2-left"> 
  <div id="back"></div>
  </div>
  
     <!-- jQuery handles for the text displayed on top of the images -->
   <div id="headertxt">
      <p class="caption">
         <span id="firstline"></span>
         <a href="#" id="secondline"></a>
      </p>
      <p class="pictured">
         Pictured:
         <a href="#" id="pictureduri"></a>
      </p>
   </div>
 

   
   <div class="headerinner2-right"> 
   <div id="next"></div>
   </div>
 
 </div>
  
</div>

CSS Source Code

                        
                          /* Background Slideshow Start*/


.break { clear:both; }

/* HEADER */
#headeroutter2 {
    border-bottom: 1px solid #CFCFCF;
    height: 400px;
}

.headerimg { background-position: center top; background-repeat: no-repeat; width:100%; height:400px; position:absolute; }

#headerinner2 {
    display: table;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    width: 1211px;
}

/* HEADER TEXT */
#headertxt {
    background: url("http://allinonegeek.com/slideshowimages/textbg.png") repeat scroll 0 0 transparent;
    border-radius: 1px 1px 1px 1px;
    float: left;
    margin: 265px auto 0 15px;
    width: 350px;
}

#firstline {
    color: #333333;
    display: block;
    float: left;
    font-size: 16px;
    padding: 4px 13px 7px;
}

#secondline {
    clear: both;
    color: #CD2B3A;
    display: block;
    float: left;
    font-size: 22px;
    padding: 0 13px 10px;
    text-decoration: none;
}

#secondline:hover { 
text-decoration:underline; 
color:#7F000C; 
}

.pictured {
    clear: both;
    color: #000000;
    display: block;
    float: left;
    font-size: 12px;
    margin-top: 10px;
    padding: 9px 16px;
    text-transform: uppercase;
}

.pictured a {
    color: #000000;
    font-size: 16px;
    font-style: italic;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: none;
}

.pictured a:hover { 
text-decoration:underline; 
}

/* CONTROLS */


#back {
    background-image: url("http://allinonegeek.com/slideshowimages/btn_back.png");
    background-position: left center;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 100%;
    width: 100%;
}

#next {
    background-image: url("http://allinonegeek.com/slideshowimages/btn_next.png");
    background-position: right center;
    background-repeat: no-repeat;
	cursor: pointer;
	height: 100%;
    width: 100%;
}
#control { 
	background-image:url("http://allinonegeek.com/slideshowimages/btn_pause.png");
	background-repeat: no-repeat;
    cursor: pointer;
	height: 100%;
    width: 100%;
 }
 
#back, #next {
    background-size: 50px auto;
}

/* HEADER HAVIGATION */


.headerinner2-left {
    float: left;
    height: 400px;
    width: 65px;
}

.headerinner2-right {
    float: right;
    height: 400px;
    width: 65px;
}
/* Background Slideshow End*/

JavaScript Code

                        
                          <!--Background Slideshow JQuery Start-->
<!--MUST CREATE A FOLDER FOR THE IMAGES TO BE IN, FOLLOW PATH!-->
<script type="text/javascript"> 
/*
* Author:      Marco Kuiper (http://www.marcofolio.net/)
*/

// Speed of the automatic slideshow
var slideshowSpeed = 6000;

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [ {
		"title" : "Stairs",
		"image" : "2000x400_000000.gif",
		"url" : "http://allinonegeek.com/",
		"firstline" : "IMAGE ONE NAME",
		"secondline" : "IMAGE ONE NAME"
	}, {
		"title" : "Office Appartments",
		"image" : "2000x400_000000.gif",
		"url" : "http://allinonegeek.com/",
		"firstline" : "IMAGE TWO NAME",
		"secondline" : "IMAGE TWO DESCRIPTION"
	}, {
		"title" : "Mountainbiking",
		"image" : "2000x400_000000.gif",
		"url" : "http://allinonegeek.com/",
		"firstline" : "IMAGE THREE NAME",
		"secondline" : "IMAGE THREE DESCRIPTION"
	}, {
		"title" : "Mountains Landscape",
		"image" : "2000x400_738686.gif",
		"url" : "http://allinonegeek.com/",
		"firstline" : "IMAGE FOUR NAME",
		"secondline" : "IMAGE FOUR DESCRIPTION"
	}, {
		"title" : "Italian pizza",
		"image" : "2000x400_E0E5CA.gif",
		"url" : "http://allinonegeek.com/",
		"firstline" : "IMAGE FIVE NAME",
		"secondline" : "IMAGE FIVE DESCRIPTION"
	}
];



$(document).ready(function() {
		
	// Backwards navigation
	$("#back").click(function() {
		stopAnimation();
		navigate("back");
	});
	
	// Forward navigation
	$("#next").click(function() {
		stopAnimation();
		navigate("next");
	});
	
	var interval;
	$("#control").toggle(function(){
		stopAnimation();
	}, function() {
		// Change the background image to "pause"
		$(this).css({ "background-image" : "url(/slideshowimages/btn_pause.png)" });
		
		// Show the next image
		navigate("next");
		
		// Start playing the animation
		interval = setInterval(function() {
			navigate("next");
		}, slideshowSpeed);
	});
	
	
	var activeContainer = 1;	
	var currentImg = 0;
	var animating = false;
	var navigate = function(direction) {
		// Check if no animation is running. If it is, prevent the action
		if(animating) {
			return;
		}
		
		// Check which current image we need to show
		if(direction == "next") {
			currentImg++;
			if(currentImg == photos.length + 1) {
				currentImg = 1;
			}
		} else {
			currentImg--;
			if(currentImg == 0) {
				currentImg = photos.length;
			}
		}
		
		// Check which container we need to use
		var currentContainer = activeContainer;
		if(activeContainer == 1) {
			activeContainer = 2;
		} else {
			activeContainer = 1;
		}
		
		showImage(photos[currentImg - 1], currentContainer, activeContainer);
		
	};
	
	var currentZindex = -1;
	var showImage = function(photoObject, currentContainer, activeContainer) {
		animating = true;
		
		// Make sure the new container is always on the background
		currentZindex--;
		
		// Set the background image of the new active container
		$("#headerimg" + activeContainer).css({
			"background-image" : "url(/slideshowimages/" + photoObject.image + ")",
			"display" : "block",
			"z-index" : currentZindex
		});
		
		// Hide the header text
		$("#headertxt").css({"display" : "none"});
		
		// Set the new header text
		$("#firstline").html(photoObject.firstline);
		$("#secondline")
			.attr("href", photoObject.url)
			.html(photoObject.secondline);
		$("#pictureduri")
			.attr("href", photoObject.url)
			.html(photoObject.title);
		
		
		// Fade out the current container
		// and display the header text when animation is complete
		$("#headerimg" + currentContainer).fadeOut(function() {
			setTimeout(function() {
				$("#headertxt").css({"display" : "block"});
				animating = false;
			}, 500);
		});
	};
	
	var stopAnimation = function() {
		// Change the background image to "play"
		$("#control").css({ "background-image" : "url(/slideshowimages/btn_play.png)" });
		
		// Clear the interval
		clearInterval(interval);
	};
	
	// We should statically set the first image
	navigate("next");
	
	// Start playing the animation
	interval = setInterval(function() {
		navigate("next");
	}, slideshowSpeed);
	
});
</script>
<!--Background Slideshow JQuery End-->


Post Categories

Tags