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.
<pre class="brush: php; highlight: [5, 15]; html-script: true">
<!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>
</pre>
<pre class="brush: php; highlight: [5, 15]; html-script: true">