Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

 
 
Thread Tools Search this Thread Display Modes
Prev Previous Post   Next Post Next
Old Feb 22, 2013, 12:30 AM   #1
mikeschmeee
macrumors 6502a
 
Join Date: Mar 2009
JavaScript Change Thumbnail Images Within A Image Gallery Table

Hello,

I made a image gallery using a table which consists of five thumbnails at the button of the table and when one of the thumbnails is clicked the larger size image will appear on the top/main part of the table.
I've added two arrows underneath the table as I would like the arrow to bring up five different thumbnail images once the arrow is clicked. The new thumbnails will also have to be clickable in order to view its corresponding larger size on the top/main part of the table.

So this all happens within the same table, just the thumbnails can be changed. They can either slide, fade in or out or just simply appear. I would prefer if they were to slide over like a transition or something but it doesn't have to be. I do not wish to use JQuery or some type of extension. I just want to use JavaScript if this is possible.

Here is my code so far

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<center>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
<body>
<br>
<table style="background-color:white; margin-left:auto margin-right:auto; margin-top:auto" width="963" border="0" cellpadding="0">
<tr>
<th colspan="5" scope="col"><img src="images/largepic1.jpg" alt="largepic1" name="MAIN" width="963" height="640" id="MAIN" /></th>
</tr>
<tr>
<td><img src="images/thumbnail1.jpg" alt="thumbnail1" name="AT1" width="191" height="125" id="AT1" onclick="MM_swapImage('MAIN','','images/largepic1.jpg',1)" /></td>
<td><img src="images/thumbnail2.jpg" alt="thumbnail2" name="AT2" width="191" height="125" id="AT2" onclick="MM_swapImage('MAIN','','images/largepic2.jpg',1)" /></td>
<td><img src="images/thumbnail3.jpg" alt="thumbnail3" name="AT3" width="191" height="125" id="AT3" onclick="MM_swapImage('MAIN','','images/largepic3.jpg',1)" /></td>
<td><img src="images/thumbnail4.jpg" alt="thumbnail4" name="AT4" width="191" height="125" id="AT4" onclick="MM_swapImage('MAIN','','images/largepic4.jpg',1)" /></td>
<td><img src="images/thumbnail5.jpg" alt="thumbnail5" name="AT5" width="191" height="125" id="AT5" onclick="MM_swapImage('MAIN','','images/largepic5.jpg',1)" /></td>
</tr>
</table>
<img src="images/leftarrow.gif" name="LeftArrow" id="LeftArrow" /><img src="images/rightarrow.gif" name="RightArrow" id="RightArrow" />
</body>
</center>
</html>

Please let me know if this is the incorrect forum to ask this type of question and please point me in the right direction, if you know where I might be able to get some assistance.

Thank you kindly
Mike
__________________
13" Aluminum MacBook, 2.0GHz, 4GB RAM, 160GB HD ; iPhone 3GS 8GB
YouTube
flickr
Portfolio
mikeschmeee is offline   0 Reply With Quote

 
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -5. The time now is 01:45 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC