"r35p0n51v3-g4ll"
Bootstrap 3.3.0 Snippet by okebro

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Responsive Image Gallery</title> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="description" content="Responsive Image Gallery with jQuery" /> <meta name="keywords" content="jquery, carousel, image gallery, slider, responsive, flexible, fluid, resize, css3" /> <meta name="author" content="Codrops" /> <link rel="stylesheet" type="text/css" href="http://rumart.weebly.com/files/theme/demo.css" /> <link rel="stylesheet" type="text/css" href="http://rumart.weebly.com/files/theme/style.css" /> <link rel="stylesheet" type="text/css" href="http://rumart.weebly.com/files/theme/elastislide.css" /> <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' /> <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css' /> <noscript> <style> .es-carousel ul{ display:block; } </style> </noscript> <script id="img-wrapper-tmpl" type="text/x-jquery-tmpl"> <div class="rg-image-wrapper"> {{if itemsCount > 1}} <div class="rg-image-nav"> <a href="#" class="rg-image-nav-prev">Previous Image</a> <a href="#" class="rg-image-nav-next">Next Image</a> </div> {{/if}} <div class="rg-image"></div> <div class="rg-loading"></div> <div class="rg-caption-wrapper"> <div class="rg-caption" style="display:none;"> <p></p> </div> </div> </div> </script> </head> <body> <div class="container"> <div class="header"> <div class="clr"></div> </div><!-- header --> <div class="content"> <div id="rg-gallery" class="rg-gallery"> <div class="rg-thumbs"> <!-- Elastislide Carousel Thumbnail Viewer --> <div class="es-carousel-wrapper"> <div class="es-nav"> <span class="es-nav-prev">Previous</span> <span class="es-nav-next">Next</span> </div> <div class="es-carousel"> <ul> <li><a href="#"><img src="http://rumart.weebly.com/files/theme/001_t.jpg" data-large="http://rumart.weebly.com/files/theme/001.jpg" alt="image01" data-description="Dormitory, Location: Jojoran Surabaya." /></a></li> <li><a href="#"><img src="http://rumart.weebly.com/files/theme/002c_t.jpg" data-large="http://rumart.weebly.com/files/theme/002c.jpg" alt="image02" data-description="Residential, Location: Semolowaru Surabaya." /></a></li> <li><a href="#"><img src="http://rumart.weebly.com/files/theme/003_t.jpg" data-large="http://rumart.weebly.com/files/theme/003.jpg" alt="image03" data-description="Kampung Kids's Resto, Location: Batu Malang." /></a></li> <li><a href="#"><img src="http://rumart.weebly.com/files/theme/004c_t.jpg" data-large="http://rumart.weebly.com/files/theme/004c.jpg" alt="image04" data-description="Pantry, Location: Pakuwon City, Surabaya" /></a></li> <li><a href="#"><img src="http://rumart.weebly.com/files/theme/005_t.jpg" data-large="http://rumart.weebly.com/files/theme/005.jpg" alt="image05" data-description="Pantry, Location: Citraland Surabaya" /></a></li> <li><a href="#"><img src="http://rumart.weebly.com/files/theme/006_t.jpg" data-large="http://rumart.weebly.com/files/theme/006.jpg" alt="image06" data-description="Liiving Room, Location: SDPU Surabaya" /></a></li> <li><a href="#"><img src="http://rumart.weebly.com/files/theme/007_t.jpg" data-large="http://rumart.weebly.com/files/theme/007.jpg" alt="image07" data-description="Food Corner, Location: Kapas Krampung Surabaya" /></a></li> <li><a href="#"><img src="http://rumart.weebly.com/files/theme/008_t.jpg" data-large="http://rumart.weebly.com/files/theme/008.jpg" alt="image08" data-description="Residential, Location: MEER Surabaya" /></a></li> <li><a href="#"><img src="http://rumart.weebly.com/files/theme/009_t.jpg" data-large="http://rumart.weebly.com/files/theme/009.jpg" alt="image09" data-description="Pantry, Location: Citra Garden Surabaya" /></a></li> <li><a href="#"><img src="http://rumart.weebly.com/files/theme/010_t.jpg" data-large="http://rumart.weebly.com/files/theme/010.jpg" alt="image10" data-description="Pantry, Location: Delta Sari Sidoarjo" /></a></li> <li><a href="#"><img src="http://rumart.weebly.com/files/theme/011_t.jpg" data-large="http://rumart.weebly.com/files/theme/011.jpg" alt="image11" data-description="Residential, Location: Mojokerto" /></a></li> </ul> </div> </div> <!-- End Elastislide Carousel Thumbnail Viewer --> </div><!-- rg-thumbs --> </div><!-- rg-gallery --> </div><!-- content --> </div><!-- container --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="http://rumart.weebly.com/files/theme/jquery.tmpl.min.js"></script> <script type="text/javascript" src="http://rumart.weebly.com/files/theme/jquery.easing.1.3.js"></script> <script type="text/javascript" src="http://rumart.weebly.com/files/theme/jquery.elastislide.js"></script> <script type="text/javascript" src="http://rumart.weebly.com/files/theme/gallery.js"></script> <script> $( document ).ready(function() { $.getScript('http://rumart.weebly.com/files/theme/jquery.easing.1.3.js'); }); </script> </body> </html>

Related: See More

Rotating CSS Card

Questions / Comments: