Recently I had to work on a website and I was asked to develop a slideshow that will fade and change the images that are positioned in a grid. This grid is not like a exact square thumbnail grid. It has different sizes and images with different sizes are there. Although we could do this easily in a static way, making this responsive was kind of a challenge for me. So I decided to use Bootstrap and Camera JQuery Plugin. This is a great plugin that you can use and customize as you want.
So the layout of the grid is like this.
To do this we have to implement this grid structure using Bootstrap. To study further about the Bootstrap Grid System, follow this link.
Following is our grid structure and the related css. I have colored the divs to understand the structure.
<div class="container">
<div class="row">
<div class="col-xs-4 collage-cell-big" style="background:blue;"></div>
<div class="col-xs-8 collage-cell-big" style="background:green;"></div>
</div>
<div class="row">
<div class="col-xs-6 collage-cell-small" style="background:yellow;"></div>
<div class="col-xs-6 collage-cell-small" style="background:orange;"></div>
</div>
</div>
.collage-cell-big{
height: 359px;
padding-left: 2px;
padding-right: 2px;
}
.collage-cell-small{
height: 189px;
padding-left: 2px;
padding-right: 2px;
padding-top: 4px;
}
Output is like this.
Next have to link the camera slide css and javascript here.
<link href="scripts/camera/css/camera.css" rel="stylesheet" type="text/css" />
<script src="scripts/camera/scripts/camera.min.js" type="text/javascript"></script>
<script src="scripts/easing/jquery.easing.1.3.js" type="text/javascript"></script>
Then we have to add the camera slide sliders inside this div structure. Following is the code.
<div class="container">
<div class="row">
<div class="col-xs-4 collage-cell-big" style="background:blue;">
<div id="camera_wrap_1">
<div data-src="images/wix/1_1.jpg" ></div>
<div data-src="images/wix/1_2.jpg" ></div>
</div>
</div>
<div class="col-xs-8 collage-cell-big" style="background:green;">
<div id="camera_wrap_2">
<div data-src="images/wix/2_1.jpg" ></div>
<div data-src="images/wix/2_2.jpg" ></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 collage-cell-small" style="background:yellow;">
<div id="camera_wrap_3">
<div data-src="images/wix/3_1.jpg" ></div>
<div data-src="images/wix/3_2.jpg" ></div>
</div>
</div>
<div class="col-xs-6 collage-cell-small" style="background:orange;">
<div id="camera_wrap_4">
<div data-src="images/wix/4_1.jpg" ></div>
<div data-src="images/wix/4_2.jpg" ></div>
</div>
</div>
</div>
</div>
Finally We need to add the jquery call to work the sliders.
function startCamera() {
$('#camera_wrap_1').camera({ fx: 'random', time: 500, loader: 'none', playPause: false, navigation: false, height: '359px', pagination: false });
$('#camera_wrap_3').camera({ fx: 'random', time: 500, loader: 'none', playPause: false, navigation: false, height: '189px', pagination: false });
$('#camera_wrap_2').camera({ fx: 'random', time: 500, loader: 'none', playPause: false, navigation: false, height: '359px', pagination: false });
$('#camera_wrap_4').camera({ fx: 'random', time: 500, loader: 'none', playPause: false, navigation: false, height: '189px', pagination: false });
}
$(function(){startCamera()});
Following is the complete HTML code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Thumbnail Gallery - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="styles/bootstrap.min.css" rel="stylesheet">
<link href="styles/bootstrap-theme.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="scripts/camera/css/camera.css" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="styles/custom.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.collage-cell-big{
height: 359px;
padding-left: 2px;
padding-right: 2px;
}
.collage-cell-small{
height: 189px;
padding-left: 2px;
padding-right: 2px;
padding-top: 4px;
}
</style>
</head>
<body>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-xs-4 collage-cell-big" style="background:none;">
<div id="camera_wrap_1">
<div data-src="images/wix/1_1.jpg" ></div>
<div data-src="images/wix/1_2.jpg" ></div>
</div>
</div>
<div class="col-xs-8 collage-cell-big" style="background:none;">
<div id="camera_wrap_2">
<div data-src="images/wix/2_1.jpg" ></div>
<div data-src="images/wix/2_2.jpg" ></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 collage-cell-small" style="background:none;">
<div id="camera_wrap_3">
<div data-src="images/wix/3_1.jpg" ></div>
<div data-src="images/wix/3_2.jpg" ></div>
</div>
</div>
<div class="col-xs-6 collage-cell-small" style="background:none;">
<div id="camera_wrap_4">
<div data-src="images/wix/4_1.jpg" ></div>
<div data-src="images/wix/4_2.jpg" ></div>
</div>
</div>
</div>
</div>
<!-- /.container -->
<!-- jQuery Version 1.11.0 -->
<script src="scripts/jquery-1.11.1.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="scripts/bootstrap/js/bootstrap.min.js"></script>
<script src="scripts/camera/scripts/camera.min.js" type="text/javascript"></script>
<script src="scripts/easing/jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
function startCamera() {
$('#camera_wrap_1').camera({ fx: 'random', time: 500, loader: 'none', playPause: false, navigation: false, height: '359px', pagination: false });
$('#camera_wrap_3').camera({ fx: 'random', time: 500, loader: 'none', playPause: false, navigation: false, height: '189px', pagination: false });
$('#camera_wrap_2').camera({ fx: 'random', time: 500, loader: 'none', playPause: false, navigation: false, height: '359px', pagination: false });
$('#camera_wrap_4').camera({ fx: 'random', time: 500, loader: 'none', playPause: false, navigation: false, height: '189px', pagination: false });
}
$(function(){startCamera()});
</script>
</body>
</html>
Hope that helps,Thank You.
No comments:
Post a Comment