Team:IIT Madras/Gallery

From 2010.igem.org

(Difference between revisions)
(New page: {| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center" !align="center"|Home !align="ce...)
 
(18 intermediate revisions not shown)
Line 1: Line 1:
-
{| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
+
{{iitm/main_new}}
-
!align="center"|[[Team:IIT_Madras|Home]]
+
 
-
!align="center"|[[Team:IIT_Madras/Team|Team]]
+
<html xmlns="http://www.w3.org/1999/xhtml" >
-
!align="center"|[https://igem.org/Team.cgi?year=2010&team_name=IIT_Madras Official Team Profile]
+
<head>
-
!align="center"|[[Team:IIT_Madras/Project|Project]]
+
<title>Scroll Bar Example</title>
-
!align="center"|[[Team:IIT_Madras/Parts|Parts Submitted to the Registry]]
+
</head>
-
!align="center"|[[Team:IIT_Madras/Modeling|Modeling]]
+
<body onload="javascript:preloadThumbnails()">
-
!align="center"|[[Team:IIT_Madras/Notebook|Notebook]]
+
<script language="javascript" type="text/javascript">
-
!align="center"|[[Team:IIT_Madras/Safety|Safety]]
+
// Array of image data
-
!align="center"|[[Team:IIT_Madras/Gallery|Gallery]]
+
 
-
|}
+
var imageData= new Array(10)
 +
 
 +
createTwoDimensionalArray(3);
 +
 
 +
// Image path data
 +
 
 +
imageData[0][0]="https://static.igem.org/mediawiki/2010/c/c9/P8180024.JPG";
 +
 
 +
imageData[1][0]="https://static.igem.org/mediawiki/2010/2/2b/P8180022.JPG";
 +
 
 +
imageData[2][0]="https://static.igem.org/mediawiki/2010/a/a9/P8190035.JPG";
 +
 
 +
imageData[3][0]="https://static.igem.org/mediawiki/2010/3/36/P8110051.JPG";
 +
 
 +
imageData[4][0]="https://static.igem.org/mediawiki/2010/3/39/P8260032.JPG";
 +
 
 +
imageData[5][0]="https://static.igem.org/mediawiki/2010/9/99/P8110042.JPG";
 +
 
 +
imageData[6][0]="https://static.igem.org/mediawiki/2010/e/ef/P8110053.JPG";
 +
 
 +
imageData[7][0]="https://static.igem.org/mediawiki/2010/f/ff/P8250007.JPG";
 +
 
 +
imageData[8][0]="https://static.igem.org/mediawiki/2010/f/ff/P9090003.JPG";
 +
 
 +
imageData[9][0]="https://static.igem.org/mediawiki/2010/8/81/PA010010.JPG";
 +
 
 +
imageData[10][0]="https://static.igem.org/mediawiki/2010/e/e3/PA010022.JPG";
 +
 
 +
imageData[11][0]="https://static.igem.org/mediawiki/2010/a/ad/PA010029.JPG";
 +
 
 +
imageData[12][0]="https://static.igem.org/mediawiki/2010/9/95/P9100005.JPG";
 +
 
 +
imageData[13][0]="https://static.igem.org/mediawiki/2010/e/e0/PA010040.JPG";
 +
 
 +
imageData[14][0]="https://static.igem.org/mediawiki/2010/e/e0/PA010040.JPG";
 +
 
 +
imageData[15][0]="https://static.igem.org/mediawiki/2010/7/72/DSC01214.JPG";
 +
 
 +
imageData[16][0]="https://static.igem.org/mediawiki/2010/e/e2/DSC01202.JPG";
 +
 
 +
imageData[17][0]="https://static.igem.org/mediawiki/2010/f/f5/DSC01189.JPG";
 +
 
 +
imageData[18][0]="https://static.igem.org/mediawiki/2010/2/2c/PA270143.JPG";
 +
 
 +
imageData[19][0]="https://static.igem.org/mediawiki/2010/8/81/P8250010.JPG";
 +
 
 +
imageData[20][0]="https://static.igem.org/mediawiki/2010/0/0e/DSC01217.JPG";
 +
 
 +
imageData[21][0]="https://static.igem.org/mediawiki/2010/7/77/DSC01216.JPG";
 +
 
 +
 
 +
// Image title data
 +
imageData[0][1]="The First lab meeting";
 +
 
 +
imageData[1][1]="Tehelkaaaaa";
 +
 
 +
imageData[2][1]="Hawa...";
 +
 
 +
imageData[3][1]="Let's play Poker :P :P";
 +
 
 +
imageData[4][1]="Primers of our team";
 +
 
 +
imageData[5][1]="We, the Juniors";
 +
 
 +
imageData[6][1]="Zebra";
 +
 
 +
imageData[7][1]=" ";
 +
 
 +
imageData[8][1]=" ";
 +
 
 +
imageData[9][1]=" ";
 +
 
 +
imageData[10][1]=" ";
 +
 
 +
imageData[11][1]=" ";
 +
 
 +
imageData[12][1]=" ";
 +
 
 +
imageData[13][1]=" ";
 +
 
 +
imageData[14][1]=" ";
 +
 
 +
imageData[15][1]=" ";
 +
 
 +
imageData[16][1]=" ";
 +
 
 +
imageData[17][1]=" ";
 +
 
 +
// Image description data
 +
 
 +
imageData[0][2]="Haha! Varun looks funny!";
 +
 
 +
imageData[1][2]="Let's Plan!! Let's Allot work!!";
 +
 
 +
imageData[2][2]="One of the most regular (non) iGEM team member! ";
 +
 
 +
imageData[3][2]="Shit dude!! $$$$$$$$$";
 +
 
 +
imageData[4][2]="Unfortunately the two most sleep and food deprived guys in the team";
 +
 
 +
imageData[5][2]="Reading...reading...reading....";
 +
 
 +
imageData[6][2]="This is the description for the seventh image. Here will be where we give details on the image that is currently being viewed.";
 +
 
 +
imageData[7][2]="This is the description for the eighth image. Here will be where we give details on the image that is currently being viewed.";
 +
 
 +
imageData[8][2]="This is the description for the ninth image. Here will be where we give details on the image that is currently being viewed.";
 +
 
 +
imageData[9][2]="This is the description for the tenth image. Here will be where we give details on the image that is currently being viewed.";
 +
 
 +
 
 +
// Our index, boundry and scroll tracking variables
 +
 
 +
var imageIndexFirst = 0;
 +
 
 +
var imageIndexLast = 3;
 +
 
 +
var continueScroll = 0;
 +
 
 +
var maxIndex = 9;
 +
 
 +
var minIndex = 0;
 +
 
 +
 
 +
// This function creates our two dimensional array
 +
 
 +
function createTwoDimensionalArray(arraySize) {
 +
 
 +
for (i = 0; i < imageData.length; ++ i)
 +
 
 +
imageData[i] = new Array(arraySize);
 +
 
 +
}
 +
 
 +
 
 +
// This function preloads the thumbnail images
 +
 
 +
function preloadThumbnails() {
 +
 
 +
imageObject = new Image();
 +
 
 +
for (i = 0; i < imageData.length; ++ i)
 +
 
 +
imageObject.src = imageData[i][0];
 +
 
 +
}
 +
 
 +
 
 +
 
 +
// This function changes the text of a table cell
 +
 
 +
function changeCellText(cellId,myCellData){
 +
 
 +
document.getElementById(cellId).innerHTML = myCellData;
 +
 
 +
}
 +
 
 +
 
 +
// This function changes the images
 +
 
 +
function changeImage(ImageToChange,MyimageData){
 +
 
 +
document.getElementById(ImageToChange).setAttribute('src',MyimageData)
 +
 
 +
}
 +
 
 +
 
 +
// This function changes the image alternate text
 +
 
 +
function changeImageAlt(ImageToChange,imageData){
 +
 
 +
document.getElementById(ImageToChange).setAttribute('alt',imageData)
 +
 
 +
}
 +
 
 +
 
 +
// This function changes the image alternate text
 +
 
 +
function changeImageTitle(ImageToChange,imageData){
 +
 
 +
document.getElementById(ImageToChange).setAttribute('title',imageData)
 +
 
 +
}
 +
 
 +
 
 +
// This function changes the image onmouseover
 +
 
 +
function changeImageOnMouseOver(ImageToChange,imageIndex){
 +
 
 +
document.getElementById(ImageToChange).setAttribute('onmouseover','handleThumbOnMouseOver(' + imageIndex + ');')
 +
 
 +
}
 +
 
 +
 
 +
// This function hanles calling on change function
 +
 
 +
// for a thumbnail onmouseover event
 +
 
 +
function handleThumbOnMouseOver(imageIndex){
 +
 
 +
changeImage('imageLarge',imageData[imageIndex][0]);
 +
 
 +
changeCellText('imageTitleCell',imageData[imageIndex][1]);
 +
 
 +
changeCellText('imageDescriptionCell',imageData[imageIndex][2]);
 +
 
 +
changeImageAlt('imageLarge',imageData[imageIndex][1] + ' - ' + imageData[imageIndex][2]);
 +
 
 +
changeImageTitle('imageLarge',imageData[imageIndex][1] + ' - ' + imageData[imageIndex][2]);
 +
 
 +
}
 +
 
 +
 
 +
// This function handles the scrolling in both directions
 +
 
 +
function scrollImages(scrollDirection) {
 +
 
 +
// We need a variable for holding our working index value
 +
 
 +
var currentIndex;
 +
 
 +
// Determine which direction to scroll - default is down (left)
 +
 
 +
if (scrollDirection == 'up')
 +
 
 +
{
 +
 
 +
// Only do work if we are not to the last image
 +
 
 +
if (imageIndexLast != maxIndex)
 +
 
 +
{
 +
 
 +
// We set the color to black for both before we begin
 +
 
 +
// If we reach the end during the process we'll change the "button" color to silver
 +
 
 +
document.getElementById('scrollPreviousCell').setAttribute('style','color: Black')
 +
 
 +
document.getElementById('scrollNextCell').setAttribute('style','color: Black')
 +
 
 +
// Move our tracking indexes up one
 +
 
 +
imageIndexLast = imageIndexLast + 1;
 +
 
 +
imageIndexFirst = imageIndexFirst + 1;
 +
 
 +
//  Change next "button" to silver if we are at the end
 +
 
 +
if (imageIndexLast == maxIndex)
 +
 
 +
{
 +
 
 +
document.getElementById('scrollNextCell').setAttribute('style','color: Silver')
 +
 
 +
}
 +
 
 +
// Changescrollbar images in a set delay sequence to give a pseudo-animated effect
 +
 
 +
currentIndex = imageIndexLast;
 +
 
 +
changeImage('scrollThumb4',imageData[currentIndex][0]);
 +
 
 +
changeImageOnMouseOver('scrollThumb4',currentIndex);
 +
 
 +
currentIndex = imageIndexLast - 1;
 +
 
 +
setTimeout("changeImage('scrollThumb3',imageData[" + currentIndex + "][0])",25);
 +
 
 +
setTimeout("changeImageOnMouseOver('scrollThumb3'," + currentIndex + ")",25);
 +
 
 +
currentIndex = imageIndexLast - 2;
 +
 
 +
setTimeout("changeImage('scrollThumb2',imageData[" + currentIndex + "][0])",50);
 +
 
 +
setTimeout("changeImageOnMouseOver('scrollThumb2'," + currentIndex + ")",50);
 +
 
 +
currentIndex = imageIndexLast - 3;
 +
 
 +
setTimeout("changeImage('scrollThumb1',imageData[" + currentIndex + "][0])",75);
 +
 
 +
setTimeout("changeImageOnMouseOver('scrollThumb1'," + currentIndex + ")",75);
 +
 
 +
// Wait and check to see if user is still hovering over button
 +
 
 +
// This pause gives the user a chance to move away from the button and stop scrolling
 +
 
 +
setTimeout("scrollAgain('" + scrollDirection + "')",1000);
 +
 
 +
}
 +
 
 +
}
 +
 
 +
else
 +
 
 +
{
 +
 
 +
// Only do work if we are not to the first image
 +
 
 +
if (imageIndexFirst != minIndex)
 +
 
 +
{
 +
 
 +
// We set the color to black for both before we begin
 +
 
 +
// If we reach the end during the process we'll change the "button" color to silver
 +
 
 +
document.getElementById('scrollPreviousCell').setAttribute('style','color: Black')
 +
 
 +
document.getElementById('scrollNextCell').setAttribute('style','color: Black')
 +
 
 +
// Move our tracking indexes down one
 +
 
 +
imageIndexLast = imageIndexLast - 1;
 +
 
 +
imageIndexFirst = imageIndexFirst - 1;
 +
 
 +
//  Change previous "button" to silver if we are at the beginning
 +
 
 +
if (imageIndexFirst == minIndex)
 +
 
 +
{
 +
 
 +
document.getElementById('scrollPreviousCell').setAttribute('style','color: Silver')
 +
 
 +
}
 +
 
 +
// Change scrollbar images in a set delay sequence to give a pseudo-animated effect
 +
 
 +
currentIndex = imageIndexFirst;
 +
 
 +
changeImage('scrollThumb1',imageData[currentIndex][0]);
 +
 
 +
changeImageOnMouseOver('scrollThumb1',currentIndex);
 +
 
 +
currentIndex = imageIndexFirst + 1;
 +
 
 +
setTimeout("changeImage('scrollThumb2',imageData[" + currentIndex + "][0])",25);
 +
 
 +
setTimeout("changeImageOnMouseOver('scrollThumb2'," + currentIndex + ")",25);
 +
 
 +
currentIndex = imageIndexFirst + 2;
 +
 
 +
setTimeout("changeImage('scrollThumb3',imageData[" + currentIndex + "][0])",50);
 +
 
 +
setTimeout("changeImageOnMouseOver('scrollThumb3'," + currentIndex + ")",50);
 +
 
 +
currentIndex = imageIndexFirst + 3;
 +
 
 +
setTimeout("changeImage('scrollThumb4',imageData[" + currentIndex + "][0])",75);
 +
 
 +
setTimeout("changeImageOnMouseOver('scrollThumb4'," + currentIndex + ")",75);
 +
 
 +
// Wait and check to see if user is still hovering over button
 +
 
 +
// This pause gives the user a chance to move away from the button and stop scrolling
 +
 
 +
setTimeout("scrollAgain('" + scrollDirection + "')",1000);
 +
 
 +
}
 +
 
 +
}
 +
 
 +
}
 +
 
 +
 
 +
// This function determines whether or not to keep scrolling
 +
 
 +
function scrollAgain(scrollDirection)
 +
 
 +
{
 +
 
 +
if (continueScroll == 1)
 +
 
 +
{
 +
 
 +
scrollImages(scrollDirection);
 +
 
 +
}
 +
 
 +
}
 +
 
 +
 
 +
// This function kicks off scrolling down (left)
 +
 
 +
function scrollPrevious() {
 +
 
 +
continueScroll = 1;
 +
 
 +
scrollImages('down');
 +
 
 +
}
 +
 
 +
 
 +
// This function kicks off scrolling up (right)
 +
 
 +
function scrollNext() {
 +
 
 +
continueScroll = 1;
 +
 
 +
scrollImages('up');
 +
 
 +
}
 +
 
 +
 
 +
// This function stops the scrolling action
 +
 
 +
function scrollStop() {
 +
 
 +
continueScroll = 0;
 +
 
 +
}
 +
</script>
 +
 
 +
<table border="0" cellpadding="5" cellspacing="0" width="100%">
 +
 
 +
<tr>
 +
 
 +
<td align="center" colspan="6" style="font-weight: bold; font-size: 18pt; color: black;
 +
 
 +
background-color: white" id="imageTitleCell">
 +
 
 +
Say "Monelieeeen" =)</td>
 +
 
 +
</tr>
 +
 
 +
<tr>
 +
 
 +
<td align="center" colspan="6" style="background-color: white">
 +
 
 +
<img height="400" src="https://static.igem.org/mediawiki/2010/1/1c/PA270141(1).JPG" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid;
 +
 
 +
border-bottom: 1px solid" width="400" id="imageLarge" alt="default" /></td>
 +
 
 +
</tr>
 +
 
 +
<tr>
 +
 
 +
<td align="left" colspan="6" style="padding-right: 100px; padding-left: 100px; color: black;
 +
 
 +
background-color: white" id="imageDescriptionCell">
 +
 
 +
We unite for 'Diabetes' :P </td>
 +
 
 +
</tr>
 +
 
 +
<tr>
 +
 
 +
<td id="scrollPreviousCell" style="color: Silver" onmouseover="scrollPrevious();" onmouseout="scrollStop();">
 +
 
 +
&lt;&lt; Previous</td>
 +
 
 +
<td>
 +
 
 +
<img id="scrollThumb1" height="100" src="image1.png" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid;
 +
 
 +
border-bottom: 1px solid" width="100" onmouseover="handleThumbOnMouseOver(0);" /></td>
 +
 
 +
<td>
 +
 
 +
<img id="scrollThumb2" height="100" src="image2.png" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid;
 +
 
 +
border-bottom: 1px solid" width="100" onmouseover="handleThumbOnMouseOver(1);" /></td>
 +
 
 +
<td>
 +
 
 +
<img id="scrollThumb3" height="100" src="image3.png" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid;
 +
 
 +
border-bottom: 1px solid" width="100" onmouseover="handleThumbOnMouseOver(2);" /></td>
 +
 
 +
<td>
 +
 
 +
<img id="scrollThumb4" height="100" src="image4.png" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid;
 +
 
 +
border-bottom: 1px solid" width="100" onmouseover="handleThumbOnMouseOver(3);" /></td>
 +
 
 +
<td id="scrollNextCell" style="color: Black" onmouseover="scrollNext();" onmouseout="scrollStop();">
 +
 
 +
Next &gt;&gt;</td>
 +
 
 +
</tr>
 +
 
 +
</table></div>
 +
</body>
 +
 
 +
</html>

Latest revision as of 03:01, 28 October 2010

Scroll Bar Example

Say "Monelieeeen" =)
default
We unite for 'Diabetes' :P
<< Previous Next >>