JavaScript Change Thumbnail Images Within A Image Gallery Table

Discussion in 'Web Design and Development' started by mikeschmeee, Feb 21, 2013.

  1. macrumors 6502a

    Joined:
    Mar 9, 2009
    #1
    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)&&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[n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
    }
    </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
    :)
     
  2. fig
    macrumors 6502a

    Joined:
    Jun 13, 2012
    Location:
    Houston, TX
    #2
    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.
     
  3. thread starter macrumors 6502a

    Joined:
    Mar 9, 2009
    #3
    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.
     
  4. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    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.

    :D
     
  5. fig
    macrumors 6502a

    Joined:
    Jun 13, 2012
    Location:
    Houston, TX
    #5
    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.
     
  6. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #6
    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! :p

    (some of us: machine language/assembly, punch cards, heh) JK
     
  7. thread starter macrumors 6502a

    Joined:
    Mar 9, 2009
    #7
    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.
     
  8. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #8
    Guess you fixed whatever it was - both pages work fine for me, one is birds and one is cars otherwise no issues that I can see. Nice job.
     

Share This Page