Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.
<!--
CAPTION POSITION CLASSES:
.owl-caption-top-left
.owl-caption-top-right
.owl-caption-bottom-left
.owl-caption-bottom-right
.owl-caption-top-center
.owl-caption-bottom-center
.owl-caption-text-light (already light text by default - not required)
.owl-caption-text-dark
data-plugin-options:
"responsiveBaseElement":"#wrapper" (you can set "body" or the container. Default: #wrapper)
"loop":true (false for no loop)
"margin":10 (magin between items in pixels. Default: 10)
"nav":true (show or hide navigation)
"center":false (true = align to center)
"slideBy":"1" (no. of items to slide once. Default: 1)
"dots":true (false to hide dots navigation)
"autoplay":false (true to enable autoplay)
"autoplayTimeout":2000 (autoplay delay in milliseconds. Default: 2000)
"responsive":{"0":{"items":1},"600":{"items":2},"1000":{"items":3}}
Show No. of elements according to resolution:
0 = mobile
600 = table
1000 = desktop
You can change/remove the values according to your resolution preferences (default: 0, 600, 1000)
ANIMATION - based on animate css plugin (already included in essentials.css)
required: items should be set to 1 (see responsive)
https://daneden.github.io/animate.css/
"animateIn":"bounceIn"
"animateOut":"bounceOut"
The full API can be found here:
http://www.owlcarousel.owlgraphic.com/docs/api-options.html
-->
<div class="lightbox" data-plugin-options='{"delegate": "a", "gallery": {"enabled": true}}'>
<div class="owl-carousel-2 owl-centered-focus" data-plugin-options='{
"responsiveBaseElement": "#wrapper",
"loop": true,
"margin": 0,
"nav": true,
"dots": false,
"center": true,
"slideBy": "1",
"autoplay": true,
"autoplayTimeout": 4500,
"autoWidth": false,
"merge": true,
"rtl": false,
"animateIn": "flipInX",
"animateOut": "flipOutX",
"responsive": {
"0": {"items":1},
"600": {"items":2},
"1000": {"items":2}
}
}'>
<a href="demo_files/images/packs/realestate/gallery-item/2-min.jpg" class="image-hover-plus image-hover-overlay">
<i class="icon-hover-plus"></i>
<img class="img-responsive" src="demo_files/images/packs/realestate/gallery-item/2-min.jpg" alt="">
</a>
<a href="demo_files/images/packs/realestate/gallery-item/6-min.jpg" class="image-hover-plus image-hover-overlay">
<i class="icon-hover-plus"></i>
<img class="img-responsive" src="demo_files/images/packs/realestate/gallery-item/6-min.jpg" alt="">
</a>
<a href="demo_files/images/packs/realestate/gallery-item/5-min.jpg" class="image-hover-plus image-hover-overlay">
<i class="icon-hover-plus"></i>
<img class="img-responsive" src="demo_files/images/packs/realestate/gallery-item/5-min.jpg" alt="">
</a>
<a href="demo_files/images/packs/realestate/gallery-item/3-min.jpg" class="image-hover-plus image-hover-overlay">
<i class="icon-hover-plus"></i>
<img class="img-responsive" src="demo_files/images/packs/realestate/gallery-item/3-min.jpg" alt="">
</a>
</div>
</div>
<!--
CAPTION POSITION CLASSES:
.owl-caption-top-left
.owl-caption-top-right
.owl-caption-bottom-left
.owl-caption-bottom-right
.owl-caption-top-center
.owl-caption-bottom-center
.owl-caption-text-light (already light text by default - not required)
.owl-caption-text-dark
data-plugin-options:
"responsiveBaseElement":"#wrapper" (you can set "body" or the container. Default: #wrapper)
"loop":true (false for no loop)
"margin":10 (magin between items in pixels. Default: 10)
"nav":true (show or hide navigation)
"center":false (true = align to center)
"slideBy":"1" (no. of items to slide once. Default: 1)
"dots":true (false to hide dots navigation)
"autoplay":false (true to enable autoplay)
"autoplayTimeout":2000 (autoplay delay in milliseconds. Default: 2000)
"responsive":{"0":{"items":1},"600":{"items":2},"1000":{"items":3}}
Show No. of elements according to resolution:
0 = mobile
600 = table
1000 = desktop
You can change/remove the values according to your resolution preferences (default: 0, 600, 1000)
ANIMATION - based on animate css plugin (already included in essentials.css)
required: items should be set to 1 (see responsive)
https://daneden.github.io/animate.css/
"animateIn":"bounceIn"
"animateOut":"bounceOut"
The full API can be found here:
http://www.owlcarousel.owlgraphic.com/docs/api-options.html
-->
<div class="owl-carousel-2 controlls-over clearfix" data-plugin-options='{
"responsiveBaseElement": "#middle",
"loop": true,
"margin": 10,
"nav": false,
"dots": true,
"center": false,
"slideBy": "1",
"autoplay": true,
"autoplayTimeout": 2500,
"autoWidth": false,
"merge": false,
"rtl": false,
"animateIn": "flipInX",
"animateOut": "flipOutX",
"responsive": {
"0": {"items":1},
"600": {"items":1},
"1000": {"items":1}
}
}'>
<div class="owl-item">
<span class="owl-caption-bottom-center"><!-- caption -->
Owl carousel - optional caption 1
<span class="owl-subtitle">Caption optional subtitle</span>
</span><!-- /caption -->
<img class="img-responsive" src="demo_files/images/1200x800/8-min.jpg" alt="">
</div>
<div class="owl-item">
<span class="owl-caption-bottom-left"><!-- caption -->
Owl carousel - optional caption 2
<span class="owl-subtitle">Caption optional subtitle</span>
</span><!-- /caption -->
<img class="img-responsive" src="demo_files/images/1200x800/9-min.jpg" alt="">
</div>
<div class="owl-item">
<span class="owl-caption-bottom-right"><!-- caption -->
Owl carousel - optional caption 3
<span class="owl-subtitle">Caption optional subtitle</span>
</span><!-- /caption -->
<img class="img-responsive" src="demo_files/images/1200x800/10-min.jpg" alt="">
</div>
</div>
<!--
CAPTION POSITION CLASSES:
.owl-caption-top-left
.owl-caption-top-right
.owl-caption-bottom-left
.owl-caption-bottom-right
.owl-caption-top-center
.owl-caption-bottom-center
.owl-caption-text-light (already light text by default - not required)
.owl-caption-text-dark
data-plugin-options:
"responsiveBaseElement":"#wrapper" (you can set "body" or the container. Default: #wrapper)
"loop":true (false for no loop)
"margin":10 (magin between items in pixels. Default: 10)
"nav":true (show or hide navigation)
"center":false (true = align to center)
"slideBy":"1" (no. of items to slide once. Default: 1)
"dots":true (false to hide dots navigation)
"autoplay":false (true to enable autoplay)
"autoplayTimeout":2000 (autoplay delay in milliseconds. Default: 2000)
"responsive":{"0":{"items":1},"600":{"items":2},"1000":{"items":3}}
Show No. of elements according to resolution:
0 = mobile
600 = table
1000 = desktop
You can change/remove the values according to your resolution preferences (default: 0, 600, 1000)
ANIMATION - based on animate css plugin (already included in essentials.css)
required: items should be set to 1 (see responsive)
https://daneden.github.io/animate.css/
"animateIn":"bounceIn"
"animateOut":"bounceOut"
The full API can be found here:
http://www.owlcarousel.owlgraphic.com/docs/api-options.html
-->
<div class="owl-carousel-2 controlls-over clearfix" data-plugin-options='{
"responsiveBaseElement": "#middle",
"loop": true,
"margin": 10,
"nav": false,
"dots": true,
"center": false,
"slideBy": "1",
"autoplay": true,
"autoplayTimeout": 2500,
"autoWidth": false,
"merge": false,
"rtl": false,
"animateIn": "flipInX",
"animateOut": "flipOutX",
"responsive": {
"0": {"items":1},
"600": {"items":1},
"1000": {"items":1}
}
}'>
<div class="owl-item">
<img class="img-responsive" src="demo_files/images/1200x800/8-min.jpg" alt="">
</div>
<div class="owl-item">
<img class="img-responsive" src="demo_files/images/1200x800/9-min.jpg" alt="">
</div>
<div class="owl-item">
<img class="img-responsive" src="demo_files/images/1200x800/10-min.jpg" alt="">
</div>
</div>
<!--
CAPTION POSITION CLASSES:
.owl-caption-top-left
.owl-caption-top-right
.owl-caption-bottom-left
.owl-caption-bottom-right
.owl-caption-top-center
.owl-caption-bottom-center
.owl-caption-text-light (already light text by default - not required)
.owl-caption-text-dark
data-plugin-options:
"responsiveBaseElement":"#wrapper" (you can set "body" or the container. Default: #wrapper)
"loop":true (false for no loop)
"margin":10 (magin between items in pixels. Default: 10)
"nav":true (show or hide navigation)
"center":false (true = align to center)
"slideBy":"1" (no. of items to slide once. Default: 1)
"dots":true (false to hide dots navigation)
"autoplay":false (true to enable autoplay)
"autoplayTimeout":2000 (autoplay delay in milliseconds. Default: 2000)
"responsive":{"0":{"items":1},"600":{"items":2},"1000":{"items":3}}
Show No. of elements according to resolution:
0 = mobile
600 = table
1000 = desktop
You can change/remove the values according to your resolution preferences (default: 0, 600, 1000)
ANIMATION - based on animate css plugin (already included in essentials.css)
required: items should be set to 1 (see responsive)
https://daneden.github.io/animate.css/
"animateIn":"bounceIn"
"animateOut":"bounceOut"
The full API can be found here:
http://www.owlcarousel.owlgraphic.com/docs/api-options.html
-->
<div class="owl-carousel-2 clearfix" data-plugin-options='{
"responsiveBaseElement": "#middle",
"loop": true,
"margin": 10,
"nav": false,
"dots": false,
"center": false,
"slideBy": "1",
"autoplay": true,
"autoplayTimeout": 3500,
"autoWidth": false,
"merge": false,
"rtl": false,
"animateIn": "flipInX",
"animateOut": "flipOutX",
"responsive": {
"0": {"items":4},
"600": {"items":4},
"1000": {"items":4}
}
}'>
<a class="img-hover" href="#">
<img class="img-responsive" src="demo_files/images/451x300/4-min.jpg" alt="">
</a>
<a class="img-hover" href="#">
<img class="img-responsive" src="demo_files/images/451x300/6-min.jpg" alt="">
</a>
<a class="img-hover" href="#">
<img class="img-responsive" src="demo_files/images/451x300/19-min.jpg" alt="">
</a>
<a class="img-hover" href="#">
<img class="img-responsive" src="demo_files/images/451x300/22-min.jpg" alt="">
</a>
<a class="img-hover" href="#">
<img class="img-responsive" src="demo_files/images/451x300/3-min.jpg" alt="">
</a>
<a class="img-hover" href="#">
<img class="img-responsive" src="demo_files/images/451x300/17-min.jpg" alt="">
</a>
<a class="img-hover" href="#">
<img class="img-responsive" src="demo_files/images/451x300/18-min.jpg" alt="">
</a>
<a class="img-hover" href="#">
<img class="img-responsive" src="demo_files/images/451x300/20-min.jpg" alt="">
</a>
</div>
<div class="thumbnail margin-bottom-8 radius-0"> <!-- IMAGE ZOOM data-mode="mouseover|grab|click|toggle" --> <figure id="zoom-primary" class="zoom" data-mode="mouseover"> <!-- zoom buttton positions available: .bottom-right .bottom-left .top-right .top-left --> <a class="lightbox bottom-right" href="demo_files/images/mockups/1200x800/9-min.jpg" data-plugin-options='{"type":"image"}'> <i class="fa fa-search"></i> </a> <!-- image Extra: add .image-bw class to force black and white! --> <img class="img-fluid image-bw" src="demo_files/images/mockups/1200x800/9-min.jpg" width="568" alt="" /> </figure> </div> <!-- Thumbnails (required height:100px) data-for = figure image id match NOTE: loop wil cause an issue to zoom plugin! DO NOT use loop! --> <div data-for="zoom-primary" class="owl-carousel-2 zoom-more" data-plugin-options='{ "responsiveBaseElement": "#wrapper", "loop": false, "margin": 8, "nav": true, "dots": false, "center": false, "slideBy": "1", "autoplay": false, "autoplayTimeout": 4500, "autoWidth": false, "merge": true, "rtl": false, "animateIn": "", "animateOut": "", "responsive": { "0": {"items":3}, "960": {"items":5} } }'> <a class="thumbnail radius-0 active" href="demo_files/images/mockups/1200x800/9-min.jpg"> <img class="img-fluid padding-3" src="demo_files/images/mockups/150x100/9-min.jpg" height="100" alt="" /> </a> <a class="thumbnail radius-0" href="demo_files/images/mockups/1200x800/11-min.jpg"> <img class="img-fluid padding-3" src="demo_files/images/mockups/150x100/11-min.jpg" height="100" alt="" /> </a> <a class="thumbnail radius-0" href="demo_files/images/mockups/1200x800/12-min.jpg"> <img class="img-fluid padding-3" src="demo_files/images/mockups/150x100/12-min.jpg" height="100" alt="" /> </a> <a class="thumbnail radius-0" href="demo_files/images/mockups/1200x800/13-min.jpg"> <img class="img-fluid padding-3" src="demo_files/images/mockups/150x100/13-min.jpg" height="100" alt="" /> </a> <a class="thumbnail radius-0" href="demo_files/images/mockups/1200x800/14-min.jpg"> <img class="img-fluid padding-3" src="demo_files/images/mockups/150x100/14-min.jpg" height="100" alt="" /> </a> <a class="thumbnail radius-0" href="demo_files/images/mockups/1200x800/15-min.jpg"> <img class="img-fluid padding-3" src="demo_files/images/mockups/150x100/15-min.jpg" height="100" alt="" /> </a> <a class="thumbnail radius-0" href="demo_files/images/mockups/1200x800/16-min.jpg"> <img class="img-fluid padding-3" src="demo_files/images/mockups/150x100/16-min.jpg" height="100" alt="" /> </a> </div> <!-- /Thumbnails -->