Skip to content

Instantly share code, notes, and snippets.

@pablocattaneo

pablocattaneo/slider_vertical_thumbail.html

Last active August 29, 2015 14:18
Show Gist options
  • Save pablocattaneo/c4ff25ce78cada198334 to your computer and use it in GitHub Desktop.
Save pablocattaneo/c4ff25ce78cada198334 to your computer and use it in GitHub Desktop.
Download ZIP
From http://localhost/martinhogar/upload/index.php?route=sucursales/home Slider con vertical thumbnail responsive
Raw
slider_vertical_thumbail.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thumbnail Navigator Skin 02 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
</head>
<body style="padding: 0; margin: 0; font-family:Arial, Verdana;background-color:#fff;">
<!-- use jssor.slider.min.js instead for release -->
<!-- jssor.slider.min.js = (jssor.js + jssor.slider.js) -->
<script type="text/javascript" src="../js/jssor.js"></script>
<script type="text/javascript" src="../js/jssor.slider.js"></script>
<script>
init_jssor_slider1 = function (containerId) {
var options = {
$AutoPlay: false, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$SlideDuration: 500, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$ThumbnailNavigatorOptions: { //[Optional] Options to specify and enable thumbnail navigator or not
$Class: $JssorThumbnailNavigator$, //[Required] Class to create thumbnail navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$Lanes: 2, //[Optional] Specify lanes to arrange thumbnails, default value is 1
$SpacingX: 14, //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
$SpacingY: 12, //[Optional] Vertical space between each thumbnail in pixel, default value is 0
$DisplayPieces: 6, //[Optional] Number of pieces to display, default value is 1
$ParkingPosition: 156, //[Optional] The offset position to park thumbnail
$Orientation: 2 //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1
}
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
};
</script>
<!--#region Jssor Slider Begin -->
<!-- To move inline styles to css file/block, please specify a class name for each element. -->
<div id="slider1_container" style="position: relative; padding: 0px; margin: 0 auto; top: 0px; left: 0px; width: 960px;
height: 480px; background: #24262e;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
</div>
<div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 240px; top: 0px; width: 720px; height: 480px; overflow: hidden;">
<div>
<img u="image" src="../img/travel/01.jpg" />
<img u="thumb" src="../img/travel/thumb-01.jpg" />
</div>
<div>
<img u="image" src="../img/travel/02.jpg" />
<img u="thumb" src="../img/travel/thumb-02.jpg" />
</div>
<div>
<img u="image" src="../img/travel/03.jpg" />
<img u="thumb" src="../img/travel/thumb-03.jpg" />
</div>
<div>
<img u="image" src="../img/travel/04.jpg" />
<img u="thumb" src="../img/travel/thumb-04.jpg" />
</div>
<div>
<img u="image" src="../img/travel/05.jpg" />
<img u="thumb" src="../img/travel/thumb-05.jpg" />
</div>
<div>
<img u="image" src="../img/travel/06.jpg" />
<img u="thumb" src="../img/travel/thumb-06.jpg" />
</div>
<div>
<img u="image" src="../img/travel/07.jpg" />
<img u="thumb" src="../img/travel/thumb-07.jpg" />
</div>
<div>
<img u="image" src="../img/travel/08.jpg" />
<img u="thumb" src="../img/travel/thumb-08.jpg" />
</div>
<div>
<img u="image" src="../img/travel/09.jpg" />
<img u="thumb" src="../img/travel/thumb-09.jpg" />
</div>
<div>
<img u="image" src="../img/travel/10.jpg" />
<img u="thumb" src="../img/travel/thumb-10.jpg" />
</div>
<div>
<img u="image" src="../img/travel/11.jpg" />
<img u="thumb" src="../img/travel/thumb-11.jpg" />
</div>
<div>
<img u="image" src="../img/travel/12.jpg" />
<img u="thumb" src="../img/travel/thumb-12.jpg" />
</div>
<div>
<img u="image" src="../img/travel/13.jpg" />
<img u="thumb" src="../img/travel/thumb-13.jpg" />
</div>
<div>
<img u="image" src="../img/travel/14.jpg" />
<img u="thumb" src="../img/travel/thumb-14.jpg" />
</div>
</div>
<!--#region Thumbnail Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/development/slider-with-thumbnail-navigator-jquery.html -->
<style>
/* jssor slider thumbnail navigator skin 02 css */
/*
.jssort02 .p (normal)
.jssort02 .p:hover (normal mouseover)
.jssort02 .p.pav (active)
.jssort02 .p.pdn (mousedown)
*/
.jssort02 {
position: absolute;
/* size of thumbnail navigator container */
width: 240px;
height: 480px;
}
.jssort02 .p {
position: absolute;
top: 0;
left: 0;
width: 99px;
height: 66px;
}
.jssort02 .t {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.jssort02 .w {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.jssort02 .c {
position: absolute;
top: 0px;
left: 0px;
width: 95px;
height: 62px;
border: #000 2px solid;
background: url(../img/t01.png) -800px -800px no-repeat;
_background: none;
}
.jssort02 .pav .c {
top: 2px;
_top: 0px;
left: 2px;
_left: 0px;
width: 95px;
height: 62px;
border: #000 0px solid;
_border: #fff 2px solid;
background-position: 50% 50%;
}
.jssort02 .p:hover .c {
top: 0px;
left: 0px;
width: 97px;
height: 64px;
border: #fff 1px solid;
background-position: 50% 50%;
}
.jssort02 .p.pdn .c {
background-position: 50% 50%;
width: 95px;
height: 62px;
border: #000 2px solid;
}
* html .jssort02 .c, * html .jssort02 .pdn .c, * html .jssort02 .pav .c {
/* ie quirks mode adjust */
width /**/: 99px;
height /**/: 66px;
}
</style>
<!-- thumbnail navigator container -->
<div u="thumbnavigator" class="jssort02" style="left: 0px; bottom: 0px;">
<!-- Thumbnail Item Skin Begin -->
<div u="slides" style="cursor: default;">
<div u="prototype" class="p">
<div class=w><div u="thumbnailtemplate" class="t"></div></div>
<div class=c></div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!--#endregion Thumbnail Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">jQuery Carousel</a>
<!-- Trigger -->
<script>
init_jssor_slider1("slider1_container");
</script>
</div>
<!--#endregion Jssor Slider End -->
<script>
// Hace responsive el slider
jQuery(document).ready(function ($) {
var options = {};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales
//while window resizes
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
//Scale slider after document ready
ScaleSlider();
//Scale slider while window load/resize/orientationchange.
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment