Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
Fancybox

Fancybox

Beispiel wie man Fancybox benutzen kann

Der hier verwendete 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>