Imprimer la Page

Forum-webmaster

Technique - programmation => Javascript / DOM / Ajax => Message commencé par: nico2302 le le 07-09-2011 a 11:36:59

Titre: Slider plein ecran - besoin d'aide
Posté par: nico2302 le le 07-09-2011 a 11:36:59

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

Titre: Re:Slider plein ecran - besoin d'aide
Posté par: Pad le le 07-09-2011 a 17:14:59

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 !

Titre: Re:Slider plein ecran - besoin d'aide
Posté par: nico2302 le le 10-09-2011 a 19:47:34

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:

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