"Responsive tabs to accordion with Image Gallery with Fancybox"
Bootstrap 4.1.1 Snippet by pixelworldgroup

Post to Facebook Tweet this

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.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- References: https://github.com/fancyapps/fancyBox -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-8 m-auto text-center">
<h1>Our protofolio</h1>
<p>
Look out for ingenious, responsive and prolific web solutions and services - all under one roof. Web Designing, Digital Marketing, Content Creation, Multimedia Services, Graphic Designing, Startup Solutions, Animations, AV Solutions, photography, videography, etc. You think of it. We deliver it.
</p>
</div>
</div>
</div>
<section class="tabs-to-accordions">
<div class="container">
<div class="row">
<div class="col-12">
<ul class="nav nav-tabs responsive " role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#over-view" role="tab">Web</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#location" role="tab"> UI Design</a>
</li>
<li class="nav-item">
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
@import url(https://fonts.googleapis.com/css?family=Raleway|Roboto:400,500,700);
.{
font-family: 'Roboto', sans-serif;
font-family: 'Raleway', sans-serif;
}
body{
padding:0px;
margin:0px;
font-family: 'Roboto', sans-serif !important;
font-size:16px;
font-weight:300 !important;
color:#242424;
}
p {
line-height: 26px;
font-size:16px;
}
h1, h2, h3, h4, h5, h6{
margin:0;
padding:0;
}
h1{
font-family: 'Raleway', sans-serif !important;
font-size:46px !important;
margin-top:20px !important;
}
.btn {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
border-radius:0 !important;
}
.img-center{
margin:0 auto;
}
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
<script>
$(document).ready(function(){
//FANCYBOX
//https://github.com/fancyapps/fancyBox
$(".fancybox").fancybox({
openEffect: "none",
closeEffect: "none"
});
});
</script>
<script>
var cbpAnimatedHeader = (function() {
var docElem = document.documentElement,
header = document.querySelector( '.navbar-default' ),
didScroll = false,
//changeHeaderOn = 10;
changeHeaderOn = 1;
function init() {
window.addEventListener( 'scroll', function( event ) {
if( !didScroll ) {
didScroll = true;
setTimeout( scrollPage, 10 );
//setTimeout( scrollPage, 550 );
}
}, false );
}
function scrollPage() {
var sy = scrollY();
if ( sy >= changeHeaderOn ) {
classie.add( header, 'navbar-shrink' );
}
else {
classie.remove( header, 'navbar-shrink' );
}
didScroll = false;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Argon Design System
arrow key navigation thumbnail gallery modal view
Image Crop jQuery
Tabs style 1

Questions / Comments: