Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1934 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Pb hero slide jquery images

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Pb hero slide jquery images

n°2003856
titinho-sa​n
Posté le 22-06-2010 à 19:31:45  profilanswer
 

VOici mon code

Spoiler :


<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollto.js"></script>
<script type="text/javascript">
$(document).ready(function () {
 
 $('#hero-slider ul a').click(function () {
 
  //reset all the items
  $('.customBlock ul a').removeClass('active');
   
  //set current item as active
  $(this).addClass('active');  
   
  //scroll it to the right position
  $('.mask').scrollTo($(this).attr('rel'), 300);
   
  //disable click event
     return false;  
   
 });
 
});
</script>
 
#hero-slider {
 text-align:left;
 border:1px solid #ccc;
 width:700px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 margin:0 auto;
 font-family:arial;
}
 
#hero-slider .mask {
 float:left;
 width:550px;
 height:480px;
 margin:15px 0 0 10px;
 overflow:hidden;
}
 
#hero-slider .panel {
 width:550px;
 height:480px;
 text-align:left;
}
 
#hero-slider ul {
 margin:0;
 padding:15px 15px 0 15px;
 list-style:none;
 float:left;
 border-right:1px solid #dedede;
 height:480px;
}
 
#hero-slider ul li {
 margin:10px 0;
}
 
#hero-slider ul a {
 outline:none;  
 text-decoration: underline;
 display:block;
 width:75px;  
 height:74px;  
 text-indent:-999em;  
}
 
#hero-slider a {
 background: url(button.png) no-repeat 0 0;
}
 
#hero-slider ul a.active {
 background-position: -75px;
}
 
.panel h2 {
 padding:15px 0 0 0;
 color:#F90;
}
 
.panel p {
 color:#666;
}
 
.clear {clear:both}
 
 
 
<div id="hero-slider">
  <ul>
   <li><a href="#" rel="#panel-1" class="active">Item 1</a></li>
   <li><a href="#" rel="#panel-2">Item 2</a></li>
   <li><a href="#" rel="#panel-3">Item 3</a></li>
            <li><a href="#" rel="#panel-4">Item 3</a></li>
            <li><a href="#" rel="#panel-5">Item 3</a></li>
  </ul>
  <div class="mask">
   <div class="slider-body">
    <div class="panel" id="panel-1">
     <h2>A propos de moi</h2>
     <p>Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. In condimentum orci id nisl volutpat bibendum. </p>
    </div>
    <div class="panel" id="panel-2">
     <h2>Expériences Profesionnelle</h2>
     <p>Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. </p>
    </div>
    <div class="panel" id="panel-3">
     <h2>Références</h2>
     <p>Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>
    </div>
                <div class="panel" id="panel-4">
     <h2>Compétences logiciels</h2>
     <p>Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>
    </div>
                <div class="panel" id="panel-5">
     <h2>Partenariat</h2>
     <p>Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>
    </div>
   </div>
  </div> <!-- .mask -->
  <div class="clear"></div>
 </div> <!-- #hero-slider -->
 


 
et donc le problème c'est que à chaque lien j'ai toujours la même image et j'aimerais pouvoir mettre une image différente
peut-on donner une image différente à chaque bloc menu ?
merci

mood
Publicité
Posté le 22-06-2010 à 19:31:45  profilanswer
 

n°2003873
abais
Posté le 22-06-2010 à 21:04:28  profilanswer
 

Je te suggère d'apprendre les bases de l'XHTML // CSS...
Pour te répondre, oui tu peux, vu que tes blocs sont distinctement accessibles depuis ton CSS grâce à leurs id (unique)...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2003876
titinho-sa​n
Posté le 22-06-2010 à 21:09:36  profilanswer
 

ba en faite c'est un id globale pour chacun  
donc si je cré une div pour chaque menu ça peut le faire ?

n°2003882
titinho-sa​n
Posté le 22-06-2010 à 21:14:41  profilanswer
 

ouais ça marche c'est bien ce que je pensais mais je voulais confirmation merci bien

n°2003892
abais
Posté le 22-06-2010 à 21:34:47  profilanswer
 

titinho-san a écrit :

ba en faite c'est un id globale pour chacun


Qu'appeles-tu "id globale" ?
Ce que je te dis, c'est que sans rajouter de div, tu peux deja dans ton css donner un background-image à #panel-1, un autre à #panel-2...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2003981
titinho-sa​n
Posté le 23-06-2010 à 09:09:44  profilanswer
 

oui c'est vrai mais c'est parce que je suis sur dream j'ai des vieux reflexes encore xD
merci bien mais je sais ce que tu vas me redire lol


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Pb hero slide jquery images

 

Sujets relatifs
Générer un mur d'images aléatoires?Aide pour Jquery zoom
insertion des imageschangement dynamique des images java
enregistrement des images dans une JFrame javaPB EXCEL VBA
Style qui disparait (ready, jquery)PB urgent requete multiple SQL
Diapo+Transparence d'imagesPb avec la gestion des cellules...
Plus de sujets relatifs à : Pb hero slide jquery images


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR