11521 sujets

JavaScript, DOM et API Web HTML5

Galerie photos suivant/précédent sur image en grand

Bonjour à tous,
Pour faire court, je suis débutante en javascript et la je bloque complètement. J'ai réalisé une page web avec une galerie de photo de robes en miniature. Mon css me permet de faire un focus quand je passe la souris sur la miniature et de l'ouvrir quand je clique dessus. Une fois la photo ouverte je veux ajouter des flèches à droite et à gauche de chaque photo pour naviguer de photo en photo sans avoir à retourner sur la galerie. Jusque là j'ai essayé plusieurs solutions que j'ai pu trouver mais les flèches se mettent sur la page galerie où on voit les miniatures. Je pense que mon problème vient du fait que je n'arrive pas à accéder à l'endroit où les photos s'affiche en grand. Je voulais utilisé des fonctions qui permettent de charger une photo, incrémenter de 1 pour la photo suivante et décrémenter de 1 pour la précédente. J’espère que c'est assez clair. Merci par avance de votre aide. Voici mes codes:
html:

<html>
<head>
<link rel="stylesheet" href="../CSS/styleGallerie.css"/>
<link rel="shortcut icon" href="../Img/logo.ico">
<TITLE> Nos Robes/Esma Robes </TITLE>
</HEAD>
<body>
<h1>Esma Robes</h1>
<span style="line-height:-50pt;"/>
<h2>Nos Robes</h2><BR>
<BR>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script src="../js/Rechercher.js"/>
</script>
<div id="Recherher">
  <input class="typeahead" type="text" placeholder="Rechercher" OnKeyPress="if (event.keyCode == 13)recherche()" > <!--OnKeyPress="if (event.keyCode == 13)recherche()" > permet de valider avec la touche entrer du clavier-->
</div>

<input type = 'submit' value = 'Rechercher' id = 'boutonEnvoi' OnClick="recherche()">


<ul class="ulaffiche" >
	<li><div><a href="../Img/M1.jpg"><img src="../Img/M1.jpg" title="La Sposa" id="0">La Sposa</img></a></div></li>
    <li><div><a href="../Img/M2.jpg"><img src="../Img/M2.jpg" title="La Sposa" id="1">La Sposa</img></a></div></li>
	<li><div><a href="../Img/M3.jpg"><img src="../Img/M3.jpg" title="La Sposa" id="2">La Sposa</img></a></div></li>
	<li><div><a href="../Img/M4.jpg"><img src="../Img/M4.jpg" title="Mac Duggal Candlelight" id="3">Mac Duggal Candlelight</img></a></div></li>
	<li><div><a href="../Img/M5.jpg"><img src="../Img/M5.jpg">Mac Duggal Candlelight</img></a></div></li>
	<li><div><a href="../Img/M6.jpg"><img src="../Img/M6.jpg">Princesse Fara</img></a></div></li>
    <li><div><a href="../Img/R1.jpg"><img src="../Img/R1.jpg">Tarik Ediz Corail</img></a></div></li>
    <li><div><a href="../Img/R2.jpg"><img src="../Img/R2.jpg">Stone Bleu</img></a></div></li>
	<li><div><a href="../Img/R3.jpg"><img src="../Img/R3.jpg">Black Crystal</img></a></div></li>
	<li><div><a href="../Img/R4.jpg"><img src="../Img/R4.jpg">Robe Sofia</img></a></div></li>
	<li><div><a href="../Img/R5.jpg"><img src="../Img/R5.jpg">Sherri Hill Emmeraude</img></a></div></li>
	<li><div><a href="../Img/R6.jpg"><img src="../Img/R6.jpg">Inspiration Tarik Ediz Blanche</img></a></div></li>
	<li><div><a href="../Img/R7.jpg"><img src="../Img/R7.jpg">Inspiration Tarik Ediz Blanche</img></a></div></li>
	<li><div><a href="../Img/R8.jpg"><img src="../Img/R8.jpg">Stone Champagne</img></a></div></li>
	<li><div><a href="../Img/R9.jpg"><img src="../Img/R9.jpg">Noire Cap</img></a></div></li>
	<li><div><a href="../Img/R10.jpg"><img src="../Img/R10.jpg">Robe Sana</img></a></div></li>
	<li><div><a href="../Img/R11.jpg"><img src="../Img/R11.jpg">Jovani Bleu Roi</img></a></div></li>
	<li><div><a href="../Img/R12.jpg"><img src="../Img/R12.jpg">Bleu Orient</img></a></div></li>
	<li><div><a href="../Img/R13.jpg"><img src="../Img/R13.jpg">Rouge Orient</img></a></div></li>
	<li><div><a href="../Img/R14.jpg"><img src="../Img/R14.jpg">Chaplin</img></a></div></li>
	<li><div><a href="../Img/R15.jpg"><img src="../Img/R15.jpg">Black Crystal</img></a></div></li>
	<li><div><a href="../Img/R16.jpg"><img src="../Img/R16.jpg">Jovani Jaune</img></a></div></li>
	<li><div><a href="../Img/R17.jpg"><img src="../Img/R17.jpg">Pearl</img></a></div></li>
	<li><div><a href="../Img/R18.jpg"><img src="../Img/R18.jpg">Pearl</img></a></div></li>
	<li><div><a href="../Img/R19.jpg"><img src="../Img/R19.jpg">Inspiration Tarik Ediz Blanche</img></a></div></li>
	<li><div><a href="../Img/R20.jpg"><img src="../Img/R20.jpg">Stone Champagne</img></a></div></li>
	<li><div><a href="../Img/R21.jpg"><img src="../Img/R21.jpg">Tarik Ediz </img></a></div></li>
	<li><div><a href="../Img/R22.jpg"><img src="../Img/R22.jpg">Tarik Ediz Corail</img></a></div></li>
	<li><div><a href="../Img/R23.jpg"><img src="../Img/R23.jpg">Chaplin</img></a></div></li>
	<li><div><a href="../Img/R24.jpg"><img src="../Img/R24.jpg">Robe Sofia</img></a></div></li>
	<li><div><a href="../Img/R25.jpg"><img src="../Img/R25.jpg">Rose Cap</img></a></div></li>
	<li><div><a href="../Img/R26.jpg"><img src="../Img/R26.jpg">Stone Violine</img></a></div></li>
</ul>
 
</body>
<footer>

<nav>
<a href="EsmaRobes.html">Accueil </a>

<a href="tarif.html">Tarifs </a>

<a href="planning.html">Agenda </a>

<a href="contact.html">Me Contacter </a>
</nav>
</footer>
</html>


Le css:
head{
	font-family: Edwardian Script ITC;
	font-size: 10px;
}
h1{
	font-family: Edwardian Script ITC;
	font-size: 80px;
	color: black;
	margin:0;
}

body {
    text-align: center;
	background-image:url("../Img/fondG.jpg");
	background-repeat:no-repeat;
	background-size: cover;
	margin:0;
}
h2{
	font-family: Vladimir Script;
	font-size: 50px;
	text-align: center;
	color: black;
	margin:0;
}
input{
	font-family: Vladimir Script;
	font-size: 35px;
	background:none;
}
a{
	font-family: Vladimir Script;
	font-size: 25px;
	color: black;
	text-decoration: none;
	margin: 0 20px;
}
footer{
	text-align:center;
    position: relative;
    bottom:2em;
    width:100%;
    vertical-align:top;
    font-size:13px;
}

.ulaffiche{
width:1000px; /* largeur du conteneur de la gallerie de photos attention à mettre la valeur de la largeur du nombre de colonnes, sinon les photos ne seront pas centrées dans le conteneur*/
display:block;
padding:30px; /* pour avoir de la place de chaque côté pour faire dépasser le zoom sur les photos du bord */
margin:1em auto 3em auto; /* pour centrer la galerie sur la page ou elle sera */
overflow:auto; /* pour firefox : permet de prendre en compte les élément float pour le dimensionnement du conteneur de la gallerie */
}
.ulaffiche li {
float:left; /* chaque conteneur sera en float, les images se metteront donc côté à côté avec retour à la ligne quand elles arrive au bou */
width:180px; /* largeur de la case qui contient une photo */
height:180px; /* hauteur */
display:block; /* pour enlever les puces de la liste */
overflow:hidden; /* pour IE : permet de superposer sur le reste la div plus grosse lors du zoom */
padding:30px; /* bordure autour des images */

}
*>.ulaffiche li {overflow:visible;} /* pour firefox (propriété invisible pour IE): permet d'afficher la zone de l'image qui dépasse lors du zoom */
.ulaffiche img {
border:0; /* supprime les bordures bleue des liens */
height:300px; /* définit la hauteur des images */
max-height:300px; /* idem mais pour firefox */
}
.ulaffiche li div a img {
float:left; /* positionnement du liens dans la div*/
margin:0 auto 0 auto; /* centre le liens et donc l'image*/
width:160px; /* taille du liens, identique à celle de l'image */
height:160px; /* idem */
}
.ulaffiche li div a img:hover {
position:relative; /* position de la div de zoom */
margin-left:-50px; /* marges pour centrer la div zommé par rapport à l'image non zoomé */
margin-top:-25px; /* idem */
padding:2px; /* cadre autour de la div zoomé */
height:300px; /* taille du zoom */
width:300px; /* idem */
border:0; /* bordure du zoom */
}
.ulaffiche li div a img:hover img {
height:300px; /* défini la hauteur des images zoomées */
max-height:250px; /* idem pour firefox */
}


Et le javascript:

function recherche(){
	var t = document.getElementsByClassName("typeahead")[0].value; //le[0] permet de voir tous les élemnts de la liste (les enfants)
	var tb = document.getElementsByClassName("ulaffiche")[0].children ;
	
	for(i=0; i<tb.length;i++){

	if (tb[i].textContent.toUpperCase().indexOf(t.toUpperCase()) == -1 && t.toUpperCase()!= null && t.toUpperCase() != "" ){
		$(tb[i]).hide();
	}
	else $(tb[i]).show();
	}
};
Bonsoir Nad88,
pour faire le slider que tu désires il faut que tu ouvres tes photos dans une nouvelle page html.

exemple:


	<li><div><a href="sliderrobe.html?larobe=images/M1.jpg&id=1"><img src="images/M1.jpg" title="La Sposa" id="0">La Sposa</img></a></div></li>
        <li><div><a href="sliderrobe.html?larobe=images/M2.jpg&id=2"><img src="images/M2.jpg" title="La Sposa" id="1">La Sposa</img></a></div></li>


Dans cette nouvelle page tu récupères la source en paramètre et tu l'utilises dans un <img>.
En plus de l'image, l'indice identifiant l'image est passé en paramètre pour permettre de gérer le passage d'une photo à l'autre avec des flèches.

Ensuite cette page tu peux l'ouvrir de différentes façon :

exemple pour superposer ce slider à ta page de miniatures tu peux procéder en détournant l'usage de <a> pour alimenter un tag <object>:

Ajoutes dans ta page de miniatures le code ci-dessous:

le container qui contiendra le slider:


    <div id="cadreslider">        
        <button id="fermer" type="button" onclick="fermerSlide();">&cross;</button>
        <object id="monslider" width="400" height="500" data=""></object>
    </div>


le script jQuery qui détourne les <a>:


<script>
        $(".ulaffiche a").click( function(event){
            event.preventDefault();
            $("#monslider").attr("data",$(this).attr("href"));
            $("#cadreslider").css("display","block");
        });
        function fermerSlide() {
            $("#cadreslider").css("display","none");
        }
 </script>


le css :


#cadreslider {
    position: fixed;
    left:calc(50% - 200px);
    top:calc(50% - 250px);
    display: none;
    background-color: rgba(0,0,0,0.5);
}
#fermer {
    float: right;
    border: none;
    background-color: orangered;
}


Bonne nuit,
GJboba
Modifié par GJboba (29 Nov 2017 - 23:55)
Sujet clos
Aller à