Integration Slider Jquery
Fermé
sumator
-
20 août 2014 à 12:24
yamdjio Messages postés 90 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 21 mai 2015 - 22 août 2014 à 14:02
yamdjio Messages postés 90 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 21 mai 2015 - 22 août 2014 à 14:02
A voir également:
- Integration Slider Jquery
- Wow slider - Télécharger - Présentation
- Google maps waze integration - Accueil - Guide transports et cartes
- Slider kz - Forum Javascript
- Jquery refresh dom ✓ - Forum Javascript
- Idm integration module opera - Forum Opera
3 réponses
yamdjio
Messages postés
90
Date d'inscription
lundi 18 août 2014
Statut
Membre
Dernière intervention
21 mai 2015
5
Modifié par yamdjio le 20/08/2014 à 14:43
Modifié par yamdjio le 20/08/2014 à 14:43
salut, premièrement , en utilisant une autre div , il te faudra quelle ait le même code css que la div principale (pour avoir le même effet).
donc tu peut soit copier toute la partie allant de <div id=galerie>.....</div> tu la met dans la partie réservée à ta div principale , bref tu enlève ta div principale et tu la remplace par la div galerie, ou dans le css d'abord tu donne à ta div principale les même propriétés que la div galerie, toujours dans la div principale tu conserve la même structure que la div galerie. et dans la partie ci : tu remplace s = new slider("#galerie"); par s = new slider("#principale");
donc tu peut soit copier toute la partie allant de <div id=galerie>.....</div> tu la met dans la partie réservée à ta div principale , bref tu enlève ta div principale et tu la remplace par la div galerie, ou dans le css d'abord tu donne à ta div principale les même propriétés que la div galerie, toujours dans la div principale tu conserve la même structure que la div galerie. et dans la partie ci : tu remplace s = new slider("#galerie"); par s = new slider("#principale");
Salut, tout d'abord merci pour ton aide.
Dans le coup, je suis parti dans l'idée de mettre la navigation sur les images.
J'ai donc suivis a la lettre le tuto mais rien ne bouge. J'ai beau cliquer sur le bouton suivant, il n'y a aucun mouvement.
Je te transmet le nouveau code et je te remercie encore !
Dans le coup, je suis parti dans l'idée de mettre la navigation sur les images.
J'ai donc suivis a la lettre le tuto mais rien ne bouge. J'ai beau cliquer sur le bouton suivant, il n'y a aucun mouvement.
Je te transmet le nouveau code et je te remercie encore !
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>PIERRE-ALAIN DUPRAZ ARCHITECTE ETS FAS</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
#fond {
position: absolute;
width: 955px;
height: 543px;
margin-top:-271.5px;
margin-left:-477.5px;
background-color: #FFFFFF;
layer-background-color: #FFFFFF;
border: 1px none #FFFFFF;
z-index: 1;
visibility: visible;
left:50%;
top:50%;
}
#pad {
position: absolute;
visibility: visible;
left: 66px;
top: 0px;
width: auto;
height: auto;
background-color: #FFFFFF;
layer-background-color: #FFFFFF;
border: 1px none #000000;
z-index: 1;
font-family: "Helvetica Light", Arial, sans-serif;
font-size: 9pt;
color: #999999;
}
#actualites {
position: absolute;
visibility: visible;
left: 0px;
bottom: 64px;
width: auto;
height: 13px;
background-color: #FFFFFF;
layer-background-color: #FFFFFF;
border: 1px none #000000;
z-index: 1;
font-family: "Helvetica Light", Arial, sans-serif;
font-size: 8pt;
color: #999999;
}
#projets {
position: absolute;
visibility: visible;
left: 0px;
bottom: 48px;
width: auto;
height: 13px;
background-color: #FFFFFF;
layer-background-color: #FFFFFF;
border: 1px none #000000;
z-index: 1;
font-family: "Helvetica Light", Arial, sans-serif;
font-size: 8pt;
color: #999999;
}
#publications {
position: absolute;
visibility: visible;
left: 0px;
bottom: 32px;
width: auto;
height: 13px;
background-color: #FFFFFF;
layer-background-color: #FFFFFF;
border: 1px none #000000;
z-index: 1;
font-family: "Helvetica Light", Arial, sans-serif;
font-size: 8pt;
color: #999999;
}
#evenements {
position: absolute;
visibility: visible;
left: 0px;
bottom: 16px;
width: auto;
height: 13px;
background-color: #FFFFFF;
layer-background-color: #FFFFFF;
border: 1px none #000000;
z-index: 1;
font-family: "Helvetica Light", Arial, sans-serif;
font-size: 8pt;
color: #999999;
}
#bureau {
position: absolute;
visibility: visible;
left: 0px;
bottom: 0px;
width: auto;
height: 13px;
background-color: #FFFFFF;
layer-background-color: #FFFFFF;
border: 1px none #000000;
z-index: 1;
font-family: "Helvetica Light", Arial, sans-serif;
font-size: 8pt;
color: #999999;
}
#galerie {
position: absolute;
visibility: visible;
left: 71px;
bottom: 0px;
width: 679px;
height: 509px;
background-color: #FFFFFF;
layer-background-color: #FFFFFF;
border: 1px none #000000;
z-index: 1;
font-family: "Helvetica Light", Arial, sans-serif;
font-size: 9pt;
color: #999999;
overflow:hidden;
}
#slider {
width:10000px;
height:509px;
}
#txt {
position: absolute;
visibility: visible;
right: 0px;
bottom: 34px;
width: 190px;
height: 475px;
background-color: #FFFFFF;
layer-background-color: #000000;
z-index: 1;
font-family: "Helvetica Light", Arial, sans-serif;
font-size: 8pt;
color: #999999;
}
#prec {
position:absolute;
height: 509px;
width: 175px;
background:url(../img/prec.png);
left: 0px;
bottom: 0px;
cursor:pointer;
}
#prec:hover {
background:url(../img/prec_over.png);
}
#suiv {
position:absolute;
height: 509px;
width: 175px;
background:url(../img/suiv.png);
right: 0px;
bottom: 0px;
cursor:pointer;
}
#suiv:hover {
background:url(../img/suiv_over.png);
}
a:link {
color: #999999;
text-decoration: none;
}
a:visited {
color: #999999;
text-decoration: none;
}
a:hover {
color: #666666;
text-decoration: none;
}
a:active {
color: #666666;
text-decoration: none;
}
-->
</style>
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/slider.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="background">
<div id="fond">
<div id="pad"><a href="file:///Macintosh HD/Users/Thibault1/index.html"><b>PIERRE-ALAIN DUPRAZ</b> ARCHITECTE ETS FAS</a></div>
<div id="bureau"><a href="file:///Macintosh HD/Users/Thibault1/index.html">bureau</a></div>
<div id="evenements"><a href="file:///Macintosh HD/Users/Thibault1/index.html">événements</a></div>
<div id="publications"><a href="file:///Macintosh HD/Users/Thibault1/index.html">publications</a></div>
<div id="projets"><a href="file:///Macintosh HD/Users/Thibault1/index.html">projets</a></div>
<div id="actualites"><a href="file:///Macintosh HD/Users/Thibault1/index.html">actualités</a></div>
<div id="galerie">
<div id="slider">
<a><img src="../img/01.jpg" /></a>
<a><img src="../img/02.jpg" /></a>
<a><img src="../img/03.jpg" /></a>
</div>
<div id="suiv"></div>
<div id="prec"></div>
</div>
<div id="txt"><b>CONSTRUCTION D'UNE VILLA</b> Collonge-Bellerive<br />
Maître d'ouvrage : Privé
<p align="justify">La parcelle, située au bord de la route, offre une pente longitudinale d'une hauteur équivalente à un demi-niveau. Cette particularité donne le point de départ de l'intégration de la maison dans son environnement exigu. La maison est constituée d'une succession de demi-niveaux profitant de relations privilégiées avec l'extérieur.<br />
<br />
L'accès à la maison s'effectue par la route, au point bas de la parcelle. Le garage, intégré à l'ouvrage, est adossé à la parcelle voisine. Dans la continuité de la cuisine située au rez-de-chaussée, une terrasse extérieure, prolongée par une piscine, est couverte par le volume en porte-à-faux du séjour. Depuis la cuisine, un escalier distribue un demi-niveau plus haut, la salle à manger ainsi que la chambre principale.<br /> </p>
<p><b>Projet 2011-2012<br />
Réalisation 2012-2013</b></p>
<p><b>Collaborateurs :</b><br />
Mehdi Aouabed, Samuele Evolvi</p></div>
</div>
</div>
</body>
</html>
$(document).ready(function(){
s = new slider("#galerie");
});
var slider = function(id){
self=this
this.div = $(id);
this.slider = this.div.find("#slider");
this.largeurCache = this.div.width();
this.largeur=0;
this.div.find('a').each(function(){
self.largeur+=$(this).width();
});
this.prec = this.div.find("#prec");
this.suiv = this.div.find("#suiv");
this.saut = this.largeurCache/2;
this.nbEtapes = Math.ceil(this.largeur/this.saut);
this,courant=0;
this.suiv.click (function(){
sel.courant++;
self.slider.animate({
left:-self.courant*self.saut
},1000);
});
}
yamdjio
Messages postés
90
Date d'inscription
lundi 18 août 2014
Statut
Membre
Dernière intervention
21 mai 2015
5
22 août 2014 à 14:02
22 août 2014 à 14:02
met les lien des deux fichiers javascript, qu tu utilise , j'ai pas pu les avaoir avec le lien de youtube
