Next Prev

SlideShow

The following is a small demo, a slideshow from images. This demo was created with a new JavaScript library, JQuery. JQuery library is known for making JavaScript coding fun. When using this demo you must keep the copyright notice for each Interface's JavaScript source file.

Web 2.0 Box Generator

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://www.ajaxdaddy.com/web20/jquery/interface-slideshow/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slideshow demo - Interface plugin for jQuery</title>
		<script type="text/javascript" src="javascript/jquery.js"></script>
		<script type="text/javascript" src="javascript/interface.js"></script>
  <link   type="text/css"       href="css/interface-slideshow.css" rel="stylesheet"> 
</head>

<body>
<center>
<p>Interface Slideshow demo - Interface plugin for jQuery</p>
<div id="slideShow1" style="text-align: left;"></div>
</center>

<script type="text/javascript">
$(document).ready(
	function()
	{
		$.slideshow(
			{
				container : 'slideShow1',
				loader: 'images/slideshow_loader.gif',
				linksPosition: 'top',
				linksClass: 'pagelinks',
				linksSeparator : ' | ',
				fadeDuration : 400,
				activeLinkClass: 'activeSlide',
				nextslideClass: 'nextSlide',
				prevslideClass: 'prevSlide',
				captionPosition: 'bottom',
				captionClass: 'slideCaption',
				autoplay: 5,
				random: true,
				images : [
					{
						src: 'images/panda/Dynamic.jpg',
						caption: 'Panda Dynamic'
					},
					{
						src: 'images/panda/Actual.jpg',
						caption: 'Panda Actual'
					},
					{
						src: 'images/panda/Panda.jpg',
						caption: 'Fiat Panda'
					},
					{
						src: 'images/panda/Active.jpg',
						caption: 'Panda Active'
					}
				]
			}
		)

		
		$('a').ToolTip(
			{
				className: 'inputsTooltip',
				position: 'mouse'
			}
		);
	}
);
</script>
</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Mahendra

2009-06-26 00:38:42

Nice One

RIcky

2009-03-05 04:41:35

Lovely article. Thank you.

Shubhankar Dey

2008-10-17 19:38:29

Absolutely fabulous ! Regards Shubhankar http://deysbusiness.com

TobS

2008-09-30 07:24:17

Very nice and usefull! But how can I resize the space between image and caption? Please help me ;) thanks a lot!

Vikrant Kumar

2008-07-03 05:07:11

This example has a major bug as on transition, black background of image show white dots.

JoeM

2008-06-28 06:31:09

the interface file is tooo big. How can it be trimmed from the unused elements?

Jairo Moreno

2008-03-14 06:46:54

Cool code. I am implementing it for a website, and it works pretty good, except for one minor thing that would make it quite perfect. How to make it run again after having clicked one of the numbered links. Currently, once you click on one of the numbers, it loads that picture and it stops the slide show forever, until you refresh the whole page. I am trying to figure that out using ASP.NET and its update panel in combination with AJAX and the AJAX Control Toolkit and its animation extender, and some javascripts. But so far, not there yet. Maybe it has to do with IE.

Vel

2008-02-12 01:52:41

Check this page for more info: http://interface.eyecon.ro/docs/slideshow

Ian Walter

2007-09-28 07:56:37

if you take away "" and then download everything locally except the loader image, then it won't show. This slideshow would be perfect if you could only assign links to each image. Anyone know how to accomplish this? Please email me at: ianwalter at jacksriver dot net

Karl

2007-08-22 08:42:55

This demo was a very big help. 1 question: I've read elsewhere that a "loader" image is optional... though when I delete this line, no images appear. How to I eliminate white space between image transitions?

Pasquale

2007-06-18 04:38:40

Great Demo! Is there any chance to add a link to each picture? Thanks, Pasquale

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

SlideShow

The following is a small demo, a slideshow from images. This demo was created with a new JavaScript library, JQuery. JQuery library is known for making JavaScript coding fun. When using this demo you must keep the copyright notice for each Interface's JavaScript source file.

Comment on this example