Discussion :

[Lea_o]

Bonjour !

Voilà, je débute à peine avec l'HTML et le CSS que je me retrouve déjà coincée T_T
Je souhaite utiliser ce slider déjà intégralement codé sur une page d'accueil en local :
https://www.jqueryscript.net/slidesh...oomslider.html
https://www.jqueryscript.net/demo/jQ...ct-zoomslider/

Sauf que je veux afficher ce slider en fullscreen et pour que ça fonctionne, je n'ai pas trouvé d'autre solution que de mettre un :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

* {height:100%;}

Le slider s'affiche bien en fullscreen, le souci c'est que les boutons de contrôle ne sont plus du tout fonctionnels, il ne se passe plus rien au clic dessus...

Première question :
Existe-t'il une autre façon, disons une façon p-e plus propre en CSS, d'afficher le slider en fullscreen (et p-e que cette solution là ne ferait pas buguer les boutons) ?
J'ai essayé de mette des height:100% un peu partout, sans succès et sans comprendre pourquoi ça ne fonctionnait pas (p-e dû aux positionnements absolute / relative des div ? ...)

Seconde question :
Prquoi les boutons ne sont-ils plus fonctionnels ? Y-a-t'il un souci au niveau du CSS, du jQuery ?
Si c'est dû au jQuery (que je ne maîtrise pas du tout !), j'irai poster ma seconde question dans le forum adéquat.

Par avance, merci pour votre aide !

HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div id="global">
			<div id="demo-1" data-zs-src='["photos/8266426033_c8c830e351_h.jpg", "photos/8266429353_d07ce461b6_h.jpg", "photos/8270243344_9162d815d3_h.jpg", "photos/Ummah-Wide.jpeg"]' data-zs-overlay="dots">
				<div class="demo-inner-content">
					<!--<p>ZoomSlider creates slideshows with zoom effect using background-image and CSS3.</p>-->
				</div>
			</div>
		</div>

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
* { margin: 0px; padding: 0px; height:100%;}
 
			html {
				height: 100%;
			}
 
			body {
				margin: 0px; padding: 0px;
				height: 100%;
				background-color:pink; }
 
			#global {
				width: 100%;
				min-height: 100%;
				margin: auto;
				background-color:#F8F8FF; }

EDIT : Je viens de me rendre compte que j'ai posté au mauvais endroit, désolée !
Si qq'un pouvait le déplacer dans la section dédiée au CSS, merci.

[psychadelic]

Sauf que je veux afficher ce slider en fullscreen

Et pour les problèmes de dimensionnement des images ?
_ soit déformation,
_ soit troncature latérale ou verticale, *
selon la dimension de la fenêtre qui change forcément..

[Lea_o]

Je ne comprends pas bien ton questionnement, psychadelic...
J'ai testé sur plusieurs devices en local, dont TV, et je n'ai noté aucun souci d'affichage des images...

Je marque en résolu, je vais reposter dans la section adéquate.

[psychadelic]

Bon, je pose la question autrement :

les images sont de dimensions fixes en largeur et en hauteur. alors que les fenêtres peuvent avoir des dimensions forcément différentes qui peuvent être changées dynamiquement.

Alors pour que l'image soit affichée sur la totalité de ta fenêtre elles sera forcément soit étirée, ou réduite, et déformée ou tronqué en hauteur ou en largeur...

c'est le ma question, quelles options choisi-tu ?

sinon, il faut mettre tes images en background pour que les boutons puissent devenir opérationnels, soit en passant par z-index::, soit en par background-image: , à tester bien sur

[Lea_o]

Bonjour !

Merci psychadelic d'avoir clarifié ce que je ne comprenais pas
Alors, pour te répondre, il me semble, au vu de la manière dont ça fonctionne, que le script étire et réduit les images en fonction du redimensionnement de la fenêtre (ce n'est pas moi qui l'ai codé, je n'en suis pas encore à apprendre le javascript).

Sinon, les boutons étaient déjà mis en background et là, j'ai réussi à les refaire fonctionner en modifiant la position qui étaient en relative, je l'ai passé en absolute et ça fonctionne, mais je ne comprends pas pourquoi... Il fait dire que je ne saisis pas encore très bien la différence entre ces deux positionnements Faut que je me renseigne là-dessus ^^
Et après avoir lu ta réponse, j'ai tenté de modifier le z-index aussi et ça a fonctionné tout en restant en position relative
Bon là aussi, faut que je cherche un peu pour comprendre prquoi

En tout cas, merci beaucoup !