<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="galleria@1.4.2" data-semver="1.4.2" src="//cdnjs.cloudflare.com/ajax/libs/galleria/1.4.2/galleria.min.js"></script>
<script data-require="galleria@1.4.2" data-semver="1.4.2" src="//cdnjs.cloudflare.com/ajax/libs/galleria/1.4.2/themes/classic/galleria.classic.min.js"></script>
<link data-require="galleria@1.4.2" data-semver="1.4.2" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/galleria/1.4.2/themes/classic/galleria.classic.css" />
<script>
$(document).ready(function() {
Galleria.loadTheme('/js/jquery.galleria.template.js');
Galleria.run('.galleria');
Galleria.ready(function() {
this.bind('image', function(e) {
console.log(e);
// add alt to thumbnail image
e.thumbTarget.alt = e.galleriaData.original.alt;
// add alt to big image
e.imageTarget.alt = e.galleriaData.original.alt;
});
});
});
</script>
</head>
<body>
<div class="galleria">
<img alt="this is a strawberry" src="http://www.figtreeolivebranch.com/wp-content/uploads/2013/12/strawberry-03.jpg" />
<img alt="this is a banana" src="http://upload.wikimedia.org/wikipedia/commons/8/8a/Banana-Single.jpg" />
</div>
</body>
</html>
/* Put your css in here */
h1 {
color: red;
}
.galleria{ width: 700px; height: 400px; background: #000 }
.galleria-errors { display:none; }