Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<meta charset="utf-8">
<title>blueimp Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.css">
<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery-indicator.css">
</head>
<body>
<h1>blueimp Gallery</h1>
<!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>
​
​
<div class="links" id="links">
    <a href="http://farm6.static.flickr.com/5101/13539971585_6c655628e5_b.jpg" title="La finestra" data-gallery="" data-unique-id="tmp_1">
        <img src="http://farm6.static.flickr.com/5101/13539971585_6c655628e5_s.jpg">
    </a>
    <a href="http://farm8.static.flickr.com/7058/13535332874_e1ffe2f14c_b.jpg" title="ONE OF MY FAVORITE PLACES IN NORWAY :)" data-gallery="" data-unique-id="2">
        <img src="http://farm8.static.flickr.com/7058/13535332874_e1ffe2f14c_s.jpg">
    </a>
    <a href="http://farm3.static.flickr.com/2832/13535035223_a31eb2c8a8_b.jpg" title="ghost stories and other urban legends" data-gallery="" data-unique-id="3">
        <img src="http://farm3.static.flickr.com/2832/13535035223_a31eb2c8a8_s.jpg">
    </a>
    <a href="http://farm4.static.flickr.com/3685/13539935244_3540cf2bfe_b.jpg" title="Esa Hora Del da" data-gallery="" data-unique-id="tmp_4">
        <img src="http://farm4.static.flickr.com/3685/13539935244_3540cf2bfe_s.jpg">
    </a>
    <a href="http://farm4.static.flickr.com/3760/13534581825_b32103f379_b.jpg" title="Jalapeo" data-gallery="" data-unique-id="5">
        <img src="http://farm4.static.flickr.com/3760/13534581825_b32103f379_s.jpg">
    </a>
    <a href="http://farm4.static.flickr.com/3705/13541202353_dc22b7de3b_b.jpg" title="Lady in The Flowers" data-gallery="" data-unique-id="tmp_6">
        <img src="http://farm4.static.flickr.com/3705/13541202353_dc22b7de3b_s.jpg">
    </a>
</div>
​
<script src="http://blueimp.github.io/Gallery/js/blueimp-helper.js"></script>
<script src="http://blueimp.github.io/Gallery/js/blueimp-gallery.js"></script>
<script src="http://blueimp.github.io/Gallery/js/blueimp-gallery-fullscreen.js"></script>
<script src="http://blueimp.github.io/Gallery/js/blueimp-gallery-indicator.js"></script>
​
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    blueimp.Gallery(
        document.getElementById('links').getElementsByTagName('a'),
        {
            container: '#blueimp-gallery',
            carousel: true,
            onslide: function (index, slide) {
                // Callback function executed on slide change.
                var $anchor = jQuery(this.list[index]);
                var unique_id = $anchor.data('unique-id');
                console.log('unique-id value is : '  + unique_id);
            }
        }
    );
});
​
</script>
</body> 
</html>
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers