"grid img slider"
Bootstrap 3.0.0 Snippet by evarevirus

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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ---------->
<div id="nkh-grid-container">
<div class="nkh-grid-item" data-grid-href=
"/en/Nikon-Products/Product/Digital-SLR-Cameras/1526/Nikon-Df.html"
data-grid-image-prefix="df" data-grid-item-id="Nikon Df" id=
"nkh-grid-item-0">
<div class="nkh-grid-item-media"><img class=
"nkh-grid-default-image" src=
"//cdn-7.nikon-cdn.com/en_US/IMG/Images/CPCAssets/homepage/img/grid/df.jpg"></div>
</div>
<div class="nkh-grid-item" data-grid-href=
"/en/Nikon-Products/Product/Nikon1/27695/Nikon-1-V3.html"
data-grid-image-prefix="nikon-v3ft1" data-grid-item-id=
"Nikon V3 + FT-1" id="nkh-grid-item-1">
<div class="nkh-grid-item-media"><img class=
"nkh-grid-default-image" src=
"//cdn-7.nikon-cdn.com/en_US/IMG/Images/CPCAssets/homepage/img/grid/nikon-v3ft1.jpg"></div>
</div>
<div class="nkh-grid-item" data-grid-href=
"/en/Nikon-Products/Photography-Accessories/Videos-And-DVDs.page#!/tag:7WA:VIDEO"
data-grid-image-prefix="nikon-books" data-grid-item-id="Nikon Books"
id="nkh-grid-item-2">
<div class="nkh-grid-item-media"><img class=
"nkh-grid-default-image" src=
"//cdn-7.nikon-cdn.com/en_US/IMG/Images/CPCAssets/homepage/img/grid/nikon-books2.jpg"></div>
</div>
<div class="nkh-grid-item" data-grid-href=
"/en/Nikon-Store/Logo-Items.page?cid=web-0514-logo-items-hp"
data-grid-image-prefix="nikon-merchandise" data-grid-item-id=
"Nikon Merchandise" id="nkh-grid-item-3">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#nkh-grid-container { height: 670px; margin: 0 auto; position: relative; width: 900px; }
.nkh-grid-item { background-color: #fff; border: solid 1px #e4e4e4 !important; cursor: pointer; overflow: hidden; position: absolute; }
.nkh-grid-item-media { position: relative; height: 100%; width: 100%; }
.nkh-grid-item-media img { position: absolute; top: 0; left: 0; }
#nkh-grid-item-0 { height: 208px; left: 0; top: 0; width: 438px; }
#nkh-grid-item-1 { height: 208px; right: 0; top: 0; width: 438px; }
#nkh-grid-item-1 .nkh-grid-item-img-replacement { top: 0; left: auto; right: 0; }
#nkh-grid-item-2 { bottom:0; height:438px; left:0; width:208px; }
#nkh-grid-item-2 .nkh-grid-item-img-replacement { bottom: 0; top: auto; left: 0; right: auto; }
#nkh-grid-item-3 { height: 208px; top: 230px; right: 0; width: 668px; }
#nkh-grid-item-3 .nkh-grid-item-img-replacement { bottom: 50%; top: 50%; left: auto; margin-top: -334px; right: 0; }
#nkh-grid-item-4 { bottom: 0; height: 208px; left: 230px; width: 438px; }
#nkh-grid-item-4 .nkh-grid-item-img-replacement { bottom: 0; top: auto; left: 50%; margin-left: -449px; right: 50%; }
#nkh-grid-item-5 { bottom: 0; height: 208px; right: 0; width: 208px; }
#nkh-grid-item-5 .nkh-grid-item-img-replacement { bottom: 0; top: auto; left: auto; right: 0; }
.nkh-grid-item-img-replacement { display: none; }
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
var hideItems = 0;
function hideItemF() {
$('.nkh-grid-item').each(function(){
$('.nkh-grid-item-img-replacement', this).fadeOut(250, function(){
$(this).remove();
});
});
}
$('.nkh-grid-item').hover(
function(){
var imgSetId = $(this).attr('data-grid-image-prefix');
if(hideItems) {
clearTimeout(hideItems);
}
$('.nkh-grid-item').each(function(step){
var par = $(this);
if(step == 0) {
bgPos = 'top left';
} else if(step == 1) {
bgPos = 'top right';
} else if(step == 2) {
bgPos = 'bottom left';
} else if(step == 3) {
bgPos = 'center right';
} else if(step == 4) {
bgPos = 'bottom center';
} else if(step == 5) {
bgPos = 'bottom right';
}
$('<img/>').addClass('nkh-grid-item-img-replacement').attr({ src: '//nikonusa.com/en_US/IMG/Images/CPCAssets/homepage/img/grid/' + imgSetId + '-full.jpg'}).appendTo($('.nkh-grid-item-media', $(par))).delay(step * 100).fadeIn(250);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Fresh Bootstrap Table
Client or Partners Logo Slider
Timely Login slider
Pinterest-like Responsive Grid

Questions / Comments: