Slider plein ecran - besoin d'aide - Forum Javascript / DOM / Ajax

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  Javascript / DOM / Ajax (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Slider plein ecran - besoin d'aide

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Slider plein ecran - besoin d'aide (Lu 1791 fois)

Slider plein ecran - besoin d'aide
« sur: le 07-09-2011 a 11:36:59 »

nico2302
Membre récent

Hors-Ligne

Messages: 9

bonjour à tous,

voici premièrement la page sur laquelle je travaille: http://www.nicolas-gustin.com/www2/bac3_projet_3.html
J'aurais bien voulu faire un diaporama (type slider). Le problème est que l'image doir prendre toute la largeur de la page.

J'ai donc essayer avec ce plug-in jquery: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html
Mais je ne suis jamais arriver à l'intégrer dans ma page. Je n'arrive pas à mettre du contenu en dessous du diaporama.

Je ne sais pas s'il est possible de réaliser ça avec une système de slider traditionnel (exprimé en px) mais de remplacer le nombre de pixel par 100% ?

Merci d'avance pour votre aide

Rapporter au modérateur

Re:Slider plein ecran - besoin d'aide
« Répondre #1 sur: le 07-09-2011 a 17:14:59 »

Pad
Modérateur Global

Hors-Ligne

Sexe: Male

Messages: 1391

Citation de: nico2302 le le 07-09-2011 a 11:36:59
J'ai donc essayer avec ce plug-in jquery: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html
Mais je ne suis jamais arriver à l'intégrer dans ma page. Je n'arrive pas à mettre du contenu en dessous du diaporama.

Ce plugin est justement fait pour faire du plein écran, donc pas possible d'avoir un contenu en dessous de ce système de diaporama, il faudra que le contenu soit par dessus.

Tu peux peut-être essayer avec un système plus classique et en indiquant 100%, après il faudrait bien tester sur des écrans de 22, 24 pouces voir si l'effet fonctionne encore !

Rapporter au modérateur

Webdéveloppeur / Webdesigner Indépendant
http://vincentdapp.fr/
SIRET 517 691 408 00028

Re:Slider plein ecran - besoin d'aide
« Répondre #2 sur: le 10-09-2011 a 19:47:34 »

nico2302
Membre récent

Hors-Ligne

Messages: 9

Bon, j'ai essayer une méthode classique, voici le résultat:
http://www.nicolas-gustin.com/www3/bac3_projet_1.html

Cela fonctionne bien sur des ecran d'une largeur de 1920px, mais pas sur des ecran différents. Je n'arrive pas à donner à l'image une taille de 100%

voici mon code:

Citation:
<div id="container">
   <img id="prev" class="prev" src="style/prev.png"><img id="next" class="next" src="style/next.png">
   <div class="slider">
      <ul>
         <li><img class="slider" src="style/img/bac3_projet_1/nicolas-gustin-market-cover-1.jpg" alt="image 1" width="100%"></li>
         <li><img class="slider" src="style/img/bac3_projet_1/nicolas-gustin-market-cover-2.jpg" alt="image 2" width="100%"></li>
         <li><img class="slider" src="style/img/bac3_projet_1/nicolas-gustin-market-cover-3.jpg" alt="image 3" width="100%"></li>
      </ul>
   </div>
</div>

Citation:
#prev {
   position: absolute;
   width: 43px;
   height: 68px;
   z-index: 1000;
   top: 50%;
   left: 0;
   margin: 0 0 0 7px;
}
#next {
   position: absolute;
   width: 43px;
   height: 68px;
   z-index: 1000;
   top: 50%;
   right: 0;
   margin: 0 7px 0 0;
}
#container {
   width: 100%;
   z-index:15;
   position: relative;
}

voici le plugin jquery : http://www.harryfinn.co.uk/youtube/jslider_tut/jslider.js
J'ai utilisé ce tutorial: http://www.youtube.com/watch?v=gZ9Km3bPte0

Merci d'avance pour votre aide