xxxxxxxxxx
1
<div class="container col-4 mt-5">
2
<div class="row">
3
<div class="col-md-12">
4
<div id="mdb-lightbox-ui"></div>
5
<div class="mdb-lightbox no-margin">
6
7
<figure class="col-md-4">
8
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg" data-size="1600x1067">
9
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(117).jpg" class="img-fluid">
10
</a>
11
</figure>
12
13
<figure class="col-md-4">
14
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).jpg" data-size="1600x1067">
15
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(98).jpg" class="img-fluid" />
16
</a>
17
</figure>
18
19
<figure class="col-md-4">
20
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).jpg" data-size="1600x1067">
21
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(131).jpg" class="img-fluid" />
22
</a>
23
</figure>
24
25
<figure class="col-md-4">
26
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).jpg" data-size="1600x1067">
27
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(123).jpg" class="img-fluid" />
28
</a>
29
</figure>
30
31
<figure class="col-md-4">
32
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).jpg" data-size="1600x1067">
33
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(118).jpg" class="img-fluid" />
34
</a>
35
</figure>
36
37
<figure class="col-md-4">
38
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).jpg" data-size="1600x1067">
39
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(128).jpg" class="img-fluid" />
40
</a>
41
</figure>
42
43
</div>
44
</div>
45
</div>
46
</div>
47
48
1
1
xxxxxxxxxx
1
// MDB Lightbox Init
2
$(function () {
3
$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
4
});
Console errors: 0