SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2004
    Location
    Scotland
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mixed up about javascript & tables!

    Please can someone help me!
    I'm trying to set up a web page using Dynamic Drive's 'Image Thumbnail Viewer II'. It allows the visitor to simply 'rollover' the thumbnail and view the 'big pic' beside it.

    I've managed to get the script to work with my images but I don't know how to achieve the layout I want.

    For example, I want 14 thumbs (each 30x30px) in 2 colums on the left and I want the 'big images' to open in a cell/table or whatever, on the right of the thumbs. I've tried but the images jump around on rollover!
    If I can just get the layout right for one page, the rest of my site will be a lot easier to build.
    I think part of the problem is not knowing where to put the size of the biggest picture.

    I'm using tables as I don't really know any other way.
    Any advice from you would be most welcome!

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, here's a sample, table-less. Yours is really a layout question - not JS - but what the heck. Modified the script a bit. Hopefully this will get you started. Beatles forever .
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>:::::: Beatles Forever ::::::</title>
    <base href="http://images-eu.amazon.com/images/P/">
    <style type="text/css">
    
    html, body {
    	margin: 0;
    	background: #ca8;
    }
    div.thumbs {
    	float: left;
    	width: 56px;
    	padding: 2px;
    	border: 3px #000 double;
    	background: #edb;
    }
    div.thumbs a:link, div.thumbs a:visited {
    	display: block;
    	margin: 2px;
    	border: 1px #000 solid;
    	cursor: crosshair;
    }
    div.thumbs a:hover {
    	border-color: #edb;
    }
    div.thumbs a img {
    	border-width: 0;
    }
    div#canvas {
    	visibility: hidden;
    	float: left;
    	width: 300px;
    	height: 300px;
    	margin: 45px 20px;
    	border: 1px #000 solid;
    }
    div#container {
    	position: relative;
    	width: 700px;
    	height: 390px;
    	margin-top: 80px;
    	padding: 4px 0 4px 20px;
    	border: 15px #fff solid;
    	border-left-width: 0;
    	background: url(http&#58;//www.grsites.com/textures/music/music036.gif);
    }
    div#logo {
    	position: absolute;
    	left: 581px;
    	top: 135px;
    	width: 275px;
    	height: 143px;
    	border: 2px #fff solid;
    	background: black url(http&#58;//www.pc007a3655.pwp.blueyonder.co.uk/BeatlesLogo.Gif);
    }
    
    </style>
    <script type="text/javascript">
    
    /***********************************************
    * Image Thumbnail Viewer II script-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http&#58;//www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    
    //Specify image paths and optional link (set link to "" for no link):
    var dynimages=new Array()
    dynimages[0]=["B000002UA9.02.LZZZZZZZ.jpg",""];
    dynimages[1]=["B000002UAF.02.LZZZZZZZ.jpg",""];
    dynimages[2]=["B000002UAL.02.LZZZZZZZ.jpg",""];
    dynimages[3]=["B000002UAO.02.LZZZZZZZ.jpg",""];
    dynimages[4]=["B000002UAU.02.LZZZZZZZ.jpg",""];
    dynimages[5]=["B00000K4ES.02.LZZZZZZZ.jpg",""];
    dynimages[6]=["B000002UB3.02.LZZZZZZZ.jpg",""];
    dynimages[7]=["B000002UAC.02.LZZZZZZZ.jpg",""];
    dynimages[8]=["B000006STN.01.LZZZZZZZ.jpg",""];
    dynimages[9]=["B000002UAI.02.LZZZZZZZ.jpg",""];
    dynimages[10]=["B000002UAR.02.LZZZZZZZ.jpg",""];
    dynimages[11]=["B000002UDB.02.LZZZZZZZ.jpg",""];
    dynimages[12]=["B000026B01.02.LZZZZZZZ.jpg",""];
    dynimages[13]=["B000002UB6.02.LZZZZZZZ.jpg",""];
    
    //Preload images ("yes" or "no"):
    var preloadimg="yes"
    
    //Set optional link target to be added to all images with a link:
    var optlinktarget=""
    
    //Set image border width
    var imgborderwidth=0
    
    //Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
    var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.9)"
    
    var do_moz_fade = true; //mozilla fade-in yes/no
    
    ///////No need to edit beyond here/////
    
    var picobj, opac = 0, moz_fadeTimer = null, fadespeed = 1; //mozilla fade-in
    
    if (preloadimg=="yes"){
    for (x=0; x<dynimages.length; x++){
    var myimage=new Image()
    myimage.src=dynimages[x][0]
    }
    }
    
    function returnimgcode(theimg){
    var imghtml=""
    if (theimg[1]!="")
    imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
    imghtml+='<img id="bigpic" width="100%" height="100%" src="'+theimg[0]+'" border="'+imgborderwidth+'">'
    if (theimg[1]!="")
    imghtml+='</a>'
    return imghtml
    }
    
    function modifyimage(loadarea, imgindex){
    if (document.getElementById){
    document.getElementById('canvas').style.visibility = 'visible';
    var imgobj=document.getElementById(loadarea)
    if (imgobj.filters && window.createPopup){
    imgobj.style.filter=filterstring
    imgobj.filters[0].Apply();
    }
    imgobj.innerHTML=returnimgcode(dynimages[imgindex])
    if (imgobj.filters && window.createPopup)
    imgobj.filters[0].Play()
    else if (do_moz_fade && typeof imgobj.style.MozOpacity != 'undefined') {
    clearInterval(moz_fadeTimer);
    opac = 0;
    picobj = document.getElementById('bigpic')
    picobj.style.MozOpacity = 0;
    moz_fadeTimer = setInterval('moz_fadeIn()',fadespeed);
    }
    return false;
    }
    }
    
    function moz_fadeIn(){
    if (opac < 98){
    opac+=2;
    picobj.style.MozOpacity = opac * .01;
    } else {
    clearInterval(moz_fadeTimer);
    opac = 0;
    }
    }
    
    </script>
    </head>
    <body>
    <div id="container">
    <div class="thumbs">
    <a href="#" onclick="return modifyimage('canvas',0)"><img width="50" height="50" src="B000002UA9.02.THUMBZZZ.jpg"></a>
    <a href="#" onclick="return modifyimage('canvas',7)"><img width="50" height="50" src="B000002UAC.02.THUMBZZZ.jpg"></a>
    <a href="#" onclick="return modifyimage('canvas',1)"><img width="50" height="50" src="B000002UAF.02.THUMBZZZ.jpg"></a>
    <a href="#" onclick="return modifyimage('canvas',8)"><img width="50" height="50" src="B000006STN.01.LZZZZZZZ.jpg"></a>
    <a href="#" onclick="return modifyimage('canvas',2)"><img width="50" height="50" src="B000002UAL.02.THUMBZZZ.jpg"></a>
    <a href="#" onclick="return modifyimage('canvas',9)"><img width="50" height="50" src="B000002UAI.02.THUMBZZZ.jpg"></a>
    <a href="#" onclick="return modifyimage('canvas',3)"><img width="50" height="50" src="B000002UAO.02.THUMBZZZ.jpg"></a>
    </div>
    <div id="canvas"></div>
    <div class="thumbs">
    <a href="#" onclick="return modifyimage('canvas',10)"><img width="50" height="50" src="B000002UAR.02.THUMBZZZ.jpg"></a>
    <a href="#" onclick="return modifyimage('canvas',4)"><img width="50" height="50" src="B000053HQH.02.THUMBZZZ.jpg"></a>
    <a href="#" onclick="return modifyimage('canvas',11)"><img width="50" height="50" src="B000002UDB.02.THUMBZZZ.jpg"></a>
    <a href="#" onclick="return modifyimage('canvas',5)"><img width="50" height="50" src="B00000K4ES.02.THUMBZZZ.jpg"></a>
    <a href="#" onclick="return modifyimage('canvas',12)"><img width="50" height="50" src="B000026B01.02.THUMBZZZ.jpg"></a>
    <a href="#" onclick="return modifyimage('canvas',6)"><img width="50" height="50" src="B000002UB3.02.THUMBZZZ.jpg"></a>
    <a href="#" onclick="return modifyimage('canvas',13)"><img width="50" height="50" src="B000002UB6.02.THUMBZZZ.jpg"></a>
    </div>
    <div id="logo"></div>
    </div>
    </body>
    </html>
    
    Last edited by adios; Apr 2, 2004 at 11:10.
    ::: certified wild guess :::

  3. #3
    SitePoint Member
    Join Date
    Mar 2004
    Location
    Scotland
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adios! Thank you!
    You are one of the few who have tried to assist me in my quest and I thank you sooo much for your time.
    I will now go and see what I can do with the script ...now that I have something to work on.
    Cheers!!

  4. #4
    SitePoint Member
    Join Date
    Mar 2004
    Location
    Scotland
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK...here goes.
    I've just published the a test page along with a few notes.
    For those folks who have helped me so far, the notes are for you. The site is only available to you (and other forum members who may wish to help) and are purely to help explain my intentions and hopes for the site's development.

    The CATS page is the new test page: ie how to include nav buttons etc. I know HTML-wise that it's probably a bit rough and there are certain bits I'm not sure about eg. the head of the page but...
    Anyhoo. I'd really like you to have a wee look. I'm not quite 'there' yet but I'm getting nearer to what I want - with a bit tuck here and bit tweak there! (Sounds like me getting ready for a Saturday night out )
    If the CATS test page is generally ok, the rest of the pages will follow . As I explain on the home page, that's just one category: there's a lot more to come...eeek! What have I let myself in for?!

    http://www.mohawks.pwp.blueyonder.co.uk/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •