Beispiel wie man Fancybox benutzen kann
Code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
* {
margin: 0;
padding: 0;
}
div#wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
div#wrapper figure img{
width:100%;
}
figure {
width: 30%;
/* flex: 1 auto; */
display: block;
overflow: hidden;
}
img{
width:100%;
}
</style>
</head>
<body>
<div id="wrapper">
<figure>
<img class="bild" src="/image/1.png" alt="bild2" />
<figcaption>
Text Bild 1
</figcaption>
</figure>
<figure>
<img class="bild" src="/image/2.png" alt="bild2" />
<figcaption>
Text Bild 2
</figcaption>
</figure>
<figure>
<img class="bild" src="/image/3.png" alt="bild1" />
<figcaption>
Text Bild 3
</figcaption>
</figure>
<figure>
<img class="bild" src="/image/4.png" alt="bild1" />
<figcaption>
Text Bild 4
</figcaption>
</figure>
<figure>
<img class="bild" src="/image/5.png" alt="bild1" />
<figcaption>
Text Bild 5
</figcaption>
</figure>
<figure>
<img class="bild" src="/image/7.png" alt="bild1" />
<figcaption>
Text Bild 6
</figcaption>
</figure>
<figure>
<img class="bild" src="/image/8.png" alt="bild1" />
<figcaption>
Text Bild 7
</figcaption>
</figure>
<figure>
<img class="bild" src="/image/9.png" alt="bild1" />
<figcaption>
Text Bild 8
</figcaption>
</figure>
<figure>
<img class="bild" src="/image/1.png" alt="bild1" />
<figcaption>
Text Bild 9
</figcaption>
</figure>
</div>
<script src="/js_webseite/jquery.js"></script>
<link rel="stylesheet" href="/css_webseite/jquery.fancybox.min.css" />
<script src="/js_webseite/jquery.fancybox.min.js"></script>
<script>
$("figure img").each(function(idx, item) {
var url = $(this).attr("src");
var caption = $(this).next("figcaption").text();
$(this).wrap('<a></a>');
var atag = $(this).parent();
var caption = atag.next("figcaption").text();
atag.attr({href: url, "data-fancybox": "gallery", "data-caption": caption});
})
</script>
</body>
</html>