Template:Team:IBB Pune/slideshow

From 2009.igem.org

(Difference between revisions)
Line 1: Line 1:
<html><head>
<html><head>
<script language="JavaScript1.1">
<script language="JavaScript1.1">
-
<!--
 
-
/*
+
.slideshow { height: 250px; width: 960px; }
-
JavaScript Image slideshow:
+
.slideshow img { padding: 0px; border: 0px solid #ccc; background-color: #800000; }
-
By JavaScript Kit (www.javascriptkit.com)
+
</style>
-
Over 200+ free JavaScript here!
+
<!-- include jQuery library -->
-
*/
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 +
<!-- include Cycle plugin -->
 +
<script type="text/javascript" src="http://jquery.malsup.com/cycle/jquery.cycle.all.js"></script>
 +
<script type="text/javascript">
 +
$(document).ready(function() {
 +
    $('.slideshow').cycle({
 +
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
 +
});
 +
});
-
var slideimages=new Array()
+
<div id="demodiv" style="">
-
var slidelinks=new Array()
+
-
function slideshowimages(){
+
-
for (i=0;i<slideshowimages.arguments.length;i++){
+
-
slideimages[i]=new Image()
+
-
slideimages[i].src=slideshowimages.arguments[i]
+
-
}
+
-
}
+
-
function slideshowlinks(){
+
<div class="slideshow">
-
for (i=0;i<slideshowlinks.arguments.length;i++)
+
-
slidelinks[i]=slideshowlinks.arguments[i]
+
-
}
+
-
function gotoshow(){
+
<img src="slides/1.jpg" width="960" height="250" />
-
if (!window.winslide||winslide.closed)
+
<img src="slides/2.jpg" width="960" height="250" />
-
winslide=window.open(slidelinks[whichlink])
+
<img src="slides/3.jpg" width="960" height="250" />
-
else
+
        <img src="slides/4.jpg" width="960" height="250" />
-
winslide.location=slidelinks[whichlink]
+
        <img src="slides/5.jpg" width="960" height="250" />
-
winslide.focus()
+
        <img src="slides/6.jpg" width="960" height="250" />
-
}
+
        <img src="slides/7.jpg" width="960" height="250" />
 +
        <img src="slides/8.jpg" width="960" height="250" />
 +
</div>
-
//-->
+
</div>
-
</script>
+
-
</head>
 
-
<body>
 
-
<a href="javascript:gotoshow()"><img src="food1.jpg" name="slide" border=0 width=300 height=375></a>
 
-
<script>
 
-
<!--
 
-
//configure the paths of the images, plus corresponding target links
 
-
slideshowimages("food1.jpg","food2.jpg","food3.jpg","food4.jpg","food5.jpg")
 
-
slideshowlinks("http://food.epicurious.com/run/recipe/view?id=13285","http://food.epicurious.com/run/recipe/view?id=10092","http://food.epicurious.com/run/recipe/view?id=100975","http://food.epicurious.com/run/recipe/view?id=2876","http://food.epicurious.com/run/recipe/view?id=20010")
 
-
 
-
//configure the speed of the slideshow, in miliseconds
 
-
var slideshowspeed=2000
 
-
 
-
var whichlink=0
 
-
var whichimage=0
 
-
function slideit(){
 
-
if (!document.images)
 
-
return
 
-
document.images.slide.src=slideimages[whichimage].src
 
-
whichlink=whichimage
 
-
if (whichimage<slideimages.length-1)
 
-
whichimage++
 
-
else
 
-
whichimage=0
 
-
setTimeout("slideit()",slideshowspeed)
 
-
}
 
-
slideit()
 
-
 
-
//-->
 
</script></body>
</script></body>
</html>
</html>

Revision as of 05:17, 5 October 2009

Retrieved from "http://2009.igem.org/Template:Team:IBB_Pune/slideshow"