<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 ---------->
<div id="Gallery">
<div class="gallery-item">
<a href="http://abvichico.com/images/full/Exterior2.jpg"><img src="http://abvichico.com/images/thumb/Exterior2.jpg" alt="Exterior"/></a>
</div>
<div class="gallery-item">
<a href="http://abvichico.com/images/full/Lobby1.jpg"><img src="http://abvichico.com/images/thumb/Lobby1.jpg" alt="Lobby"/></a>
</div>
<div class="gallery-item">
<a href="http://abvichico.com/images/full/Guest%20Room2.jpg"><img src="http://abvichico.com/images/thumb/Guest%20Room2.jpg" alt="Guest Room"/></a>
</div>
<div class="gallery-item">
<a href="http://abvichico.com/images/full/Guest%20Room4.jpg"><img src="http://abvichico.com/images/thumb/Guest%20Room4.jpg" alt="Guest Room"/></a>
</div>
<div class="gallery-item">
<a href="http://abvichico.com/images/full/Guest%20Room6.jpg"><img src="http://abvichico.com/images/thumb/Guest%20Room6.jpg" alt="Guest Room"/></a>
</div>
<div class="gallery-item">
<a href="http://abvichico.com/images/full/Guest%20Room8.jpg"><img src="http://abvichico.com/images/thumb/Guest%20Room8.jpg" alt="Guest Room"/></a>
</div>
<div class="gallery-item">
<a href="http://abvichico.com/images/full/Guest%20Room9.jpg"><img src="http://abvichico.com/images/thumb/Guest%20Room9.jpg" alt="Guest Room"/></a>
</div>
<div class="gallery-item">
<a href="http://abvichico.com/images/full/Guest%20Room5.jpg"><img src="http://abvichico.com/images/thumb/Guest%20Room5.jpg" alt="Guest Room"/></a>
</div>
<div class="gallery-item">
<a href="http://abvichico.com/images/full/Guest%20Bathroom2.jpg"><img src="http://abvichico.com/images/thumb/Guest%20Bathroom2.jpg" alt="Guest Bathroom"/></a>
</div>
<div class="gallery-item">
<a href="http://abvichico.com/images/full/Pool3.jpg"><img src="http://abvichico.com/images/thumb/Pool3.jpg" alt="Pool"/></a>
</div>
</div><!--end #Gallery-->
#Gallery {
margin-top: 30px;
max-width: 1500px;
margin-left: auto;
margin-right: auto;
}
.gallery-item {
float: left;
position: relative;
width: 20%;
padding-bottom: 14%;
}
.gallery-item a {
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
overflow: hidden;
}
.gallery-item a img {
width: 100%;
}
@media only screen and (max-width:480px) {
/* Smartphone view: 1 tile */
.gallery-item {
width: 100%;
padding-bottom: 100%;
}
}
@media only screen and (max-width:650px) and (min-width:481px) {
/* Tablet view: 2 tiles */
.gallery-item {
width: 50%;
padding-bottom: 33.3%;
}
}
@media only screen and (max-width:1050px) and (min-width:651px) {
/* Small desktop / ipad view: 3 tiles */
.gallery-item {
width: 33.3%;
padding-bottom: 23%;
}
}
@media only screen and (max-width:1290px) and (min-width:1051px) {
/* Medium desktop: 4 tiles */
.gallery-item {
width: 25%;
padding-bottom: 17%;
}
}
/* Directly from:
http://photoswipe.com/latest/photoswipe.css
*/
body.ps-active
{
-webkit-text-size-adjust: none;
}
body.ps-active *
{
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
body.ps-active *:focus
{
outline: 0;
}
/* Document overlay */
div.ps-document-overlay
{
background: #000;
}
/* Viewport */
div.ps-viewport
{
background: #000;
cursor: pointer;
}
/* Zoom/pan/rotate layer */
div.ps-zoom-pan-rotate{
background: #000;
}
/* Slider */
div.ps-slider-item-loading
{
background: url(http://abvichico.com/images/photoswipe/photoswipe-loader.gif) no-repeat center center;
}
/* Caption */
div.ps-caption
{
background: #000000;
background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
border-bottom: 1px solid #42403f;
color: #ffffff;
font-size: 13px;
font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif;
text-align: center;
}
div.ps-caption-bottom
{
border-top: 1px solid #42403f;
border-bottom: none;
}
div.ps-caption-content
{
padding: 13px;
}
/* Toolbar */
div.ps-toolbar
{
background: #000000;
background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
border-top: 1px solid #42403f;
color: #ffffff;
font-size: 13px;
font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif;
text-align: center;
height: 44px;
display: table;
table-layout: fixed;
}
div.ps-toolbar-top
{
border-bottom: 1px solid #42403f;
border-top: none;
}
div.ps-toolbar-close, div.ps-toolbar-previous, div.ps-toolbar-next, div.ps-toolbar-play
{
cursor: pointer;
display: table-cell;
}
div.ps-toolbar div div.ps-toolbar-content
{
width: 44px;
height: 44px;
margin: 0 auto 0;
background-image: url(http://abvichico.com/images/photoswipe/photoswipe-icons.png);
background-repeat: no-repeat;
}
div.ps-toolbar-close div.ps-toolbar-content
{
background-position: 0 0;
}
div.ps-toolbar-previous div.ps-toolbar-content
{
background-position: -44px 0;
}
div.ps-toolbar-previous-disabled div.ps-toolbar-content
{
background-position: -44px -44px;
}
div.ps-toolbar-next div.ps-toolbar-content
{
background-position: -132px 0;
}
div.ps-toolbar-next-disabled div.ps-toolbar-content
{
background-position: -132px -44px;
}
div.ps-toolbar-play div.ps-toolbar-content
{
background-position: -88px 0;
}
/* Hi-res retina display */
@media only screen and (-webkit-min-device-pixel-ratio: 2)
{
div.ps-toolbar div div.ps-toolbar-content
{
-webkit-background-size: 176px 88px;
background-image: url(http://abvichico.com/images/photoswipe/photoswipe-icons@2x.png);
}
}
document.addEventListener('DOMContentLoaded', function(){
Code.photoSwipe('a', '#Gallery', { captionAndToolbarHideOnSwipe: false } );
}, false);
/* OTHER GALLERIES
http://codegeekz.com/jquery-image-gallery-plugins/
http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/
http://osvaldas.info/
http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout
*/
