Bootstrap Snippet Slider Gallery using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
(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();
        });
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Slider Gallery"
Bootstrap 4.0.0 Snippet by fotohansdegroot

Related: See More

Questions / Comments:

"Slider Gallery" Bootstrap 4.0.0 Snippet by fotohansdegroot

Related: See More

Questions / Comments:

"Slider Gallery"
Bootstrap 4.0.0 Snippet by fotohansdegroot