how to change image size in jssor slider? - javascript

I want to change the image size of a jssor slider. I changed the width of slider to 1920px but it does not affect the size of images. How I can change the size of images in Jssor Slider. I am using slider name Different Size Photo Slider which is available on jssor website. Please check the below codes and help me in this matter.
<body style="padding:0px; margin:0px; background-color:#fff;font-family:'Open Sans',sans-serif,arial,helvetica,verdana">
<!-- #region Jssor Slider Begin -->
<script src="js/jssor.slider-23.1.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
jssor_1_slider_init = function() {
var jssor_1_SlideshowTransitions = [
{$Duration:1200,$Zoom:11,$Rotate:-1,$Easing:{$Zoom:$Jease$.$InQuad,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2,$Round:{$Rotate:0.5},$Brother:{$Duration:1200,$Zoom:1,$Rotate:1,$Easing:$Jease$.$Swing,$Opacity:2,$Round:{$Rotate:0.5},$Shift:90}},
{$Duration:1400,x:0.25,$Zoom:1.5,$Easing:{$Left:$Jease$.$InWave,$Zoom:$Jease$.$InSine},$Opacity:2,$ZIndex:-10,$Brother:{$Duration:1400,x:-0.25,$Zoom:1.5,$Easing:{$Left:$Jease$.$InWave,$Zoom:$Jease$.$InSine},$Opacity:2,$ZIndex:-10}},
{$Duration:1200,$Zoom:11,$Rotate:1,$Easing:{$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2,$Round:{$Rotate:1},$ZIndex:-10,$Brother:{$Duration:1200,$Zoom:11,$Rotate:-1,$Easing:{$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2,$Round:{$Rotate:1},$ZIndex:-10,$Shift:600}},
{$Duration:1500,x:0.5,$Cols:2,$ChessMode:{$Column:3},$Easing:{$Left:$Jease$.$InOutCubic},$Opacity:2,$Brother:{$Duration:1500,$Opacity:2}},
{$Duration:1500,x:-0.3,y:0.5,$Zoom:1,$Rotate:0.1,$During:{$Left:[0.6,0.4],$Top:[0.6,0.4],$Rotate:[0.6,0.4],$Zoom:[0.6,0.4]},$Easing:{$Left:$Jease$.$InQuad,$Top:$Jease$.$InQuad,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2,$Brother:{$Duration:1000,$Zoom:11,$Rotate:-0.5,$Easing:{$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2,$Shift:200}},
{$Duration:1500,$Zoom:11,$Rotate:0.5,$During:{$Left:[0.4,0.6],$Top:[0.4,0.6],$Rotate:[0.4,0.6],$Zoom:[0.4,0.6]},$Easing:{$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2,$Brother:{$Duration:1000,$Zoom:1,$Rotate:-0.5,$Easing:{$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2,$Shift:200}},
{$Duration:1500,x:0.3,$During:{$Left:[0.6,0.4]},$Easing:{$Left:$Jease$.$InQuad,$Opacity:$Jease$.$Linear},$Opacity:2,$Outside:true,$Brother:{$Duration:1000,x:-0.3,$Easing:{$Left:$Jease$.$InQuad,$Opacity:$Jease$.$Linear},$Opacity:2}},
{$Duration:1200,x:0.25,y:0.5,$Rotate:-0.1,$Easing:{$Left:$Jease$.$InQuad,$Top:$Jease$.$InQuad,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2,$Brother:{$Duration:1200,x:-0.1,y:-0.7,$Rotate:0.1,$Easing:{$Left:$Jease$.$InQuad,$Top:$Jease$.$InQuad,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2}},
{$Duration:1600,x:1,$Rows:2,$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$Brother:{$Duration:1600,x:-1,$Rows:2,$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2}},
{$Duration:1600,x:1,$Rows:2,$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$Brother:{$Duration:1600,x:-1,$Rows:2,$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2}},
{$Duration:1600,y:-1,$Cols:2,$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$Brother:{$Duration:1600,y:1,$Cols:2,$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2}},
{$Duration:1200,y:1,$Easing:{$Top:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$Brother:{$Duration:1200,y:-1,$Easing:{$Top:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2}},
{$Duration:1200,x:1,$Easing:{$Left:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$Brother:{$Duration:1200,x:-1,$Easing:{$Left:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2}},
{$Duration:1200,y:-1,$Easing:{$Top:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$ZIndex:-10,$Brother:{$Duration:1200,y:-1,$Easing:{$Top:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$ZIndex:-10,$Shift:-100}},
{$Duration:1200,x:1,$Delay:40,$Cols:6,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Easing:{$Left:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$ZIndex:-10,$Brother:{$Duration:1200,x:1,$Delay:40,$Cols:6,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Easing:{$Top:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$ZIndex:-10,$Shift:-100}},
{$Duration:1500,x:-0.1,y:-0.7,$Rotate:0.1,$During:{$Left:[0.6,0.4],$Top:[0.6,0.4],$Rotate:[0.6,0.4]},$Easing:{$Left:$Jease$.$InQuad,$Top:$Jease$.$InQuad,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2,$Brother:{$Duration:1000,x:0.2,y:0.5,$Rotate:-0.1,$Easing:{$Left:$Jease$.$InQuad,$Top:$Jease$.$InQuad,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2}},
{$Duration:1600,x:-0.2,$Delay:40,$Cols:12,$During:{$Left:[0.4,0.6]},$SlideOut:true,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Assembly:260,$Easing:{$Left:$Jease$.$InOutExpo,$Opacity:$Jease$.$InOutQuad},$Opacity:2,$Outside:true,$Round:{$Top:0.5},$Brother:{$Duration:1000,x:0.2,$Delay:40,$Cols:12,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Assembly:1028,$Easing:{$Left:$Jease$.$InOutExpo,$Opacity:$Jease$.$InOutQuad},$Opacity:2,$Round:{$Top:0.5}}}
];
var jssor_1_options = {
$AutoPlay: 1,
$FillMode: 5,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: jssor_1_SlideshowTransitions,
$TransitionsOrder: 1
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*responsive code begin*/
/*remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider() {
var bodywidth = jssor_1_slider.body.clientWidth;
if (bodywidth)
jssor_1_slider.$ScaleWidth(Math.min(bodyWidth, 1920));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
/*responsive code end*/
};
</script>
<style>
/* jssor slider bullet navigator skin 13 css */
/*
.jssorb13 div (normal)
.jssorb13 div:hover (normal mouseover)
.jssorb13 .av (active)
.jssorb13 .av:hover (active mouseover)
.jssorb13 .dn (mousedown)
*/
.jssorb13 {
position: absolute;
}
.jssorb13 div, .jssorb13 div:hover, .jssorb13 .av {
position: absolute;
/* size of bullet elment */
width: 21px;
height: 21px;
background: url('img/b13.png') no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb13 div { background-position: -5px -5px; }
.jssorb13 div:hover, .jssorb13 .av:hover { background-position: -35px -5px; }
.jssorb13 .av { background-position: -65px -5px; }
.jssorb13 .dn, .jssorb13 .dn:hover { background-position: -95px -5px; }
</style>
<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:1345px;height:500px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div data-u="loading" style="position:absolute;top:0px;left:0px;background:url('img/loading.gif') no-repeat 50% 50%;background-color:rgba(0, 0, 0, 0.7);"></div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1345px;height:500px;overflow:hidden;">
<div>
<img data-u="image" src="img/3.jpg" />
</div>
<div>
<img data-u="image" src="img/02.jpg" />
</div>
<div>
<img data-u="image" src="img/03.jpg" />
</div>
<div>
<img data-u="image" src="img/04.jpg" />
</div>
<div>
<img data-u="image" src="img/05.jpg" />
</div>
<div>
<img data-u="image" src="img/06.jpg" />
</div>
<div>
<img data-u="image" src="img/07.jpg" />
</div>
<div>
<img data-u="image" src="img/08.jpg" />
</div>
<div>
<img data-u="image" src="img/09.jpg" />
</div>
<div>
<img data-u="image" src="img/10.jpg" />
</div>
<div>
<img data-u="image" src="img/11.jpg" />
</div>
<a data-u="any" href="https://www.jssor.com" style="display:none">slider bootstrap</a>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb13" style="bottom:16px;right:16px;" data-autocenter="1">
<!-- bullet navigator item prototype -->
<div data-u="prototype" style="width:21px;height:21px;"></div>
</div>
</div>
<script type="text/javascript">jssor_1_slider_init();</script>
<!-- #endregion Jssor Slider End -->


What you need is to change $FillMode: 5 to $FillMode: 0. This will stretch images to fill full area of slide. Also divs with width:1345px, should be 1920. You can find more here https://www.jssor.com/help/layout.html, under “Fill Mode (Slide)”. I hope this will help.

Related

If not visible, fix a grid-item on Masonry (top-right)

Im trying to get a grid-item of masonry fixed on the top right of grid container. If I scroll the window, and the item is no more visible, it gets fixed on the top right.
Im trying to apply this CSS to the third grid-item:
.fixed-top-right{
position: fixed;
top:0;
right:0;
}
This is my html:
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item fixed-top-right">
<img src="<?php echo get_template_directory_uri().'/img/submergedbp.jpg'; ?>" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
The CSS:
* { box-sizing: border-box; }
/* force scrollbar */
html { overflow-y: scroll; }
/* ---- grid ---- */
.grid {
background: #DDD;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
width: 32.683%;
}
.grid-item {
float: left;
margin-bottom: 10px;
}
.grid-item img {
display: block;
max-width: 100%;
}
And the call of masonry:
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
percentPosition: true,
gutter: 10,
columnWidth: '.grid-sizer'
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry();
});
This is the base code from Masonry page that I'm editing.
If I just apply my CSS, the element goes left and it doesnt stay on the top. Is there a way to make the position of a grid-item fixed top-right inside the grid container if the element is no more visible on the screen?

Jssor Image Slider arrows not showing

I can't get the arrows on the image slider to appear... I've tried changing the positioning and display but that hasn't worked. Since putting the code on my Index page the only things I've changed are: removing "overflow:hidden" on the div id "jssor_1"; the actual size of the slider (width:500px;height:400px); and the rotation speed of each slide... The code was taken from the "no-jquery.html" file. As you can see on the "background: url" part of the code I've already set the source to the "a02.png".
I also noticed that the left arrow, whilst not visible on the slider, does still work (I can hover over it and click it).
I feel like I'm missing something simple here.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Nightfall Gaming</title>
<link href="C:\Users\Cam\Desktop\NightfallGaming\CSS\Stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body bgcolor="#FFFFFF">
<!--site navbar-->
<div id="navbar">
<nav>
<ul>
<li>Home</li>
<li>Game News</li>
<li>Game Reviews
<ul>
<li>Xbox 360</li>
<li>Xbox One</li>
<li>PS3</li>
<li>PS4</li>
<li>PC</li>
<li>Wii</li>
</ul>
</li>
<li>Contact Us/About Us</li>
</ul>
</nav>
</div>
<!--site logo-->
<div id="logo">
<img src="C:\Users\Cam\Desktop\NightfallGaming\Images\Logo.png" alt="Home">
</div>
<!--mainbody div-->
<div id="mainbody">
<div id="slider">
<script type="text/javascript" src="C:\Users\Cam\Desktop\NightfallGaming\js\jssor.slider.min.js" async></script>
<script>
jssor_1_slider_init = function() {
var jssor_1_SlideoTransitions = [
[{b:0.0,d:600.0,y:-290.0,e:{y:27.0}}],
[{b:0.0,d:1000.0,y:185.0},{b:1000.0,d:500.0,o:-1.0},{b:1500.0,d:500.0,o:1.0},{b:2000.0,d:1500.0,r:360.0},{b:3500.0,d:1000.0,rX:30.0},{b:4500.0,d:500.0,rX:-30.0},{b:5000.0,d:1000.0,rY:30.0},{b:6000.0,d:500.0,rY:-30.0},{b:6500.0,d:500.0,sX:1.0},{b:7000.0,d:500.0,sX:-1.0},{b:7500.0,d:500.0,sY:1.0},{b:8000.0,d:500.0,sY:-1.0},{b:8500.0,d:500.0,kX:30.0},{b:9000.0,d:500.0,kX:-30.0},{b:9500.0,d:500.0,kY:30.0},{b:10000.0,d:500.0,kY:-30.0},{b:10500.0,d:500.0,c:{x:87.50,t:-87.50}},{b:11000.0,d:500.0,c:{x:-87.50,t:87.50}}],
[{b:0.0,d:600.0,x:410.0,e:{x:27.0}}],
[{b:-1.0,d:1.0,o:-1.0},{b:0.0,d:600.0,o:1.0,e:{o:5.0}}],
[{b:-1.0,d:1.0,c:{x:175.0,t:-175.0}},{b:0.0,d:800.0,c:{x:-175.0,t:175.0},e:{c:{x:7.0,t:7.0}}}],
[{b:-1.0,d:1.0,o:-1.0},{b:0.0,d:600.0,x:-570.0,o:1.0,e:{x:6.0}}],
[{b:-1.0,d:1.0,o:-1.0,r:-180.0},{b:0.0,d:800.0,o:1.0,r:180.0,e:{r:7.0}}],
[{b:0.0,d:1000.0,y:80.0,e:{y:24.0}},{b:1000.0,d:1100.0,x:570.0,y:170.0,o:-1.0,r:30.0,sX:9.0,sY:9.0,e:{x:2.0,y:6.0,r:1.0,sX:5.0,sY:5.0}}],
[{b:2000.0,d:600.0,rY:30.0}],
[{b:0.0,d:500.0,x:-105.0},{b:500.0,d:500.0,x:230.0},{b:1000.0,d:500.0,y:-120.0},{b:1500.0,d:500.0,x:-70.0,y:120.0},{b:2600.0,d:500.0,y:-80.0},{b:3100.0,d:900.0,y:160.0,e:{y:24.0}}],
[{b:0.0,d:1000.0,o:-0.4,rX:2.0,rY:1.0},{b:1000.0,d:1000.0,rY:1.0},{b:2000.0,d:1000.0,rX:-1.0},{b:3000.0,d:1000.0,rY:-1.0},{b:4000.0,d:1000.0,o:0.4,rX:-1.0,rY:-1.0}]
];
var jssor_1_options = {
$AutoPlay: true,
$Idle: 4000,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions,
$Breaks: [
[{d:2000,b:1000}]
]
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 600);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
</script>
<style>
/* jssor slider bullet navigator skin 01 css */
/*
.jssorb01 div (normal)
.jssorb01 div:hover (normal mouseover)
.jssorb01 .av (active)
.jssorb01 .av:hover (active mouseover)
.jssorb01 .dn (mousedown)
*/
.jssorb01 {
position: absolute;
}
.jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
position: absolute;
/* size of bullet elment */
width: 12px;
height: 12px;
filter: alpha(opacity=70);
opacity: .7;
overflow: hidden;
cursor: pointer;
border: #000 1px solid;
}
.jssorb01 div { background-color: gray; }
.jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
.jssorb01 .av { background-color: #fff; }
.jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }
/* jssor slider arrow navigator skin 02 css */
/*
.jssora02l (normal)
.jssora02r (normal)
.jssora02l:hover (normal mouseover)
.jssora02r:hover (normal mouseover)
.jssora02l.jssora02ldn (mousedown)
.jssora02r.jssora02rdn (mousedown)
*/
.jssora02l, .jssora02r {
display: block;
position: absolute;
/* size of arrow element */
width: 55px;
height: 55px;
cursor: pointer;
background: url('C:\Users\Cam\Desktop\NightfallGaming\img\a02.png') no-repeat;
overflow: hidden;
}
.jssora02l { background-position: -3px -33px; }
.jssora02r { background-position: -63px -33px; }
.jssora02l:hover { background-position: -123px -33px; }
.jssora02r:hover { background-position: -183px -33px; }
.jssora02l.jssora02ldn { background-position: -3px -33px; }
.jssora02r.jssora02rdn { background-position: -63px -33px; }
</style>
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 228px; left: -180px; width: 500px; height: 400px;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; 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>
<div data-u="slides" style="cursor: default; position: relative;
: 0px; left: 0px; width: 800px; height: 400px; overflow: hidden;">
<div data-p="112.50" style="display: none;">
<img data-u="image" src="C:\Users\Cam\Desktop\NightfallGaming\img\001.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/007.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="C:\Users\Cam\Desktop\NightfallGaming\img\003.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/004.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/005.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/006.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/009.jpg" />
</div>
<div data-b="0" data-p="112.50" style="display: none;">
<img data-u="image" src="img/008.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/011.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/010.jpg" />
</div>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb01" style="bottom:16px;right:-8px;">
<div data-u="prototype" style="width:12px;height:12px;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora02l" style="top:0px;left:8px;width:55px;height:55px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora02r" style="top:0px;right:8px;width:55px;height:55px;" data-autocenter="2"></span>
</div>
<script>
jssor_1_slider_init();
</script>
</div>
</div>
</body>
</html>

Dont you have to put the two arrow span tages inside the main slider_container tag before your last closing div that wraps the image...

Pictures fade from BW to color while responsive

What I want to do is to create a menu with 3 pictures (side-by-side):
I want each picture to become colored when hovering.
The problem here is that the pictures should resize matching the window size (responsive for Tablets and Phones).
I can't seem to get it to work as the pictures have a space in between and they won't fit the window's size:
https://jsfiddle.net/EgDqy/68/embedded/result/
$(".cell").hover(
function() {
$(this).find('.fader').fadeOut("slow");
},
function() {
$(this).find('.fader').fadeIn("slow");
}
);
.cell {
height: 100%;
width: 100%;
display: inline-block;
position: relative;
}
.cell img {
height: 100hv;
position: absolute;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="cell">
<img src="http://www.benfica-zurique.ch/test/images/Fussball.jpg" alt="" display />
<img src="http://www.benfica-zurique.ch/test/images/FussballBW.jpg" class="fader" alt="" />
</div>
<div class="cell">
<img src="http://www.benfica-zurique.ch/test/images/Restaurant.jpg" alt="" />
<img src="http://www.benfica-zurique.ch/test/images/RestaurantBW.jpg" class="fader" alt="" />
</div>
<div class="cell">
<img src="http://www.benfica-zurique.ch/test/images/Zumba.jpg" alt="" />
<img src="http://www.benfica-zurique.ch/test/images/ZumbaBW.jpg" class="fader" alt="" />
</div>

You don't actually need JS or extra images for that.
CSS can do it all.
img {
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
filter: grayscale(1);
transition: -webkit-filter 1s ease; /* just for reference - add your owne prefixes */
}
img:hover {
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
filter: grayscale(0);
}
<img src="http://lorempixel.com/output/city-q-c-640-480-10.jpg" alt="">

How to auto center JSSOR arrow so that thumbnail row is taken into account?

I have some JSSOR code like this the regular demos...
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 488px;">
<!-- Slides -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 400px;" >
<div>
<img u="image" ... />
<img u="thumb" ... />
</div>
<div>
<img u="image" ... />
<img u="thumb" ... />
</div>
</div>
<!-- Arrow Left -->
<span u="arrowleft" class="jssoral" style="left: 8px;"></span>
<!-- Arrow Right -->
<span u="arrowright" class="jssorar" style="right: 8px;"></span>
<!-- thumbnail navigator -->
<div u="thumbnavigator" class="jssort01" style="left: 0px; bottom: 0px;">
...
</div>
</div>
Notice that the container height is 88px larger than the slide height. That is the space allocated for the Thumbnail Navigator.
In my JavaScript, I am specifying AutoCenter on the arrows:
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 2,
$AutoCenter: 2,
$Steps: 1
}
but what happens is the arrows are vertically centered in the overall jssor container, not in the slide itself.
I know the doc mentions that the arrows are centered in their container, but generally what you want is for them to be centered in the SLIDE.
How can I center the arrows within the SLIDE? Doesn't seem like I can move the arrow SPANs into the slides DIV. Is this possible?

Please disable autocenter ($AutoCenter: 0),
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 2,
$AutoCenter: 0,
$Steps: 1
}
And then you can adjust position manually (top: 175px;),
<!-- Arrow Left -->
<span u="arrowleft" class="jssoral" style="top: 175px; left: 8px;"></span>
<!-- Arrow Right -->
<span u="arrowright" class="jssorar" style="top: 175px; right: 8px;"></span>

How to change the dimensions of the Jssor Image Slider without losing it's responsive nature, image aspect ratio, etc. only on iPhone device?

The website I'm developing is responsive in nature i.e. the website design gets adjust according to the device on which it is browsed. I've used Bootstrap framework for it.
I'm using Jssor JQuery Image slider in my website. It's working fine and perfect for me on all devices and all popular well-known browsers. The only issue I'm facing is when it is viewed on iPhone the size of sliding images in Jssor slider should get changed to dimensions 460 px * 280 px. In other words, the Jssor image slider should look somewhat bigger than the current size. But while doing this the aspect ratio of the images appearing in slider should be maintained.
Also when the website is viewed on iPhone the image slider should occupy the whole horizontal screen. That is the image slider shouldn't have any white space appearing around the slider. Currently two vertical blank bars are appearing on both sides of the slider.
Initially when the website is viewed on a browser on PC or laptop the resolution of slider images is 940 px * 370 px and it gets auto adjust as per the size of the device on which it it browsed.
The said dimension change should happen only on iPhone and not on any other devices. On other devices it's working absolutely fine and perfect. Also the aspect ratio of the images should not get disturb in this process.
For your reference I'm putting below the HTML code and jQuery code of the slider. All the necessary library files have been included.
HTML code :
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 940px; height: 370px; overflow: hidden; ">
<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>
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 940px; height: 370px; overflow: hidden;">
<div>
<img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Bud_Light_Lime_1413041685.jpg" />
<div u=caption t="*" class="captionOrange" style="position:absolute; left:350px; bottom: 40px; width:300px; height:30px;">
slideshow transition twins
</div>
</div>
<div>
<img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Finlandia_1413041875.jpg" />
<div u=caption t="*" class="captionOrange" style="position:absolute; left:350px; bottom: 40px; width:300px; height:30px;">
slideshow transition twins
</div>
</div>
<div>
<img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Three_Olives_1413042332.jpg" />
<div u=caption t="*" class="captionOrange" style="position:absolute;left:350px; bottom: 40px; width:300px; height:30px;">
slideshow transition twins
</div>
</div>
<div>
<img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Avalon_1413041406.jpg" />
<div u=caption t="*" class="captionOrange" style="position:absolute; left:350px; bottom: 40px; width:300px; height:30px;">
slideshow transition twins
</div>
</div>
<div>
<img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Brancott_1413042551.JPG" />
<div u=caption t="*" class="captionOrange" style="position:absolute;left:350px; bottom: 40px; width:300px; height:30px;">
slideshow transition twins
</div>
</div>
</div>
<div u="navigator" class="jssorb05" style="position: absolute; bottom: 16px; right: 6px;">
<div u="prototype" style="POSITION: absolute; WIDTH: 16px; HEIGHT: 16px;"></div>
</div>
<style>
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
background: url(img/b05.png) no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb05 div {
background-position: -7px -7px;
}
.jssorb05 div:hover, .jssorb05 .av:hover {
background-position: -37px -7px;
}
.jssorb05 .av {
background-position: -67px -7px;
}
.jssorb05 .dn, .jssorb05 .dn:hover {
background-position: -97px -7px;
}
.jssora12l, .jssora12r, .jssora12ldn, .jssora12rdn {
position: absolute;
cursor: pointer;
display: block;
background: url(img/a12.png) no-repeat;
overflow: hidden;
}
.jssora12l {
background-position: -16px -37px;
}
.jssora12r {
background-position: -75px -37px;
}
.jssora12l:hover {
background-position: -136px -37px;
}
.jssora12r:hover {
background-position: -195px -37px;
}
.jssora12ldn {
background-position: -256px -37px;
}
.jssora12rdn {
background-position: -315px -37px;
}
.captionOrange, .captionBlack {
color: #fff;
font-size: 20px;
line-height: 30px;
text-align: center;
border-radius: 4px;
}
.captionOrange {
background: #EB5100;
background-color: rgba(235, 81, 0, 0.6);
}
.captionBlack {
font-size:16px;
background: #000;
background-color: rgba(0, 0, 0, 0.4);
}
a.captionOrange, A.captionOrange:active, A.captionOrange:visited {
color: #ffffff;
text-decoration: none;
}
a.captionOrange:hover {
color: #eb5100;
text-decoration: underline;
background-color: #eeeeee;
background-color: rgba(238, 238, 238, 0.7);
}
.bricon {
background: url(img/browser-icons.png);
}
</style>
<span u="arrowleft" class="jssora12l" style="width: 30px; height: 46px; top: 123px; left: 0px;"></span>
<span u="arrowright" class="jssora12r" style="width: 30px; height: 46px; top: 123px; right: 0px"></span>
<a style="display: none" href="http://www.jssor.com">javascript</a>
</div>
jQuery code :
<script>
jQuery(document).ready(function ($) {
var _SlideshowTransitions = [{ $Duration: 1200, $Opacity: 2 }];
var options = {
$AutoPlay: 1,
$AutoPlaySteps: 1,
$Idle: 3000,
$PauseOnHover: 1,
$ArrowKeyNavigation: true,
$SlideDuration: 500,
$MinDragOffsetToSlide: 20,
$SlideSpacing: 0,
$Cols: 1,
$Align: 0,
$UISearchMode: 1,
$PlayOrientation: 1,
$DragOrientation: 3,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 1,
$ShowLink: true
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$ChanceToShow: 2,
$Steps: 1,
$Rows: 1,
$SpacingX: 10,
$SpacingY: 10,
$Orientation: 1
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 2,
$Steps: 1
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(Math.min(parentWidth, 940));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
$(window).bind('resize', ScaleSlider);
}
});
</script>

//Your website
jQuery(document).ready(function ($) {
//...
function ScaleSliderDevices() {
var bodyWidth = DEVICE.Screen.width();
if (DEVICE.Screen.osDimVariation()) {
bodyWidth = DEVICE.Screen.width() + osWidthOffset();
}
jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 940));
};
//...
if (DEVICE.mobile())
{
$(window).bind('resize', ScaleSliderDevices);
}
//as the resize event may not fire at the beginning sometimes, please scale slider manually after document load
ScaleSliderDevices();
}

Since you are already using bootstrap, why not use bootstraps built in carousel? All the responsive work is done for you.
plnkr demo
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://smartrebate.eywaharvest.com/images/brands/Bud_Light_Lime_1413041685.jpg" />
<div class="carousel-caption">
slideshow transition twins
</div>
</div>
<div class="item">
<img src="http://smartrebate.eywaharvest.com/images/brands/Three_Olives_1413042332.jpg" />
<div class="carousel-caption">
slideshow transition twins
</div>
</div>
<div class="item">
<img src="http://smartrebate.eywaharvest.com/images/brands/Avalon_1413041406.jpg" />
<div class="carousel-caption">
slideshow transition twins
</div>
</div>
<div class="item">
<img src="http://smartrebate.eywaharvest.com/images/brands/Brancott_1413042551.JPG" />
<div class="carousel-caption">
slideshow transition twins
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>

Conclusion: added resize specific per devices see:
Added device detection https://github.com/matthewhudson/device.js/blob/master/lib/device.js source inside js with small updates made by me to resolve width and height problems on IOS.
Added Slider Scale to fit body width not parent width, maybe you will need to compute for parent as well width.
//Your website
jQuery(document).ready(function ($) {
//...
function ScaleSliderDevices() {
var bodyWidth = DEVICE.Screen.width();
if (DEVICE.Screen.osDimVariation()) {
bodyWidth = DEVICE.Screen.width() + osWidthOffset();
}
jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 940));
};
//...
if (DEVICE.mobile())
{
$(window).bind('resize', ScaleSliderDevices);
}
}
add resize event for devices (roation mainly)
JSFIDDLE: example does not run on devices use the code in your local website to test it on devices.
http://jsfiddle.net/sp75dzaq/13/
You can find comments there with more details.

Categories