Bonjour/bonsoir
Ma page d'accueil est constitué d'un carousel.
Chacune des images de ce carousel est un bouton qui ouvre sur un autre carousel.
Pour cela j'ai utilisé la fonction modal, le modal-body étant un iframe (différent pour chaque image donc)
Si cela fonctionne pour la planche 1, cela ne fonctionne pas pour la 2 et la 3.
De plus, si je clique sur l'image de la planches 2 ou 3, non seulement cela n'ouvre rien mais si j'actionne sur une des flèches de progression du carousel d'accueil, je tombe sur le carousel de l'iframe.
- le lien vers mon site : http://www.arnaudfromont.com
- code html
- code css
Merci d'avance pour votre aide !
Ma page d'accueil est constitué d'un carousel.
Chacune des images de ce carousel est un bouton qui ouvre sur un autre carousel.
Pour cela j'ai utilisé la fonction modal, le modal-body étant un iframe (différent pour chaque image donc)
Si cela fonctionne pour la planche 1, cela ne fonctionne pas pour la 2 et la 3.
De plus, si je clique sur l'image de la planches 2 ou 3, non seulement cela n'ouvre rien mais si j'actionne sur une des flèches de progression du carousel d'accueil, je tombe sur le carousel de l'iframe.
- le lien vers mon site : http://www.arnaudfromont.com
- code html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable =1">
<meta name="description" content=" Planches de présentations de différents travaux d'arts visuels ; graphisme, peinture, photo. ">
<meta name="keywords" content=" Arnaud Fromont, arts visuels, graphisme, peinture, photo, Marseille">
<meta name="author" content="Arnaud Fromont">
<title>af-visuaus</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body background="img/fondweb.jpg">
<header class="header">
<h1 style="font-size: 1.4em; line-height: 10px;margin-left: 24px;"> Arnaud Fromont </h1>
<p style="line-height: 18px; margin-left: 48px;letter-spacing : 5px;">visuaus</p>
</header>
<!--grand container-->
<div class="container ">
<div class="row ">
<!--menu-->
<div class="col-12 col-sm-2 " >
<nav class="nav-flex " >
<a class="nav-link" href="a_propos.html"> à propos </a>
<a class="nav-link" href="#"> </a>
<a class="nav-link active" href="index.html">planches</a>
</nav>
</div>
<!--col-droite-->
<div class="col-12 col-sm-10 ">
<!--carousel-->
<div id="carouselExampleControls" class="carousel row align-items-center" data-ride="carousel" data-interval="false">
<div class="carousel-inner ">
<div class="carousel-item active ">
<div class="row ">
<div class= "col-12 col-sm-2 col-xl-3 align-self-end ">
<div class="myfigcaption"><figcaption> 1</figcaption></div>
</div>
<div class= "col-12 col-sm-10 col-xl-9 " style="text-align: center;" >
<button type="button" class="btn" data-toggle="modal" data-backdrop="false" data-target=".exampleModal">
<img class="d-block w-100" src="img/planche1/planche1.png" alt="Arnaud Fromont, planche 1">
</button>
<div class="modal fade exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" role="dialog" >
<div class="modal-dialog " >
<div class="modal-content" >
<div class="modal-header">
<p class="modal-title exampleModalLabel"></p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body " style="width:100%; height:100%; margin:0; padding:0;border:none; ">
<iframe src="details_1.html" frameborder="0" style="width:100%; height:99%; border:none;min-height: 100vh; "></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item ">
<div class="row ">
<div class= "col-12 col-sm-2 col-xl-3 align-self-end ">
<div class="myfigcaption"><figcaption>2</figcaption></div>
</div>
<div class= "col-12 col-sm-10 col-xl-9 " style="text-align: center;" >
<button type="button" class="btn" data-toggle="modal" data-backdrop="false" data-target=".exampleModal">
<img class="d-block w-100" src="img/planche2/planche2.png" alt="Arnaud Fromont , planche 2">
</button>
<div class="modal fade exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" role="dialog" >
<div class="modal-dialog " >
<div class="modal-content" >
<div class="modal-header">
<p class="modal-title exampleModalLabel"></p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="width:100%; height:100%; margin:0; padding:0;border:none; ">
<iframe src="details_2.html" frameborder="0" style="width:100%; height:99% ; border:none; min-height: 100vh; "></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item ">
<div class="row">
<div class= "col-12 col-sm-2 col-xl-3 align-self-end " >
<div class="myfigcaption"><figcaption>3</figcaption></div>
</div>
<div class= "col-12 col-sm-10 col-xl-9 " style="text-align: center;">
<button type="button" class="btn" data-toggle="modal" data-backdrop="false" data-target="#exampleModal">
<img class="d-block w-100" src="img/planche3/planche3.png" alt="Arnaud Fromont , planche 3">
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" role="dialog" >
<div class="modal-dialog " >
<div class="modal-content" >
<div class="modal-header">
<p class="modal-title exampleModalLabel"></p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="width:100%; height:100%; margin:0; padding:0;border:none; ">
<iframe src="details_1.html" frameborder="0" style="width:100%; height:99%; border:none;min-height: 100vh; "></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span id="mesicons" >< </span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span id="mesicons">></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<span class="text-muted">
<a class="nav-link" href="contact.html">contact</a>
</span>
</footer>
<!-- script-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script$('.carousel').carousel()></script>
<script>
$(document).ready(function(){
var slideNum = $('.carousel-inner .carousel-item').length;
var randomNum = Math.floor(Math.random() * slideNum) + 1;
var randomNumIndex = randomNum - 1;
$('.carousel').carousel( randomNumIndex );
$('.carousel-item').removeClass('transparent');
});
</script>
</body>
</html>- code css
/* planches */
.container {position :relative; margin: auto; max-width: 600px; }
.carousel {min-height: 68vh;margin:auto;}
.myfigcaption { margin-left: 2px; position: relative;margin-bottom: 15px;}
img {height:60vh;object-fit:contain;}
#mesicons{color:black}
.btn {max-width:375px;}
.carousel-control-prev {left:auto; right:26px; height: 30px; width:30px; margin-top: -10px;}
.carousel-control-next {right: -11px; height: 30px; width:30px; margin-top: -10px;}
/* vers lightbox */
.btn {border-radius: 0;border: 3px; border-color:0px; padding:0px;}
.btn:focus {box-shadow:none;}
.modal-header {height : 30px; padding:-1px;border-bottom: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;}
.modal-dialog {width:100%; height:100%; border:none; max-width:inherit;margin:0; background-color: none; overflow: hidden;}
.modal-content {border-radius: 0;border: 0;
background:rgba(100,100,100,0);}
.d-block {float:none;}
.close {font-size: small; }
.exampleModal
.examplemodallabel
/* lightbox */
.containerlb {position :relative;}
.headlb {margin-top: 10px; padding-bottom: 25px;}
.legendlb {padding-top: 6px; line-height: 1px;}
.myfigcaptionlb {text-align: right;margin-right: 10px; }
.carrelb { padding:30px ;}
#prevlb {margin-top:26px; left: 23px;}
#nextlb {margin-top:26px ; left: 58px;}Merci d'avance pour votre aide !