Carousel CSS/Javascript

Résolu

zebulon2503 Messages postés 1229 Date d'inscription Statut Membre Dernière intervention -
zebulon2503 Messages postés 1229 Date d'inscription Statut Membre Dernière intervention - 11 janv. 2010 à 14:34

Salut à tous

Je suis en train de bosser sur un site web et j'aimerais y mettre une galerie photo.
J'ai réussi à mettre des miniatures qui s'agrandissent en cliquant dessus, à faire un diaporama défilant, mais ce que je veux exactement est plutôt un affichage des thumbnails facon Mac ou Vista, avec les icônes déroulante de la barre des tâches...

Je cherche des infos sur le net sans succès, je suis tombé sur pas mal de "carousel" mais ne suis pas sûr que ce soit le nom exacte de ce que je cherche...

Donc si quelqu'un aurait un début d'idée, de solution...

Merci d'avance !

--
Les cons peuvent avoir l'air intelligent à première vue... Heureusement pour eux que la vitesse de la lumière est supérieure à celle du son.

Afficher la suite

A voir également:

Carousel CSS/Javascript
Fond d'écran carousel ✓ - Forum Xiaomi
Javascript arrondi ✓ - Forum Javascript
Css exposant ✓ - Forum CSS
Telecharger javascript - Télécharger - Langages
Css download - Télécharger - HTML

7 réponses

Réponse 1 / 7
zebulon2503 Messages postés 1229 Date d'inscription Statut Membre Dernière intervention 110

Up :-)
0
Réponse 2 / 7
phenX Messages postés 463 Date d'inscription Statut Membre Dernière intervention 23

ce que tu^peut faire c'est mettre des miniature de tes images les unes a coté des autres, et à l'aide d'un :over dans ton css tu agrandi l'imagette, comme ca lorsque ton pointeur quittera l'aimagette elle redeviendra à la même taille.

Avec les on mouseover et onmouseout tu peut faire la même chose
0
Réponse 3 / 7
zebulon2503 Messages postés 1229 Date d'inscription Statut Membre Dernière intervention 110

Je connais ca, mais là j'ai pas mal de photos et j'aimerais faire une espèce de liste déroulante pour ne pas toutes les afficher (ce qui prendrait pas mal de place).
Une autre idée ?
Merci quand même pour la proposition :-)
0
Réponse 4 / 7
phenX Messages postés 463 Date d'inscription Statut Membre Dernière intervention 23

http://sorgalla.com/projects/jcarousel/examples/static_auto.html
0
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 7
zebulon2503 Messages postés 1229 Date d'inscription Statut Membre Dernière intervention 110

Merci.

Je vais regarder le code pour essayer de comprendre comment ca marche.
0
Réponse 6 / 7
phenX Messages postés 463 Date d'inscription Statut Membre Dernière intervention 23

yep, tu verra ce n'est aussi compliquer à mettre en place que ca en a l'air
0
1. rico
  
  Bonjour, je suis ce fil de conversation, perso. je n'arrive pas l'intégrer dans ma page..... JE sais que je dois être mauvais, mais pourriez m'expliquer la marche à suivre ?????
  
  0

zebulon2503 Messages postés 1229 Date d'inscription Statut Membre Dernière intervention 110

Salut

Voici un bout du code de ma page, avec le carousel intégré.
Il faut rajouter les script requis, que tu télécharges sur le site ci dessus, et configurer l'affichage de tes images comme ci dessous.
En espèrant que ca marchera.
A+

<!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" xml:lang="en-us">
<head>
<title>Titre de ta page</title>
<link rel="stylesheet" type="text/css" href="css/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript">
function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });
    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });
    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 2,
        wrap: 'last',
        initCallback: mycarousel_initCallback
    });
});

</script>
</head>
<body>
		
	<div id="wrap" align="center">
		<ul id="mycarousel" class="jcarousel-skin-tango">
			<li><a href="images/image1.jpg" title="image1"><img src="images/image1.jpg" width="70" height="70" alt=""></a></li>
                                                <li><a href="images/image2.jpg" title="image2"><img src="images/image2.jpg" width="70" height="70" alt=""></a></li>
			
		</ul>
	</div>
</body>
</html>

Carousel CSS/Javascript

7 réponses

Discussions similaires

Newsletters