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, 01: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

Similar Threads
thread Thread Starter Forum Replies Last Post
Special Poster frame / Thumbnail image AndyThomsen Digital Video 2 Mar 11, 2014 11:14 PM
Image Gallery in Xcode alaahershy Mac Basics and Help 0 Sep 12, 2013 11:29 AM
Resolved: Safari can't load images/javascript/html 5 on certain website. Traisoon OS X 1 Nov 23, 2012 09:31 AM
Download images from Flash Gallery johnywalker1989 Mac Applications and Mac App Store 0 Nov 1, 2012 12:46 PM
How to add thumbnail image to movie files?? Dannyking Mac Applications and Mac App Store 0 Jul 31, 2012 05:57 PM

Forum Jump

All times are GMT -5. The time now is 07:38 AM.

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

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