Curseur jQuery comme ligne de temps

Question

Je viens de terminer l'incorporation d'un accordéon jQuery avec un curseur jQuery. I.e.

3 images sont affichées. L'utilisateur peut utiliser les boutons PREV ou NEXT pour voir les images suivantes/précédentes. Ils peuvent également naviguer à travers toutes les images avec le curseur.

L'étape suivante consiste à faire en sorte que ce curseur ressemble à un montage. Le côté gauche doit commencer à 1970 et se terminer à 2010. Pour chaque élément (un élément est un ensemble de 3 images dans ce cas), j'en ai besoin pour afficher une date sur la timeline.

i.e.:

Je sais que je pourrais créer une image avec les dates de la largeur droite en dehors, mais ce idealement doit être dynamique si plusieurs éléments peuvent être mis et les mises à jour auto timeline.

Answer 1

À un niveau élevé, ce qui suit devrait fonctionner:

1. obtenir la largeur totale de l'élément de l'interface utilisateur de curseur, en pixels. Diviser ce nombre par [total number of labels] - 1 pour obtenir le nombre total de pixels à allouer à chaque étiquette.
2. Ajoutez une série de div immédiatement après le curseur div avec la largeur obtenue à l'étape 2 et le style float:left.
3. Suivez tout avec un div vide avec le style clear: both.

Voici un exemple de base:

CSS

.timeline { 
    width: 500px; 
    border: 1px solid black; 
} 
.timelineEntry { 
    float: left; 
} 
.first { 
    position: relative; left: 5px; 
} 
.last { 
    position: relative; left: -10px; 
} 
.clear { 
    clear: both; 
} 

Markup

<div id="timelineContainer"> 
    <div class="timeline" id="slider"> 
     Slider UI Goes Here 
    </div> 
</div> 
<div class="clear"></div> 

JavaScript

var container = document.getElementById("timelineContainer"); 
var labels = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]; 
var totalWidth = $("#slider").width(); 
var labelWidth = Math.floor(totalWidth/(labels.length - 1)); 
for (var index = 0; index < labels.length; index++) { 
    var nextLabel = document.createElement("div"); 
    nextLabel.className = "timelineEntry"; 
    if (index == 0) { 
     nextLabel.className += " first"; 
    } 
    else if (index == labels.length - 1) { 
     nextLabel.className += " last"; 
    } 
    nextLabel.style.width = labelWidth + "px"; 
    nextLabel.innerHTML = labels[index]; 
    container.appendChild(nextLabel); 
}