Fragmentation URL et carousel bootstrap /renvoi d'une page vers un point précis (img ) d'une autre page
Bonjour,
j'ai réalisé un carousel (bootstrap) avec départ aléatoire (Jquery) sur ma page "index".
Sur l'exemple que je joint il y a 3 images (appelées planches)
Chaque image (planche n°x) de ce carousel est cliquable et ouvre sur une page particulière ("détail_x").
L'idée est que lorsque l'on ferme la page "détail_x" grâce à un "closer", en fait une "nav", on revienne sur sur la page index et sur la "planche x" exactement.
J'ai utilisé des fragments d'Url: #p1 pour la planche n°1 sur la page "index" et href= index.html#p1 sur la page "détail_x"
Le renvoi d'une page à l'autre se fait bien mais c'est complètement désordonné.
L'aléatoire de départ du carousel géré par Jquery n'est pas en cause, je l'ai désactivé pour mes essais.
J'espère que quelqu'un saura m'aider
ci-dessous la page "index":
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
<!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">
<div class="maxcontainer">
<header class="header" >
<span class="text-muted">
<a class="nav-link headinline" href="index.html">
<p style="font-size: 1.4em; line-height: 10px;color: black; margin-right: 10px;"> Arnaud Fromont </p>
<p style="line-height: 10px;letter-spacing : 2px;color: black; ">visuaus</p>
</a>
</span>
</header>
<!--grand container-->
<div class="container ">
<div class="flex-container">
<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 id="carouselExampleControls" class="carousel" data-ride="carousel" data-interval="false">
<div class="carousel-inner ">
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span id="mesicons">></span>
<span class="sr-only">Next</span>
</a>
<div class="carousel-item active ">
<div >
<a id="p1" href="details_1.html">
<img class="d-block w-100" src="img/planche1/planche1.png">
</a>
</div>
</div>
<div class="carousel-item">
<div >
<a id="p2" href="details_2.html">
<img class="d-block w-100" src="img/planche2/planche2.png">
</a>
</div>
</div>
<div class="carousel-item">
<div >
<a id="p3" href="details_3.html">
<img class="d-block w-100" src="img/planche3/planche3.png">
</a>
</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>
</div>
</div>
</div>
</div>
<footer class="footer">
<span class="text-muted">
<a style="line-height: 10px;letter-spacing : 2px;" class="nav-link" href="contact.html">contact</a>
</span>
</footer>
</div>
<!-- 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> |
ci-dessous une page "détail_x"
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<!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="author" content="Arnaud Fromont">
<title><af.v-details1"></af></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<body background="img/fondweb.jpg" "></body>
<div class="closelb" >
<a class="nav-link active" href="index.html#p1">
<p>x</p>
</a>
</div>
<div class="containerlb">
<div id="carouselExampleControls" class="carousel carlb" data-ride="carousel" data-interval="false">
<div class="carousel-inner innerlb">
<a id="nextlb" class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next" >
<span id="mesicons">></span>
<span class="sr-only">Next</span>
</a>
<div class="carousel-item active">
<div class="flex-containerlb">
<div class="myfigcaptionlb">
<p>jorns benesits</p>
<p>peinture</p>
<p>marseille 1999</p>
</div>
<div class="carrelb">
<img class="d-block w-100 imglb" src="img/planche1/jorns_benesits.jpg" alt="Arnaud Fromont , jorns benesits" >
</div>
</div>
</div>
<div class="carousel-item">
<div class="flex-containerlb">
<div class="myfigcaptionlb">
<p>désolation camargue </p>
<p>photo</p>
<p>marseille 2019</p>
</div>
<div class="carrelb">
<img class="d-block w-100 imglb" src="img/planche7/paret_mahakala.jpg" alt="Arnaud Fromont , désolation camargue">
</div>
</div>
</div>
<a id="prevlb" class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev" >
<span id="mesicons" ><</span>
<span class="sr-only">Previous</span>
</a>
</div>
</div>
</div>
<!-- script-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script$('.carousel').carousel()></script>
</body>
</html> |
