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

Reply
 
Thread Tools Search this Thread Display Modes
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
Old Feb 22, 2013, 03:15 PM   #2
fig
macrumors 6502a
 
Join Date: Jun 2012
Location: Houston, TX
We've got folks here much more technical than myself who can answer this, but I am curious if there's any reason you're using a table vs CSS?

I've done something very similar to this with a jquery plugin but you mentioned that isn't a direction you want to go.
__________________
figdigital | @figdigital | dribbble
fig is offline   0 Reply With Quote
Old Feb 22, 2013, 03:31 PM   #3
mikeschmeee
Thread Starter
macrumors 6502a
 
Join Date: Mar 2009
I'm just a big web design newb that's all. I'm only decent with HTML and I just know the basics. So I would need a full lesson from beginning to end on how to use anything else. I only have that small table that I made because of a YouTube video hah.
I'm using Adobe Dreamweaver and I although I've tried several times installing extensions to use LightBox and other things but the extensions to not install. I have Dreamweaver CS5 and Adobe Extension Manager states that I require a newer version of Dreamweaver, which doesn't make sense since the extensions that I originally wanted are compatible with all versions of Dreamweaver.
__________________
13" Aluminum MacBook, 2.0GHz, 4GB RAM, 160GB HD ; iPhone 3GS 8GB
YouTube
flickr
Portfolio
mikeschmeee is offline   0 Reply With Quote
Old Feb 22, 2013, 03:32 PM   #4
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
I'm with Fig -- drop the tables. While you're at it, drop the Dreamweaver IDE, switch to literally anything else, i.e. RapidWeaver on Mac. The DW code is bloated if not unstable and the IDE is notorious for exactly what happened to you. Switch and your world will change.

I also want to chime in and say such things as you want are perfect for jQuery - less bloated code, makes complex things simple so you can focus on design and behavior, not development. It was made for stuff like this. We're not ganging up on you, we hope you consider what we're saying.

__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Feb 22, 2013, 04:04 PM   #5
fig
macrumors 6502a
 
Join Date: Jun 2012
Location: Houston, TX
Yeah, I noticed the Dreamweaver code too

And honestly, I'm not much of a coder and jQuery is about as easy as it gets, you connect things up and then tweak the styling and settings to your specifications. Sliderviewer Pro is one I've used that works quite similarly to what you're describing.
__________________
figdigital | @figdigital | dribbble
fig is offline   0 Reply With Quote
Old Feb 22, 2013, 05:42 PM   #6
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by fig View Post
Yeah, I noticed the Dreamweaver code too

And honestly, I'm not much of a coder and jQuery is about as easy as it gets, you connect things up and then tweak the styling and settings to your specifications. Sliderviewer Pro is one I've used that works quite similarly to what you're describing.
This is to all users reading this:

And most importantly, don't feel guilty about it.

Some folks are purists, i.e. learn javascript first, and I believe in that, but learning balanced with real world time commitments to clients is something different, so using a framework means less re-inventing the wheel on some jobs. There is nothing wrong with sharing code in an open source world (i.e. plugins) either and studying DOM manipulation on your free time. We all don't code in hex anymore!

(some of us: machine language/assembly, punch cards, heh) JK
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Feb 22, 2013, 11:58 PM   #7
mikeschmeee
Thread Starter
macrumors 6502a
 
Join Date: Mar 2009
wow, that was a lot of work but it works!
I learned some new stuff and its pretty neat.
I used div tags and just referenced jQuery.
But one of the galleries that I have on my website does not function the same way that it does locally on my computer. I added a fade in effect but the fade is super delayed. It doesn't do this locally but once its on the server where my website is hosted its delayed.

The effect doesn't work well here: www.mikeschmeee.com/d/Wildlife.html
I removed the effect to and everything seems fine here: www.mikeschmeee.com/d/Automotive.html

Time to go through the code again and see whats causing it to fail.
__________________
13" Aluminum MacBook, 2.0GHz, 4GB RAM, 160GB HD ; iPhone 3GS 8GB
YouTube
flickr
Portfolio
mikeschmeee is offline   0 Reply With Quote

Reply
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 10:14 PM
Image Gallery in Xcode alaahershy Mac Basics and Help 0 Sep 12, 2013 10:29 AM
Resolved: Safari can't load images/javascript/html 5 on certain website. Traisoon OS X 1 Nov 23, 2012 08:31 AM
Download images from Flash Gallery johnywalker1989 Mac Applications and Mac App Store 0 Nov 1, 2012 11:46 AM
How to add thumbnail image to movie files?? Dannyking Mac Applications and Mac App Store 0 Jul 31, 2012 04:57 PM

Forum Jump

All times are GMT -5. The time now is 09:41 PM.

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