Ajouter des détails au diaporama photo javascript

Question

Notre équipe travaille actuellement à la refonte complète du site Web de notre école et l'un de nos projets actuellement en cours est un diaporama photo léger que vous pouvez trouver here.

À l'heure actuelle, lorsque l'utilisateur entre l'espace entre deux vignettes, ils se fanent tous. Quelle est la meilleure façon de les organiser pour qu'ils "se défilent" lorsque l'utilisateur entre dans la zone générale des pouces? Je pense à un div, mais je suis un peu flou sur la façon dont nous pourrions le mettre en œuvre.

Toute aide est très appréciée. Aucun d'entre nous n'est particulièrement fort quand il s'agit de style avec javascript, donc c'est une expérience d'apprentissage amusante pour nous.

Un grand merci,

Justian Meyer

Answer 1

html

<div id="wrapper"> 
    <img class="big" ..../> 
    <div id="hover_area" onmouseover="startUnFade();"> 
    <img class="thumb" ..../> 
    <img class="thumb" ..../> 
    <img class="thumb" ..../> 
    </div> 
</div> 

vous pouvez définir postion d'emballage div sur la page.

css

#wrapper { 
    height: 420px; 
    width: 660px; 
    position: relative; 
} 
#hover_area { 
    position: absolute; /* this will position your thumbnails relative to wrapper */ 
    right: 0; 
    bottom: 0; 
    padding: 5px; /* space at right and at the bottom */ 
} 
/* and put you images one each other*/ 
#hover_area img.thumb { 
    float: left; 
    padding: 5px; /* 10px space between images */ 
    width: 50px; 
    height: 50px; 
} 

Et vous ne devriez pas utiliser les styles en ligne créer un style atribute et mis class dans le fichier css.