SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member LaLindsey's Avatar
    Join Date
    Dec 2005
    New York
    0 Post(s)
    0 Thread(s)

    Unhappy Roating Image - Add border to thumbnail...


    I'm trying to teach myself javascript and failing miserably. I can't figure this out no matter what I do, so if anyone could help me, I would REALLY, REALLY appreciate it.

    So, I have this Image rotation. There is 5 images (and some HTML that is pulled for the headline and tagline) that are rotated through in order (by an array) that are pulled using some PHP from a plugin that I have for wordpress. This part I have working fine. Below my main image, are 5 thumbnails matching the 5 main larger images that are being displayed.

    This is what it looks like still:

    When the main image is being displayed I want the matching thumbnail to display a border around it, highlighting that that is the image that is being displayed.

    I can't get it to work, I've tried using an if,else statement, creating a second function that would just rotate through the images an assign a border to those images at the same time as the larger image... nothing I have done has worked.

    Via pastebin: This is my original Javascript and my original HTML.

    I also tried this, which someone suggested to me, but the rotation of my larger image stopped (no larger image appeared at all):

    CSS/HTML/JS via pastebin.

    I really appreciate anyone taking the time to help.

    Last edited by LaLindsey; Jan 10, 2008 at 08:56. Reason: image not displaying using bbcode??

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    2 Post(s)
    0 Thread(s)
    Huge mistake there. You cannot put block-level elements inside inline-level elements. You're putting divs inside anchors, which is not allowed and should give unexpected behaviour across browsers.

    In addition you really don't need to have all that code repeated for every image you want in the placeholder. All you need is something like this:

    HTML Code:
    <div id="stories">
        <li><a href="story1.html"><img src="story1.png" /></a></li>
        <li><a href="story2.html"><img src="story2.png" /></a></li>
        <li><a href="story3.html"><img src="story3.png" /></a></li>
        <li><a href="story4.html"><img src="story4.png" /></a></li>
    The div is actually superfluous if that were all we're doing, but it'll be useful for when javascript kicks in. The thing is that at the moment, it'll look OK for people who have javascript disabled.

    Now the javascript.
    Code Javascript:
    function rotate() {
      var pl = document.createElement('a'); // Make placeholder
      pl.appendChild(document.createElement('img')); // put image in it
      var st = document.getElementById('stories');
      var ul = st.getElementsByTagName('ul')[0];
      var th = ul.lastChild; // get last child of list
      st.insertBefore(pl, ul); // put placeholder before UL in div
      window.setInterval(function() { // run this every five seconds
        th = getNextSibling(th);  // get next li element
        pl.href = th.firstChild.href; // give placeholder href of current list item anchor
        pl.firstChild.src = th.firstChild.firstChild.src; // same for src of img element
          th.className = 'active'; // apply class to current thumb (LI element)
      }, 5000);
    function getNextSibling(el) {
      do {
        if (!el.nextSibling) el = el.parentNode.firstChild;
        else el = el.nextSibling;
      while (el.nodeType != 1);
      return el;
    window.onload = rotate;
    Then simple CSS for current list element:
    #stories {border:3px solid blue}
    You should be able to do the rest of the CSS by yourself, cssgirl.


Posting Permissions

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