Team:IIT Madras/Gallery

From 2010.igem.org

(Difference between revisions)

Revision as of 12:23, 27 October 2010

Scroll Bar Example

Grasslands

This is the description for the first image. Here will be where we give details on the image that is currently being viewed.
<< 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
+var imageData= new Array(10)
+createTwoDimensionalArray(3);
+// Image path data
+imageData[0][0]="image1.png";
+imageData[1][0]="image2.png";
+imageData[2][0]="image3.png";
+imageData[3][0]="image4.png";
+imageData[4][0]="image5.png";
+imageData[5][0]="image6.png";
+imageData[6][0]="image7.png";
+imageData[7][0]="image8.png";
+imageData[8][0]="image9.png";
+imageData[9][0]="image10.png";
+// Image title data
+imageData[0][1]="Grasslands";
+imageData[1][1]="Tree Canopy";
+imageData[2][1]="In the Clouds";
+imageData[3][1]="Sunflower Bud";
+imageData[4][1]="Morning Dew";
+imageData[5][1]="Hillside Tree";
+imageData[6][1]="Winter Wonderland";
+imageData[7][1]="Mountain View";
+imageData[8][1]="Babbling Brook";
+imageData[9][1]="Wooded Trail";
+// Image description data
+imageData[0][2]="This is the description for the first image. Here will be where we give details on the image that is currently being viewed.";
+imageData[1][2]="This is the description for the second image. Here will be where we give details on the image that is currently being viewed.";
+imageData[2][2]="This is the description for the third image. Here will be where we give details on the image that is currently being viewed.";
+imageData[3][2]="This is the description for the fourth image. Here will be where we give details on the image that is currently being viewed.";
+imageData[4][2]="This is the description for the fifth image. Here will be where we give details on the image that is currently being viewed.";
+imageData[5][2]="This is the description for the sixth image. Here will be where we give details on the image that is currently being viewed.";
+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">
+Grasslands</td>
+</tr>
+<tr>
+<td align="center" colspan="6" style="background-color: white">
+<img height="400" src="image1.png" 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">
+This is the description for the first image. Here will be where we give details
+on the image that is currently being viewed.</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>
-==And so it begins==
-<gallery>
-Image:IIT_Madras_Team_member_1.png|Team member 1
-Image:IIT_Madras_Team_member_2.png|Team member 2
-Image:IIT_Madras_Team_member_3.png|Team member 3
-Image:IIT_Madras_Team_member_4.png|Team member 4
-Image:IIT_Madras_Team_member_5.png|Team member 5
-Image:IIT_Madras_Team_member_6.png|Team member 6
-Image:IIT_Madras_Team_member_7.png|Team member 7
-</gallery>
 {{iitm/footbar}}