image gallery linking thumbnails to timeline key frames

patnz · #1 (**permalink**) Dec 29th, 2007, 23:47

Hey All,

Im putting together my first website in dreamweaver and am trying to make a rotating image gallery. I have a single column thumbnail gallery contained in a divtag box with scrolling overflow. I have a central box which displays the larger size images. These are compiled in a timeline and the idea is that you can switch between them by clicking on the appropriate thumbnail which has the behaviour - 'onclick' and the effect 'go to keyframe'.

I threw together a rough mockup of this to see if it would work and it worked fine in internet explorer (for a change), but in firefox only the first image in the timeline would show and the 'onclick' behaviours did nothing

can anyone offer some insight as to why that might be???

p.s. - heres a link to a screen capture of the page... maybe that'll help ??

http://www.flickr.com/photos/57128501@N00/2147040755/

patnz · #2 (**permalink**) Jan 1st, 2008, 07:56

...hmmm.... no luck so far

does anyone know another way to achieve a similar effect? would this sorta thing usually be done with flash?

cheers

pat

patnz · #3 (**permalink**) Jan 2nd, 2008, 01:33

....and the code... wasn't sure if it was kosher to dump big loads of text into threads but I've seen a few around so heres mine... all dreamweaver generated and I don't really know the first thing about javascript so could be some issues here....

HTML: Select all

<!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>gallery page</title>
<link href="gallerytrialcss.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
    background-color: #333333;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_timelineGoto(tmLnName, fNew, numGotos) { //v2.0
  //Copyright 1998, 1999, 2000, 2001, 2002, 2003, 2004 Macromedia, Inc. All rights reserved.
  var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,lastKeyFr,propNum,theObj;
  if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
  tmLn = document.MM_Time[tmLnName];
  if (numGotos != null)
    if (tmLn.gotoCount == null) tmLn.gotoCount = 1;
    else if (tmLn.gotoCount++ >= numGotos) {tmLn.gotoCount=0; return}
  jmpFwd = (fNew > tmLn.curFrame);
  for (i = 0; i < tmLn.length; i++) {
    sprite = (jmpFwd)? tmLn[i] : tmLn[(tmLn.length-1)-i]; //count bkwds if jumping back
    if (sprite.charAt(0) == "s") {
      numKeyFr = sprite.keyFrames.length;
      firstKeyFr = sprite.keyFrames[0];
      lastKeyFr = sprite.keyFrames[numKeyFr - 1];
      if ((jmpFwd && fNew<firstKeyFr) || (!jmpFwd && lastKeyFr<fNew)) continue; //skip if untouchd
      for (keyFrm=1; keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]; keyFrm++);
      for (j=0; j<sprite.values.length; j++) {
        props = sprite.values[j];
        if (numKeyFr == props.length) propNum = keyFrm-1 //keyframes only
        else propNum = Math.min(Math.max(0,fNew-firstKeyFr),props.length-1); //or keep in legal range
        if (sprite.obj != null) {
          if (props.prop2 == null) sprite.obj[props.prop] = props[propNum];
          else        sprite.obj[props.prop2][props.prop] = props[propNum];
      } }
    } else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);
  }
  tmLn.curFrame = fNew;
  if (tmLn.ID == 0) eval('MM_timelinePlay(tmLnName)');
}

function MM_initTimelines() { //v4.0
    //MM_initTimelines() Copyright 1997 Macromedia, Inc. All rights reserved.
    var ns = navigator.appName == "Netscape";
    var ns4 = (ns && parseInt(navigator.appVersion) == 4);
    var ns5 = (ns && parseInt(navigator.appVersion) > 4);
    var macIE5 = (navigator.platform ? (navigator.platform == "MacPPC") : false) && (navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4);
    document.MM_Time = new Array(1);
    document.MM_Time[0] = new Array(1);
    document.MM_Time["Timeline1"] = document.MM_Time[0];
    document.MM_Time[0].MM_Name = "Timeline1";
    document.MM_Time[0].fps = 15;
    document.MM_Time[0][0] = new String("sprite");
    document.MM_Time[0][0].slot = 1;
    if (ns4)
        document.MM_Time[0][0].obj = document["Image1"];
    else if (ns5)
        document.MM_Time[0][0].obj = document.getElementById("Image1");
    else
        document.MM_Time[0][0].obj = document["Image1"];
    document.MM_Time[0][0].keyFrames = new Array(1, 20, 40, 60, 80);
    document.MM_Time[0][0].values = new Array(1);
    document.MM_Time[0][0].values[0] = new Array("1.jpg","2.jpg","3.jpg","4.jpg","1.jpg");
    document.MM_Time[0][0].values[0].prop = "src";
    document.MM_Time[0].lastFrame = 80;
    for (i=0; i<document.MM_Time.length; i++) {
        document.MM_Time[i].ID = null;
        document.MM_Time[i].curFrame = 0;
        document.MM_Time[i].delay = 1000/document.MM_Time[i].fps;
    }
}
//-->
</script>
</head>

<body>
<div class="outsidecontainer">
  <div class="banner"></div>
  <div class="left">
    <div class="thumbs"><img src="../../content_pages/Design/Stencil Art/thumbs/better_hurry.jpg" alt="hurry" width="100" height="100" onclick="MM_timelineGoto('Timeline1','1')" /><img src="../../content_pages/Design/Stencil Art/thumbs/butterfly_thumb.jpg" alt="butterfly" width="100" height="100" onclick="MM_timelineGoto('Timeline1','20')" /><img src="../../content_pages/Design/Stencil Art/thumbs/censo_thumb.jpg" alt="censor" width="100" height="100" onclick="MM_timelineGoto('Timeline1','60')" /><img src="../../content_pages/Design/Stencil Art/thumbs/lovethesystem_thumb.jpg" alt="love" onclick="MM_timelineGoto('Timeline1','40')" /></div>
  </div>
  <div class="mid"><img src="1.jpg" alt="hurry" name="Image1" width="464" height="364" /></div>
  <div class="right"></div>
  <div class="bottom"></div>
</div>
</body>
</html>

Monie · #4 (**permalink**) Jan 2nd, 2008, 01:57

Your link there doesn't help much!
Do you have a working example of what you are trying to achieve here?

patnz · #5 (**permalink**) Jan 2nd, 2008, 02:08

Hi Monie, no I don't unfortunately. This is my first website I've put together for a course I'm taking and its more of an assignment than something thats going to be put up.

All I'm trying to do is get the main image to change when a thumbnail is clicked.

Not sure if using a timeline was a good idea to achieve this, but its wierd it seems to work in IE and not FF.

thanks anyways,

pat

Monie · #6 (**permalink**) Jan 2nd, 2008, 02:15

Do you mean you coded the thing yourself?
We need to see the real time working example.

I think you will get more help if you post this question in the Javascript forum.
I'll see if I can ask the moderator to move this thread to the Javascript forum.

Cheers..

Ed · #7 (**permalink**) Jan 3rd, 2008, 00:02

Isn't an "Advisor" a Moderator?

Monie · #8 (**permalink**) Jan 3rd, 2008, 00:15

I am an Advisor for ASP Forum, not the New to Web Design Forum (where this thread was originally posted)

I can only moderate ASP forum. Thanks to Rakuli who moved this thread to the appropriate forum.

c010depunkk, Rakuli is the moderator in the javascript forum!

Cheers..

Ed · #9 (**permalink**) Jan 3rd, 2008, 00:18

Thanks for clearing that up!

Ed

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
New fresh meat - need help doing gallery thumbnails	b08maz	Web Page Design	15	Jan 18th, 2007 13:39
Image gallery not displaying enlarged image	AdRock	PHP Forum	15	Sep 1st, 2006 11:31
off-site linking to a particular page in a site made with frames. NEED HELP	vandiermen	Web Page Design	1	Aug 6th, 2006 13:30
Image Linking (help)	aminah_azad	Flash & Multimedia Forum	6	Jun 21st, 2006 16:13
frames linking issues	bardaroart	Web Page Design	10	Dec 18th, 2003 16:48

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
image gallery linking thumbnails to timeline key frames