Carousel CSS/Javascript
Résolu/Fermé
zebulon2503
Messages postés
1228
Date d'inscription
jeudi 17 avril 2008
Statut
Membre
Dernière intervention
11 février 2016
-
9 déc. 2009 à 14:44
zebulon2503 Messages postés 1228 Date d'inscription jeudi 17 avril 2008 Statut Membre Dernière intervention 11 février 2016 - 11 janv. 2010 à 14:34
zebulon2503 Messages postés 1228 Date d'inscription jeudi 17 avril 2008 Statut Membre Dernière intervention 11 février 2016 - 11 janv. 2010 à 14:34
A voir également:
- Carousel CSS/Javascript
- Telecharger javascript - Télécharger - Langages
- A javascript error occurred in the main process - Forum Matériel & Système
- Javascript void 0 c'est quoi ✓ - Forum Réseaux sociaux
- Css lien non souligné - Astuces et Solutions
- Comment enlever le fond d'écran carousel ✓ - Forum Windows 10
7 réponses
zebulon2503
Messages postés
1228
Date d'inscription
jeudi 17 avril 2008
Statut
Membre
Dernière intervention
11 février 2016
110
10 déc. 2009 à 08:40
10 déc. 2009 à 08:40
Up :-)
phenX
Messages postés
704
Date d'inscription
mercredi 4 mai 2005
Statut
Membre
Dernière intervention
28 août 2012
23
10 déc. 2009 à 09:17
10 déc. 2009 à 09:17
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
Avec les on mouseover et onmouseout tu peut faire la même chose
zebulon2503
Messages postés
1228
Date d'inscription
jeudi 17 avril 2008
Statut
Membre
Dernière intervention
11 février 2016
110
10 déc. 2009 à 09:27
10 déc. 2009 à 09:27
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 :-)
Une autre idée ?
Merci quand même pour la proposition :-)
phenX
Messages postés
704
Date d'inscription
mercredi 4 mai 2005
Statut
Membre
Dernière intervention
28 août 2012
23
10 déc. 2009 à 09:57
10 déc. 2009 à 09:57
http://sorgalla.com/projects/jcarousel/examples/static_auto.html
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
zebulon2503
Messages postés
1228
Date d'inscription
jeudi 17 avril 2008
Statut
Membre
Dernière intervention
11 février 2016
110
10 déc. 2009 à 10:18
10 déc. 2009 à 10:18
Merci.
Je vais regarder le code pour essayer de comprendre comment ca marche.
Je vais regarder le code pour essayer de comprendre comment ca marche.
phenX
Messages postés
704
Date d'inscription
mercredi 4 mai 2005
Statut
Membre
Dernière intervention
28 août 2012
23
10 déc. 2009 à 10:20
10 déc. 2009 à 10:20
yep, tu verra ce n'est aussi compliquer à mettre en place que ca en a l'air
zebulon2503
Messages postés
1228
Date d'inscription
jeudi 17 avril 2008
Statut
Membre
Dernière intervention
11 février 2016
110
11 janv. 2010 à 14:34
11 janv. 2010 à 14:34
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+
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>