"Slider Gallery"
Bootstrap 3.3.0 Snippet by moisea

<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 ----------> <link href="http://rainbowdesign.in/themes/Medini/css/owl.css" rel="stylesheet"> <link href="http://rainbowdesign.in/themes/Medini/css/jquery.fancybox.css" rel="stylesheet"> <section class="gallery-area section-padding"> <div class="container"> <div class="gallery-title centered"> <div class="section-title"> <h2>Our Gallery</h2> </div> <div class="title-text"> <p>Lorem ipsum dolor sit amet, consect etur adipis icing elit. Volupt atum ut alias ullam tempore nobis aspe lorem ipsum.</p> </div> </div> </div> <div class="container-fullid"> <div class="gallery-slider-area"> <div class="single-item-area"> <div class="img-box-area"> <figure><img src="http://rainbowdesign.in/themes/Medini/images/gallery/1.jpg" alt=""></figure> <div class="overlay"> <div class="box"> <div class="content"> <a href="http://rainbowdesign.in/themes/Medini/images/gallery/1-1.jpg" class="lightbox-image"><i class="fa fa-plus" aria-hidden="true"></i></a> <h5>Title Here</h5> </div> </div> </div> </div> </div> <div class="single-item-area"> <div class="img-box-area"> <figure><img src="http://rainbowdesign.in/themes/Medini/images/gallery/2.jpg" alt=""></figure> <div class="overlay"> <div class="box"> <div class="content"> <a href="http://rainbowdesign.in/themes/Medini/images/gallery/2-2.jpg" class="lightbox-image"><i class="fa fa-plus" aria-hidden="true"></i></a> <h5>Title Here</h5> </div> </div> </div> </div> </div> <div class="single-item-area"> <div class="img-box-area"> <figure><img src="http://rainbowdesign.in/themes/Medini/images/gallery/3.jpg" alt=""></figure> <div class="overlay"> <div class="box"> <div class="content"> <a href="http://rainbowdesign.in/themes/Medini/images/gallery/3-3.jpg" class="lightbox-image"><i class="fa fa-plus" aria-hidden="true"></i></a> <h5>Title Here</h5> </div> </div> </div> </div> </div> <div class="single-item-area"> <div class="img-box-area"> <figure><img src="http://rainbowdesign.in/themes/Medini/images/gallery/4.jpg" alt=""></figure> <div class="overlay"> <div class="box"> <div class="content"> <a href="http://rainbowdesign.in/themes/Medini/images/gallery/4-4.jpg" class="lightbox-image"><i class="fa fa-plus" aria-hidden="true"></i></a> <h5>Title Here</h5> </div> </div> </div> </div> </div> <div class="single-item-area"> <div class="img-box-area"> <figure><img src="http://rainbowdesign.in/themes/Medini/images/gallery/5.jpg" alt=""></figure> <div class="overlay"> <div class="box"> <div class="content"> <a href="http://rainbowdesign.in/themes/Medini/images/gallery/5-5.jpg" class="lightbox-image"><i class="fa fa-plus" aria-hidden="true"></i></a> <h5>Title Here</h5> </div> </div> </div> </div> </div> </div> </div> </section> <script src="http://rainbowdesign.in/themes/Medini/js/owl.carousel.min.js"></script> <script src="http://rainbowdesign.in/themes/Medini/js/jquery.fancybox.pack.js"></script>
.gallery-area { position: relative; } .gallery-area .single-item-area .img-box-area { display: block; overflow: hidden; position: relative; border: 1px solid #e5e5e5; padding: 8px; } .gallery-area .single-item-area .img-box-area img { position: relative; width: 100%; } .single-item-area .img-box-area .overlay .box .content a i { border: 2px solid #fff; text-align: center; color: #509E52; display: inline-block; font-size: 15px; height: 55px; line-height: 53px; transition: all 500ms ease 0s; width: 55px; margin-bottom: 15px; border-radius: 0; } .single-item-area:hover .img-box-area .overlay { -webkit-transform: scale(1); transform: scale(1); } .overlay .box .content { display: table-cell; text-align: center; vertical-align: middle; } .overlay { width: 96%; height: 96%; position: absolute; top: 2%; left: 2%; -webkit-transform: scale(0); transform: scale(0); background: rgba(21, 34, 63, 0.75); -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .overlay .box { display: table; height: 100%; width: 100%; } .gallery-area h5 { color: #fff; } .gallery-area .owl-dots { display: none !important; } .gallery-area .owl-theme .owl-controls { display: block; position: relative; margin-top:10px; text-align: center; } .gallery-area .owl-prev span, .gallery-area .owl-next span { color: #848484; } .gallery-area .owl-prev:hover span, .gallery-area .owl-next:hover span { color: #fff; transition: all 500ms ease; } .section-padding { padding: 80px 0px 80px 0px; } .centered { text-align: center; } .section-title h2 { position: relative; font-weight: 700; font-size:40px; margin-bottom: 2px; } .title-text { position: relative; margin-bottom: 68px; } .title-text p { font-size: 16px; max-width: 650px; color: #444; margin:0 auto; } .title-text:before { position: absolute; content: ''; height: 5px; border-bottom: 3px double #509E52; width: 100px; border-radius: 0px; left: 0; right: 0px; margin: auto; bottom: -18px; } @media (min-width:1200px) { .container { padding: 0px 0px; } }
(function($) { "use strict"; //Hide Loading Box (Preloader) $(window).on('load',function(){ var pre_loader = $('.preloader') pre_loader.fadeOut('slow',function(){$(this).remove();}); }); //Update header style + Scroll to Top $(window).on('scroll', function() { if ($(window).scrollTop() > 117) { $('.header-main').addClass('fixed-header'); $('.scroll-to-top').fadeIn(300); } else { $('.header-main').removeClass('fixed-header'); $('.scroll-to-top').fadeOut(300); } }); //Submenu Dropdown Toggle if($('.header-main li.dropdown ul').length){ $('.header-main li.dropdown').append('<div class="dropdown-btn"><span class="fa fa-angle-down"></span></div>'); //Dropdown Button $('.header-main li.dropdown .dropdown-btn').on('click', function() { $(this).prev('ul').slideToggle(500); }); //Disable dropdown parent link $('.navigation li.dropdown > a').on('click', function(e) { e.preventDefault(); }); } //Accordion Box if ($('.accordion-block').length) { $('.accordion-block .accordion-btn').on('click', function() { if ($(this).hasClass('active') !== true) { $('.accordion-block .accordion-btn').removeClass('active'); } if ($(this).next('.accordion-description').is(':visible')) { $(this).removeClass('active'); $(this).next('.accordion-description').slideUp(500); } else { $(this).addClass('active'); $('.accordion-block .accordion-description').slideUp(500); $(this).next('.accordion-description').slideDown(500); } }); } // Scroll to a Specific Div if($('.scroll-to-target').length){ $(".scroll-to-target").on('click', function() { var target = $(this).attr('data-target'); // animate $('html, body').animate({ scrollTop: $(target).offset().top }, 1000); }); } //gallery-slider-area $('.gallery-slider-area').owlCarousel({ loop:true, margin:15, nav:true, smartSpeed: 3000, autoplay: 4000, navText: [ '<span class="fa fa-angle-left"></span>', '<span class="fa fa-angle-right"></span>' ], responsive:{ 0:{ items:1 }, 400:{ items:2 }, 600:{ items:3 }, 800:{ items:4 }, 1200:{ items:5 } } }); // partner-slider $('.partner-slider').owlCarousel({ loop:true, margin:20, nav:true, smartSpeed: 3000, autoplay: 4000, navText: [ '<span class="fa fa-angle-left"></span>', '<span class="fa fa-angle-right"></span>' ], responsive:{ 0:{ items:1 }, 400:{ items:1 }, 600:{ items:2 }, 800:{ items:3 }, 1200:{ items:5 } } }); //Four Column Carousel Slider $('.four-column-carousel').owlCarousel({ loop:true, margin:30, nav:true, smartSpeed: 2000, autoplay: 4000, navText: [ '<span class="fa fa-angle-left"></span>', '<span class="fa fa-angle-right"></span>' ], responsive:{ 0:{ items:1 }, 600:{ items:2 }, 800:{ items:3 }, 1070:{ items:4 } } }); //Two Column Carousel Slider $('.two-column-carousel').owlCarousel({ loop:true, margin:30, nav:true, smartSpeed: 3000, autoplay: 4000, navText: [ '<span class="fa fa-angle-left"></span>', '<span class="fa fa-angle-right"></span>' ], responsive:{ 0:{ items:1 }, 480:{ items:1 }, 600:{ items:1 }, 800:{ items:2 }, 1024:{ items:2 } } }); //Three Column Carousel Slider $('.three-column-carousel').owlCarousel({ loop:true, margin:30, nav:true, smartSpeed: 3000, autoplay: 4000, navText: [ '<span class="fa fa-angle-left"></span>', '<span class="fa fa-angle-right"></span>' ], responsive:{ 0:{ items:1 }, 480:{ items:1 }, 600:{ items:2 }, 800:{ items:2 }, 1024:{ items:3 } } }); //testimonial-slider-area $('.testimonial-slider-area').owlCarousel({ loop:true, margin:30, nav:true, smartSpeed: 3000, autoplay: 4000, navText: [ '<span class="fa fa-angle-left"></span>', '<span class="fa fa-angle-right"></span>' ], responsive:{ 0:{ items:1 }, 480:{ items:1 }, 600:{ items:2 }, 800:{ items:2 }, 1024:{ items:3 } } }); //team-slider-area $('.team-slider-area').owlCarousel({ loop:true, margin:30, nav:true, dots:false, smartSpeed: 3000, autoplay: 4000, navText: [ '<span class="fa fa-angle-left"></span>', '<span class="fa fa-angle-right"></span>' ], responsive:{ 0:{ items:1 }, 480:{ items:1 }, 600:{ items:2 }, 800:{ items:2 }, 1024:{ items:4 } } }); // Search Toggle Btn if($('.toggle-search').length){ $('.toggle-search').on('click', function() { $('.header-search-area').slideToggle(300); }); } //Custom Seclect Box if($('.custom-select-box').length){ $('.custom-select-box').selectmenu().selectmenu('menuWidget').addClass('overflow'); } //LightBox / Fancybox if($('.lightbox-image').length) { $('.lightbox-image').fancybox({ openEffect : 'elastic', closeEffect : 'elastic', helpers : { media : {} } }); } //=== Contact Form Validation === if($("#contact-form").length){ $("#contact-form").validate({ submitHandler: function(form) { var form_btn = $(form).find('button[type="submit"]'); var form_result_div = '#form-result'; $(form_result_div).remove(); form_btn.before('<div id="form-result" class="alert alert-success" role="alert" style="display: none;"></div>'); var form_btn_old_msg = form_btn.html(); form_btn.html(form_btn.prop('disabled', true).data("loading-text")); $(form).ajaxSubmit({ dataType: 'json', success: function(data) { if( data.status == 'true' ) { $(form).find('.form-control').val(''); } form_btn.prop('disabled', false).html(form_btn_old_msg); $(form_result_div).html(data.message).fadeIn('slow'); setTimeout(function(){ $(form_result_div).fadeOut('slow') }, 6000); } }); } }); } // Fact Counter $(window).on('scroll', function() { if($('.fun-fact-counter').length){ $('.fun-fact-counter .column.animated').each(function() { var $t = $(this), n = $t.find(".count-text").attr("data-stop"), r = parseInt($t.find(".count-text").attr("data-speed"), 10); if (!$t.hasClass("counted")) { $t.addClass("counted"); $({ countNum: $t.find(".count-text").text() }).animate({ countNum: n }, { duration: r, easing: "linear", step: function() { $t.find(".count-text").text(Math.floor(this.countNum)); }, complete: function() { $t.find(".count-text").text(this.countNum); } }); } }); } }); // Scroll to a Specific Div if($('.scroll-to-target').length){ $(".scroll-to-target").on('click', function() { var target = $(this).attr('data-target'); // animate $('html, body').animate({ scrollTop: $(target).offset().top }, 10); }); } // Elements Animation if($('.wow').length){ var wow = new WOW( { boxClass: 'wow', // animated element css class (default is wow) animateClass: 'animated', // animation css class (default is animated) offset: 0, // distance to the element when triggering the animation (default is 0) mobile: false, // trigger animations on mobile devices (default is true) live: true // act on asynchronously loaded content (default is true) } ); wow.init(); } })(window.jQuery);

Related: See More


Questions / Comments: