Bonjour à tous(toutes),
Je suis entrain de me créer un portfolio en one page basé sur du scrolling vertical, tout fonctionne bien, seulement je rencontre un problème avec les parametres lock et stop du plug-in qui s'occupe du scrolling.
J'ai posé un menu en fixed, donc qui reste toujours au meme endroit, qui contient les liens de mon site et renvoi à des div, toutes contenus dans une div à id="contener".
Le seul problème que j'ai, c'est que quand on clic sur plusieurs boutons, il enregistre les event et les effectue les uns après les autres. J'ai vu qu'on pouvait stopper ça avec les parametres lock et stop du plug-in, mais je n'arrive pas à le mettre en place, j'ai un peu tout essayé...
d'après ce que j'ai compris du site (http://flesler.blogspot.fr/2007/10/jquerylocalscroll-10.html), il faudrais ecrire qqc comme ça:
$('#contener).localScroll({
lock:true
});
mais ca ne marche pas !
est-ce quelqu'un aurait une idée ou aurait déjà rencontré ce problème?
au cas où, le code html du site
et le code javascript
Merci beaucoup d'avance !!
Je suis entrain de me créer un portfolio en one page basé sur du scrolling vertical, tout fonctionne bien, seulement je rencontre un problème avec les parametres lock et stop du plug-in qui s'occupe du scrolling.
J'ai posé un menu en fixed, donc qui reste toujours au meme endroit, qui contient les liens de mon site et renvoi à des div, toutes contenus dans une div à id="contener".
Le seul problème que j'ai, c'est que quand on clic sur plusieurs boutons, il enregistre les event et les effectue les uns après les autres. J'ai vu qu'on pouvait stopper ça avec les parametres lock et stop du plug-in, mais je n'arrive pas à le mettre en place, j'ai un peu tout essayé...
d'après ce que j'ai compris du site (http://flesler.blogspot.fr/2007/10/jquerylocalscroll-10.html), il faudrais ecrire qqc comme ça:
$('#contener).localScroll({
lock:true
});
mais ca ne marche pas !
est-ce quelqu'un aurait une idée ou aurait déjà rencontré ce problème?
au cas où, le code html du site
[i]<head>
<title>Alexis Poles</title>
<meta name="author" content="Alexis Poles" />
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<!-- base de donnée js -->
<script src="js/jQuery-min.js" type="text/javascript"></script>
<!-- fonction scrolling pour contenu -->
<script type="text/javascript" src="js/localscroll/jquery.localscroll.js"></script>
<script type="text/javascript" src="js/localscroll/jquery.scrollTo.js"></script>
<script type="text/javascript" src="js/localscroll/lancement.js"></script>
<!-- feuille de style + page perso js + google fonts pour le formulaire -->
<link type="text/css" href="style.css" rel="stylesheet" />
<script src="js/onglet.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Fredericka+the+Great|Amatic+SC' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="contener">
<div id="bg"> <!-- courbe de fond, divisée en 4 parties, + les informations -->
<img src="images/background/first.png" alt="background" id="first"/>
<img src="images/maquette/infos.png" alt="alexis poles / alexis.ps@hotmail.fr" id="infos" title="alexis.ps@hotmail.fr" />
<img src="images/background/second.png" alt="background" id="second"/>
<img src="images/background/third.png" alt="background" id="third"/>
<img src="images/background/fourth.png" alt="background" id="fourth"/>
</div> <!-- bg -->
<div id="menu"> <!-- menu + nom de chaque partie -->
<ul>
<li><a id="bouton_first" class="premier" href='#bg' onclick="clic()" onmouseover="setClass('premier','show')" onmouseout="quitClass('premier','hidden') "><img src='images/maquette/bouton-menu.png' alt='bouton' title='home'/></a></li>
<li><a id="bouton_second" class="deuxieme" href='#profil' onclick="clic()" onmouseover="setClass('deuxieme','show')" onmouseout="quitClass('deuxieme','hidden')"><img src='images/maquette/bouton-menu.png' alt='bouton' title='profile'/></a></li>
<li><a id="bouton_third" class="troisieme" href='#galerie' onclick="clic()" onmouseover="setClass('troisieme','show')" onmouseout="quitClass('troisieme','hidden')"><img src='images/maquette/bouton-menu.png' alt='bouton' title='gallery'/></a></li>
<li><a id="bouton_fourth" class="quatrieme" href='#contact' onclick="clic()" onmouseover="setClass('quatrieme','show')" onmouseout="quitClass('quatrieme','hidden')"><img src='images/maquette/bouton-menu.png' alt='bouton' title='contact'/></a></li>
</ul>
<div id="text_menu">
<p class="text_menu_elements" id="premier">HOME</p>
<p class="text_menu_elements" id="deuxieme">PROFILE</p>
<p class="text_menu_elements" id="troisieme">GALLERY</p>
<p class="text_menu_elements" id="quatrieme">CONTACT</p>
</div>
</div> <!--menu-->
<div id="profil">
<img src="images/maquette/profil.png" alt="profil" title="" />
</div> <!--profil-->
<div id="galerie"> <!-- galerie photo -->
<ul id="photos">
<li>
<a class="ima" rel="gal" href="images/galerie/600/affiche_zoo.jpg" title="Affiche zoo, contrainte: Animaux en forme de lettres">
<img src="images/galerie/200/affiche_zoo.jpg" width="150" height="150" alt="" />
</a>
</li>
<li>
<a class="ima" rel="gal" href="images/galerie/600/apfel.jpg" title="Apfel">
<img src="images/galerie/200/apfel.jpg" width="150" height="150" alt="" />
</a>
</li>
<li>
<a class="ima" rel="gal" href="images/galerie/600/dame_du_lac.jpg" title="La Dame du Lac">
<img src="images/galerie/200/dame_du_lac.jpg" width="150" height="150" alt="" />
</a>
</li>
<li>
<a class="ima" rel="gal" href="images/galerie/600/fin_du_monde.jpg" title="2012">
<img src="images/galerie/200/fin_du_monde.jpg" width="150" height="150" alt="" />
</a>
</li>
<li>
<a class="ima" rel="gal" href="images/galerie/600/marz_empli.jpg" title="Get yours!">
<img src="images/galerie/200/marz_Empli.jpg" width="150" height="150" alt="" />
</a>
</li>
<li>
<a class="ima" rel="gal" href="images/galerie/600/marz_space.jpg" title="They're coming">
<img src="images/galerie/200/marz_Space.jpg" width="150" height="150" alt="" />
</a>
</li>
<li>
<a class="ima" rel="gal" href="images/galerie/600/passerelle.jpg" title="Passerelle inconnue vers l'infini">
<img src="images/galerie/200/passerelle.jpg" width="150" height="150" alt="" />
</a>
</li>
<li>
<a class="ima" rel="gal" href="images/galerie/600/perspective.jpg" title="Perspective d'avenir">
<img src="images/galerie/200/perspective.jpg" width="150" height="150" alt="" />
</a>
</li>
<li>
<a class="ima" rel="gal" href="images/galerie/600/smokeman.jpg" title="The Smokeman">
<img src="images/galerie/200/smokeman.jpg" width="150" height="150" alt="" />
</a>
</li>
<li>
<a class="ima" rel="gal" href="images/galerie/600/sous_la_capuche.jpg" title="Sous la capuche">
<img src="images/galerie/200/sous_la_capuche.jpg" width="150" height="150" alt="" />
</a>
</li>
<li>
<a class="ima" rel="gal" href="images/galerie/600/tableau1.jpg" title="untitled">
<img src="images/galerie/200/tableau1.jpg" width="150" height="150" alt="" />
</a>
</li>
<li>
<a class="ima" rel="gal" href="images/galerie/600/tableau2.jpg" title="untitled">
<img src="images/galerie/200/tableau2.jpg" width="150" height="150" alt="" />
</a>
</li>
<li>
<a class="ima" rel="gal" href="images/galerie/600/white_lightning.jpg" title="Détournement poster: T'aimes la disco?">
<img src="images/galerie/200/white_lightning.jpg" width="150" height="150" alt="" />
</a>
</li>
</ul> <!-- fin liste des photos -->
</div> <!-- galerie photo-->
<div id="contact">
<form method="post" action="thanks.php">
--<p>
<label for="name" id="label_name"><img src='images/maquette/name.png' alt='name' /></label>
<input id="input_name" type="text" name="name" id="name" />
</p>
<p>
<label for="email" id="label_mail"><img src='images/maquette/mail.png' alt='mail' /></label>
<input id="input_mail" type="text" name="email" id="email" />
</p>
<p>
<label for="message" id="label_message"><img src='images/maquette/message.png' alt='message' /></label>
<div id="input_message_bg">
<textarea id="input_message" cols="8" rows="18" name="message"></textarea>
</div>
</p>
<p>
<input type="submit" id="send" name="send" value="" />
</p>
</form>
</div> <!-- div contact-->
</div> <!-- contener -->
</body>[/i]et le code javascript
$(document).ready(function() {
$.localScroll();
$.fancybox.showActivity;
$('#galerie a').fancybox({
'titlePosition':'inside'
});
$("a[rel=gal]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
$("a.ima").fancybox({
'titlePosition':'inside',
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 600,
'speedOut' : 600,
'overlayColor' : "#000000",
'padding' : '10',
'margin' : '0',
'scrolling' : 'no'
});
$(".text_menu_elements").addClass("hidden");
});
function setClass(elementId,claz){
var nouveau = document.getElementById(elementId);
$(nouveau).removeClass("hidden").addClass(claz);
}
function quitClass(element,clas){
var nouv = document.getElementById(element);
$(nouv).removeClass('show').addClass(clas);
}
var clicAutorise = true;
function clic(){
if (clicAutorise){
$("#menu ul a").disabled="disabled";
}
clicAutorise = false;
}Merci beaucoup d'avance !!
, et j'ai déjà essayé les deux, c'est surement une erreur de placement où de reconnaissance... j'ai essayé de le placer dans le fichier lancement.js de la fonction localscroll, et dans mon fichier perso (onglet.js) ...