Team:IIT Madras/Gallery

From 2011.igem.org

(Difference between revisions)
(Created page with "{{:Team:IIT_Madras/Template:header}} <html> <body onload="Carousel()"> ><script type="text/javascript"> /*********************************************** * Carousel Slideshow sc...")
Line 1: Line 1:
{{:Team:IIT_Madras/Template:header}}
{{:Team:IIT_Madras/Template:header}}
-
<html>
+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-
 
+
<head>
-
<body onload="Carousel()"> ><script type="text/javascript">
+
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-
 
+
<title>TiltViewer</title>
-
/***********************************************
+
<script type="text/javascript">
-
* Carousel Slideshow script- © Ger Versluis 2003
+
/**
-
* Permission granted to DynamicDrive.com to feature script
+
* SWFObject v1.5: Flash Player detection and embed - http://blog.deconcept.com/swfobject/
-
* This notice must stay intact for legal use
+
*
-
* Visit http://www.dynamicdrive.com/ for full source code
+
* SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License:
-
***********************************************/
+
* http://www.opensource.org/licenses/mit-license.php
-
 
+
*
-
/********************************************************
+
*/
-
Create a div with transparent place holder in your html
+
if(typeof deconcept=="undefined"){var deconcept=new Object();}if(typeof deconcept.util=="undefined"){deconcept.util=new Object();}if(typeof deconcept.SWFObjectUtil=="undefined"){deconcept.SWFObjectUtil=new Object();}deconcept.SWFObject=function(_1,id,w,h,_5,c,_7,_8,_9,_a){if(!document.getElementById){return;}this.DETECT_KEY=_a?_a:"detectflash";this.skipDetect=deconcept.util.getRequestParameter(this.DETECT_KEY);this.params=new Object();this.variables=new Object();this.attributes=new Array();if(_1){this.setAttribute("swf",_1);}if(id){this.setAttribute("id",id);}if(w){this.setAttribute("width",w);}if(h){this.setAttribute("height",h);}if(_5){this.setAttribute("version",new deconcept.PlayerVersion(_5.toString().split(".")));}this.installedVer=deconcept.SWFObjectUtil.getPlayerVersion();if(!window.opera&&document.all&&this.installedVer.major>7){deconcept.SWFObject.doPrepUnload=true;}if(c){this.addParam("bgcolor",c);}var q=_7?_7:"high";this.addParam("quality",q);this.setAttribute("useExpressInstall",false);this.setAttribute("doExpressInstall",false);var _c=(_8)?_8:window.location;this.setAttribute("xiRedirectUrl",_c);this.setAttribute("redirectUrl","");if(_9){this.setAttribute("redirectUrl",_9);}};deconcept.SWFObject.prototype={useExpressInstall:function(_d){this.xiSWFPath=!_d?"expressinstall.swf":_d;this.setAttribute("useExpressInstall",true);},setAttribute:function(_e,_f){this.attributes[_e]=_f;},getAttribute:function(_10){return this.attributes[_10];},addParam:function(_11,_12){this.params[_11]=_12;},getParams:function(){return this.params;},addVariable:function(_13,_14){this.variables[_13]=_14;},getVariable:function(_15){return this.variables[_15];},getVariables:function(){return this.variables;},getVariablePairs:function(){var _16=new Array();var key;var _18=this.getVariables();for(key in _18){_16[_16.length]=key+"="+_18[key];}return _16;},getSWFHTML:function(){var _19="";if(navigator.plugins&&navigator.mimeTypes&&navigator.mimeTypes.length){if(this.getAttribute("doExpressInstall")){this.addVariable("MMplayerType","PlugIn");this.setAttribute("swf",this.xiSWFPath);}_19="<embed type=\"application/x-shockwave-flash\" src=\""+this.getAttribute("swf")+"\" width=\""+this.getAttribute("width")+"\" height=\""+this.getAttribute("height")+"\" style=\""+this.getAttribute("style")+"\"";_19+=" id=\""+this.getAttribute("id")+"\" name=\""+this.getAttribute("id")+"\" ";var _1a=this.getParams();for(var key in _1a){_19+=[key]+"=\""+_1a[key]+"\" ";}var _1c=this.getVariablePairs().join("&");if(_1c.length>0){_19+="flashvars=\""+_1c+"\"";}_19+="/>";}else{if(this.getAttribute("doExpressInstall")){this.addVariable("MMplayerType","ActiveX");this.setAttribute("swf",this.xiSWFPath);}_19="<object id=\""+this.getAttribute("id")+"\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\""+this.getAttribute("width")+"\" height=\""+this.getAttribute("height")+"\" style=\""+this.getAttribute("style")+"\">";_19+="<param name=\"movie\" value=\""+this.getAttribute("swf")+"\" />";var _1d=this.getParams();for(var key in _1d){_19+="<param name=\""+key+"\" value=\""+_1d[key]+"\" />";}var _1f=this.getVariablePairs().join("&");if(_1f.length>0){_19+="<param name=\"flashvars\" value=\""+_1f+"\" />";}_19+="</object>";}return _19;},write:function(_20){if(this.getAttribute("useExpressInstall")){var _21=new deconcept.PlayerVersion([6,0,65]);if(this.installedVer.versionIsValid(_21)&&!this.installedVer.versionIsValid(this.getAttribute("version"))){this.setAttribute("doExpressInstall",true);this.addVariable("MMredirectURL",escape(this.getAttribute("xiRedirectUrl")));document.title=document.title.slice(0,47)+" - Flash Player Installation";this.addVariable("MMdoctitle",document.title);}}if(this.skipDetect||this.getAttribute("doExpressInstall")||this.installedVer.versionIsValid(this.getAttribute("version"))){var n=(typeof _20=="string")?document.getElementById(_20):_20;n.innerHTML=this.getSWFHTML();return true;}else{if(this.getAttribute("redirectUrl")!=""){document.location.replace(this.getAttribute("redirectUrl"));}}return false;}};deconcept.SWFObjectUtil.getPlayerVersion=function(){var _23=new deconcept.PlayerVersion([0,0,0]);if(navigator.plugins&&navigator.mimeTypes.length){var x=navigator.plugins["Shockwave Flash"];if(x&&x.description){_23=new deconcept.PlayerVersion(x.description.replace(/([a-zA-Z]|\s)+/,"").replace(/(\s+r|\s+b[0-9]+)/,".").split("."));}}else{if(navigator.userAgent&&navigator.userAgent.indexOf("Windows CE")>=0){var axo=1;var _26=3;while(axo){try{_26++;axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash."+_26);_23=new deconcept.PlayerVersion([_26,0,0]);}catch(e){axo=null;}}}else{try{var axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");}catch(e){try{var axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");_23=new deconcept.PlayerVersion([6,0,21]);axo.AllowScriptAccess="always";}catch(e){if(_23.major==6){return _23;}}try{axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");}catch(e){}}if(axo!=null){_23=new deconcept.PlayerVersion(axo.GetVariable("$version").split(" ")[1].split(","));}}}return _23;};deconcept.PlayerVersion=function(_29){this.major=_29[0]!=null?parseInt(_29[0]):0;this.minor=_29[1]!=null?parseInt(_29[1]):0;this.rev=_29[2]!=null?parseInt(_29[2]):0;};deconcept.PlayerVersion.prototype.versionIsValid=function(fv){if(this.major<fv.major){return false;}if(this.major>fv.major){return true;}if(this.minor<fv.minor){return false;}if(this.minor>fv.minor){return true;}if(this.rev<fv.rev){return false;}return true;};deconcept.util={getRequestParameter:function(_2b){var q=document.location.search||document.location.hash;if(_2b==null){return q;}if(q){var _2d=q.substring(1).split("&");for(var i=0;i<_2d.length;i++){if(_2d[i].substring(0,_2d[i].indexOf("="))==_2b){return _2d[i].substring((_2d[i].indexOf("=")+1));}}}return "";}};deconcept.SWFObjectUtil.cleanupSWFs=function(){var _2f=document.getElementsByTagName("OBJECT");for(var i=_2f.length-1;i>=0;i--){_2f[i].style.display="none";for(var x in _2f[i]){if(typeof _2f[i][x]=="function"){_2f[i][x]=function(){};}}}};if(deconcept.SWFObject.doPrepUnload){if(!deconcept.unloadSet){deconcept.SWFObjectUtil.prepUnload=function(){__flash_unloadHandler=function(){};__flash_savedUnloadHandler=function(){};window.attachEvent("onunload",deconcept.SWFObjectUtil.cleanupSWFs);};window.attachEvent("onbeforeunload",deconcept.SWFObjectUtil.prepUnload);deconcept.unloadSet=true;}}if(!document.getElementById&&document.all){document.getElementById=function(id){return document.all[id];};}var getQueryParamValue=deconcept.util.getRequestParameter;var FlashObject=deconcept.SWFObject;var SWFObject=deconcept.SWFObject;
-
<div id="Carousel" style="position:relative">
+
-
<img src="https://static.igem.org/mediawiki/2011/5/56/Placeholder.gif" width="404" height="202">
+
-
</div>
+
-
placeholder width:
+
-
4 sided: 1.42 * carousel image width + 3
+
-
6 sided: 2 * carousel image width +4
+
-
8 sided: 2.62 * carousel image width + 5
+
-
12 sided: 3.87 * carousel image width + 7
+
-
placeholder height:
+
-
carousel image height+2
+
-
 
+
-
Insert onload in body tag
+
-
<body onload="Carousel()">
+
-
*********************************************************/
+
-
 
+
-
// 7 variables to control behavior
+
-
var Car_Image_Width=140;
+
-
var Car_Image_Height=225;
+
-
var Car_Border=true; // true or false
+
-
var Car_Border_Color="white";
+
-
var Car_Speed=4;
+
-
var Car_Direction=true; // true or false
+
-
var Car_NoOfSides=8; // must be 4, 6, 8 or 12
+
-
 
+
-
/* array to specify images and optional links.  
+
-
For 4 sided carousel specify at least 2 images
+
-
For 6 sided carousel specify at least 3
+
-
For 8 sided carousel specify at least 4
+
-
For 12 sided carousel specify at least 6
+
-
If Link is not needed keep it ""
+
-
*/
+
-
Car_Image_Sources=new Array(
+
-
"photo1.jpg","http://www.dynamicdrive.com",
+
-
"photo2.jpg","http://www.javascriptkit.com",
+
-
"photo3.jpg","", //this slide isn't linked
+
-
"photo4.jpg","http://www.codingforums.com" // NOTE No comma after last line
+
-
);
+
-
 
+
-
/***************** DO NOT EDIT BELOW **********************************/
+
-
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
+
-
C_Coef=new Array(
+
-
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
+
-
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
+
-
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
+
-
C_Pre_Img=new Array(Car_Image_Sources.length);
+
-
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
+
-
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;
+
-
 
+
-
function Carousel(){
+
-
if(document.getElementById){
+
-
for(i=0;i<Car_Image_Sources.length;i+=2){
+
-
C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
+
-
C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
+
-
Car_Div=document.getElementById("Carousel");
+
-
for(i=0;i<C_HalfNo;i++){
+
-
CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);
+
-
CW_I[i].style.position="absolute";
+
-
CW_I[i].style.top=0+"px";
+
-
CW_I[i].style.height=Car_Image_Height+"px";
+
-
if(Car_Border){
+
-
CW_I[i].style.borderStyle="solid";
+
-
CW_I[i].style.borderWidth=1+"px";
+
-
CW_I[i].style.borderColor=Car_Border_Color}
+
-
CW_I[i].src=Car_Image_Sources[2*i];
+
-
CW_I[i].lnk=Car_Image_Sources[2*i+1];
+
-
CW_I[i].onclick=C_LdLnk;
+
-
CW_I[i].onmouseover=C_Stp;
+
-
CW_I[i].onmouseout=C_Rstrt}
+
-
CarImages()}}
+
-
 
+
-
function CarImages(){
+
-
if(!C_Stppd){
+
-
C_TotalW=0;
+
-
for(i=0;i<C_HalfNo;i++){
+
-
C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
+
-
C_TotalW+=C_ClcW[i]}
+
-
C_LeftOffset=(C_MaxW-C_TotalW)/2;
+
-
for(i=0;i<C_HalfNo;i++){
+
-
CW_I[i].style.left=C_LeftOffset+"px";
+
-
CW_I[i].style.width=C_ClcW[i]+"px";
+
-
C_LeftOffset+=C_ClcW[i]}
+
-
C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
+
-
if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
+
-
if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
+
-
if(Car_Direction){
+
-
CW_I[C_HalfNo]=CW_I[0];
+
-
for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
+
-
CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
+
-
CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
+
-
else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
+
-
CW_I[0]=CW_I[C_HalfNo];
+
-
CW_I[0].src=Car_Image_Sources[C_CrImg];
+
-
CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
+
-
C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
+
-
setTimeout("CarImages()",50)}
+
-
 
+
-
function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
+
-
function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}
+
-
function C_Rstrt(){C_Stppd=false}
+
</script>
</script>
 +
<style type="text/css">
 +
/* hide from ie on mac \*/
 +
html {
 +
height: 100%;
 +
overflow: hidden;
 +
}
 +
 +
#flashcontent {
 +
height: 100%;
 +
}
 +
/* end hide */
-
<div id="Carousel" style="position:relative">
+
body {
-
  <img src="https://static.igem.org/mediawiki/2011/5/56/Placeholder.gif" width="371" height="225">
+
height: 100%;
-
</div>
+
margin: 0;
 +
padding: 0;
 +
background-color: #000000;
 +
color:#ffffff;
 +
font-family:sans-serif;
 +
font-size:40;
 +
}
-
<p><font face="Arial" size="-2">Free DHTML scripts provided by<br><a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>
+
a {
 +
color:#cccccc;
 +
}
 +
</style>
 +
</head>
 +
<body>
 +
<div id="flashcontent">TiltViewer requires JavaScript and the latest Flash player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash here.</a></div>
 +
<script type="text/javascript">
 +
 +
var fo = new SWFObject("https://static.igem.org/mediawiki/2011/b/b6/TiltViewer.swf", "viewer", "100%", "100%", "9.0.28", "#000000");
 +
 +
// TILTVIEWER CONFIGURATION OPTIONS
 +
// To use an option, uncomment it by removing the "//" at the start of the line
 +
// For a description of config options, go to:
 +
// http://www.airtightinteractive.com/projects/tiltviewer/config_options.html
 +
 +
//FLICKR GALLERY OPTIONS
 +
// To use images from Flickr, uncomment this block
 +
//fo.addVariable("useFlickr", "true");
 +
//fo.addVariable("user_id", "48508968@N00");
 +
//fo.addVariable("tags", "jump,smile");
 +
//fo.addVariable("tag_mode", "all");
 +
//fo.addVariable("showTakenByText", "true");
 +
 +
// XML GALLERY OPTIONS
 +
// To use local images defined in an XML document, use this block
 +
fo.addVariable("useFlickr", "false");
 +
fo.addVariable("xmlURL", "gallery.xml");
 +
fo.addVariable("maxJPGSize","640");
 +
 +
//GENERAL OPTIONS
 +
fo.addVariable("useReloadButton", "false");
 +
fo.addVariable("columns", "3");
 +
fo.addVariable("rows", "3");
 +
//fo.addVariable("showFlipButton", "true");
 +
//fo.addVariable("showLinkButton", "true");
 +
//fo.addVariable("linkLabel", "View image info");
 +
//fo.addVariable("frameColor", "0xFF0000");
 +
//fo.addVariable("backColor", "0xDDDDDD");
 +
//fo.addVariable("bkgndInnerColor", "0xFF00FF");
 +
//fo.addVariable("bkgndOuterColor", "0x0000FF");
 +
//fo.addVariable("langGoFull", "Go Fullscreen");
 +
//fo.addVariable("langExitFull", "Exit Fullscreen");
 +
//fo.addVariable("langAbout", "About");
 +
 +
// END TILTVIEWER CONFIGURATION OPTIONS
 +
 +
fo.addParam("allowFullScreen","true");
 +
fo.write("flashcontent");
 +
</script>
 +
</body>
 +
</html>

Revision as of 15:30, 3 October 2011

bar iGEM 2011 - Home Page Indian Institute of Technology - Madras

TiltViewer
TiltViewer requires JavaScript and the latest Flash player. Get Flash here.