-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
36 lines (36 loc) · 1.64 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Bildzoom Galerie Demo</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bildzoom.js"></script>
<script type="text/javascript">
$ = jQuery;
function bilder_von_flickr(data) {
liste = data.photos.photo;
jQuery(document).ready(function(){
for (var i = 0; i <= liste.length; i++) {
if (typeof liste[i] !== "undefined") {
liste[i].url = liste[i].url_m;
$(".galerie_hier").append('<img src="'+liste[i].url+'" />');
}
}
console.log(liste);
bildzoom_init(".galerie_hier img", liste); // Initialisierung des Plugins
});
}
</script>
<!--Quelle der Beispielbilder-->
<script src="https://api.flickr.com/services/rest/?jsoncallback=bilder_von_flickr&method=flickr.photos.search&text=interessant&format=json&per_page=20&api_key=2b76793b6787a09c14929811d2cef67e&extras=url_m"></script>
</head>
<body>
<h1>Demo für das Bildzoom Plugin</h1>
<a href="https://github.com/Nex4rius/Bildzoom-Galerie">GitHub</a>
<div class="galerie_hier"></div>
</body>
</html>