Team:IIT Madras/Gallery

From 2010.igem.org

(Difference between revisions)

Latest revision as of 03:01, 28 October 2010

Scroll Bar Example

Say "Monelieeeen" =)

We unite for 'Diabetes' :P
<< Previous					Next >>

@@ Line 1: / Line 1: @@
+{{iitm/main_new}}
-{{iitm/main}}
+<html xmlns="http://www.w3.org/1999/xhtml" >
+<head>
+<title>Scroll Bar Example</title>
+</head>
+<body onload="javascript:preloadThumbnails()">
+<script language="javascript" type="text/javascript">
+// Array of image data
-==And so it begins==
+var imageData= new Array(10)
-<gallery>
-Image:IIT_Madras_Team_member_1.png|Team member 1
+createTwoDimensionalArray(3);
-Image:IIT_Madras_Team_member_2.png|Team member 2
-Image:IIT_Madras_Team_member_3.png|Team member 3
+// Image path data
-Image:IIT_Madras_Team_member_4.png|Team member 4
-Image:IIT_Madras_Team_member_5.png|Team member 5
+imageData[0][0]="https://static.igem.org/mediawiki/2010/c/c9/P8180024.JPG";
-Image:IIT_Madras_Team_member_6.png|Team member 6
-Image:IIT_Madras_Team_member_7.png|Team member 7
+imageData[1][0]="https://static.igem.org/mediawiki/2010/2/2b/P8180022.JPG";
-</gallery>
-{{iitm/footbar}}
+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>