Home/ Questions/Q 8686119
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T22:45:29+00:00

I’m trying to create a bullet navigation bar, to navigate through a sequence of

  • 0

I’m trying to create a bullet navigation bar, to navigate through a sequence of images.

I also want to display a thumbnail just below the highlighted bullet.

My approach was to create two lists dynamically – an unordered list of bullets, and an unordered list of thumbnails. I’m doing this by iterating through all the images that I have – and append()ing to both lists ( append() a bullet to one list, then append() a thumbnail to the other list )

And then I add a hover() function to each of the bullets, that will hide all the thumbnails but show the corresponding thumbnail.

It works – however the thumbnail always appears in the same fixed place.
How can I display it below the highlighted bullet?

Please see my jsfiddle here:
http://jsfiddle.net/beeband/u2zKE/

NB. there’s a bug – the last two thumbs never appear – no idea what’s happening there, the images exist. Might be related?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    http://jsfiddle.net/u2zKE/2/

    Here you go

    The problem is that you use the index property and the first element will return 2.
    http://jsfiddle.net/u2zKE/3/

    So something is wrong in your DOM.

    I modified the code to use a custom data-index attribute. Because of that there noway the DOM can be corrupt.

        var liMarkup = $('<li class="bulletButton" data-index="'+i+'"><a href="#">'+i+'</a></li>'); // New line with data-index attribute

    And the other change, use the data-index attribute insteed

        .eq($(this).data("index"))//Get the li at same index which triggered hover
    • 0