javascript - jssor slider width issues -
super confused on how adjust width of slider...
i've tried editing jquery see commented out:
jquery(document).ready(function ($) { var nestedsliders = []; $.each(["sliderh1_container", "sliderh2_container", "sliderh3_container"], function (index, containerid) { var nestedslideroptions = { $pauseonhover: 1, //[optional] whether pause when mouse on if slider auto playing, 0 no pause, 1 pause desktop, 2 pause touch device, 3 pause desktop , touch device, default value 1 $slideduration: 500, //[optional] specifies default duration (swipe) slide in milliseconds, default value 500 $mindragoffsettoslide: 20, //[optional] minimum drag offset trigger slide , default value 20 //$slidewidth: 200, //[optional] width of every slide in pixels, default value width of 'slides' container //$slideheight: 150, //[optional] height of every slide in pixels, default value height of 'slides' container $slidespacing: 3, //[optional] space between each slide in pixels, default value 0 $displaypieces: 1, //[optional] number of pieces display (the slideshow disabled if value set greater 1), default value 1 $parkingposition: 0, //[optional] offset position park slide (this options applys when slideshow disabled), default value 0. $uisearchmode: 0, var options = { $autoplay: false, //[optional] whether auto play, enable slideshow, alternative must set true, default value false $autoplaysteps: 1, //[optional] steps go each navigation request (this options applys when slideshow disabled), default value 1 $autoplayinterval: 2000, //[optional] interval (in milliseconds) go next slide since previous stopped if slider auto playing, default value 3000 $pauseonhover: 1, //[optional] whether pause when mouse on if slider auto playing, 0 no pause, 1 pause desktop, 2 pause touch device, 3 pause desktop , touch device, default value 1 $arrowkeynavigation: true, //[optional] allows keyboard (arrow key) navigation or not, default value false $slideduration: 300, //[optional] specifies default duration (swipe) slide in milliseconds, default value 500 $mindragoffsettoslide: 80, //[optional] minimum drag offset trigger slide , default value 20 //$slidewidth: 600, //[optional] width of every slide in pixels, default value width of 'slides' container //$slideheight: 150, //[optional] height of every slide in pixels, default value height of 'slides' container $slidespacing: 3, //[optional] space between each slide in pixels, default value 0 $displaypieces: 1, //[optional] number of pieces display (the slideshow disabled if value set greater 1), default value 1 $parkingposition: 0, //[optional] offset position park slide (this options applys when slideshow disabled), default value 0. $uisearchmode: 0, //[optional] way (0 parellel, 1 recursive, default value 1) search ui components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc). $playorientation: 2, //[optional] orientation play slide (for auto play, navigation), 1 horizental, 2 vertical, default value 1 $dragorientation: 0, //[optional] orientation drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value 1 (note $dragorientation should same $playorientation when $displaypieces greater 1, or parking position not 0), i've tried editing css , when create bigger.. 900 pixels.. get's smaller:
<!-- slides container --> <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;"> <div> <div id="sliderh1_container" class="sliderh1" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;"> <!-- slides container --> <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;"> <div><img u="image" src="/jssor/img/landscape/05.jpg" /></div> <div><img u="image" src="/jssor/img/landscape/06.jpg" /></div> <div><img u="image" src="/jssor/img/landscape/07.jpg" /></div> <div><img u="image" src="/jssor/img/landscape/01.jpg" /></div> <div><img u="image" src="/jssor/img/landscape/02.jpg" /></div> <div><img u="image" src="/jssor/img/landscape/03.jpg" /></div> <div><img u="image" src="/jssor/img/landscape/04.jpg" /></div> </div> <!-- bullet navigator skin begin --> <!-- bullet navigator container --> <div u="navigator" class="jssorb03" style="position: absolute; bottom: 10px; right: 10px;"> <!-- bullet navigator item prototype --> <div u="prototype" style="position: absolute; width: 21px; height: 21px; text-align:center; line-height:21px; color:white; font-size:12px;"><numbertemplate></numbertemplate></div> </div> <!-- bullet navigator skin end --> </div> <div u="thumb"> <img src="/jssor/img/nested-thumb/landscape.jpg" /> <div class="title_back"></div> <div class="title"> landscape </div> </div> </div> <div> <div id="sliderh2_container" class="sliderh2" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;"> <!-- slides container --> <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;"> <div><img u="image" src="/jssor/img/motor/001.jpg" /></div> <div><img u="image" src="/jssor/img/motor/002.jpg" /></div> <div><img u="image" src="/jssor/img/motor/003.jpg" /></div> <div><img u="image" src="/jssor/img/motor/004.jpg" /></div> <div><img u="image" src="/jssor/img/motor/005.jpg" /></div> <div><img u="image" src="/jssor/img/motor/006.jpg" /></div> <div><img u="image" src="/jssor/img/motor/007.jpg" /></div> <div><img u="image" src="/jssor/img/motor/008.jpg" /></div> </div> <!-- bullet navigator skin begin --> <!-- bullet navigator container --> <div u="navigator" class="jssorb03" style="position: absolute; bottom: 10px; right: 10px;"> <!-- bullet navigator item prototype --> <div u="prototype" style="position: absolute; width: 21px; height: 21px; text-align:center; line-height:21px; color:white; font-size:12px;"><numbertemplate></numbertemplate></div> </div> <!-- bullet navigator skin end --> @jssor @ comments i'm can't figure out now..
as usual.. help appreciated. give thanks you.
additionally, here link @ here:
http://phpbuilds.com/jssor.slider.fullpack/demos-jquery/nested-slider.source.html
i believe you're looking line:
<div id="sliderh1_container" class="sliderh1" style="position: relative; top: 0px; left:0px; width: 600px; height: 300px;"> edit
here 1 illustration of slider have on website.
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 285px; height: 285px; "> <!-- slides container --> <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 285px; height: 285px; overflow: hidden;"> ... also, not sure why have twice:
<!-- slides container --> ... edit2 - one
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>nested slider demo - jssor slider, slideshow javascript source code</title> </head> <body style="font-family:arial, verdana;background-color:#fff;"> <!-- works same jquery version 1.x 2.x --> <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script> <!-- utilize jssor.slider.mini.js (39kb) or jssor.sliderc.mini.js (31kb, caption, no slideshow) or jssor.sliders.mini.js (26kb, no caption, no slideshow) instead release --> <!-- jssor.slider.mini.js = jssor.sliderc.mini.js = jssor.sliders.mini.js = (jssor.core.js + jssor.utils.js + jssor.slider.js) --> <script type="text/javascript" src="../js/jssor.core.js"></script> <script type="text/javascript" src="../js/jssor.utils.js"></script> <script type="text/javascript" src="../js/jssor.slider.js"></script> <script> jquery(document).ready(function ($) { var nestedsliders = []; $.each(["sliderh1_container", "sliderh2_container", "sliderh3_container"], function (index, containerid) { var nestedslideroptions = { $pauseonhover: 1, //[optional] whether pause when mouse on if slider auto playing, 0 no pause, 1 pause desktop, 2 pause touch device, 3 pause desktop , touch device, default value 1 $slideduration: 500, //[optional] specifies default duration (swipe) slide in milliseconds, default value 500 $mindragoffsettoslide: 20, //[optional] minimum drag offset trigger slide , default value 20 //$slidewidth: 200, //[optional] width of every slide in pixels, default value width of 'slides' container //$slideheight: 150, //[optional] height of every slide in pixels, default value height of 'slides' container $slidespacing: 3, //[optional] space between each slide in pixels, default value 0 $displaypieces: 1, //[optional] number of pieces display (the slideshow disabled if value set greater 1), default value 1 $parkingposition: 0, //[optional] offset position park slide (this options applys when slideshow disabled), default value 0. $uisearchmode: 0, //[optional] way (0 parellel, 1 recursive, default value 1) search ui components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc). $bulletnavigatoroptions: { //[optional] options specify , enable navigator or not $class: $jssorbulletnavigator$, //[required] class create navigator instance $chancetoshow: 2, //[required] 0 never, 1 mouse over, 2 $autocenter: 0, //[optional] auto center navigator in parent container, 0 none, 1 horizontal, 2 vertical, 3 both, default value 0 $steps: 1, //[optional] steps go each navigation request, default value 1 $lanes: 1, //[optional] specify lanes arrange items, default value 1 $spacingx: 10, //[optional] horizontal space between each item in pixel, default value 0 $spacingy: 0, //[optional] vertical space between each item in pixel, default value 0 $orientation: 1 //[optional] orientation of navigator, 1 horizontal, 2 vertical, default value 1 } }; nestedsliders.push(new $jssorslider$(containerid, nestedslideroptions)); }); var options = { $autoplay: false, //[optional] whether auto play, enable slideshow, alternative must set true, default value false $autoplaysteps: 1, //[optional] steps go each navigation request (this options applys when slideshow disabled), default value 1 $autoplayinterval: 2000, //[optional] interval (in milliseconds) go next slide since previous stopped if slider auto playing, default value 3000 $pauseonhover: 1, //[optional] whether pause when mouse on if slider auto playing, 0 no pause, 1 pause desktop, 2 pause touch device, 3 pause desktop , touch device, default value 1 $arrowkeynavigation: true, //[optional] allows keyboard (arrow key) navigation or not, default value false $slideduration: 300, //[optional] specifies default duration (swipe) slide in milliseconds, default value 500 $mindragoffsettoslide: 80, //[optional] minimum drag offset trigger slide , default value 20 //$slidewidth: 600, //[optional] width of every slide in pixels, default value width of 'slides' container //$slideheight: 150, //[optional] height of every slide in pixels, default value height of 'slides' container $slidespacing: 3, //[optional] space between each slide in pixels, default value 0 $displaypieces: 1, //[optional] number of pieces display (the slideshow disabled if value set greater 1), default value 1 $parkingposition: 0, //[optional] offset position park slide (this options applys when slideshow disabled), default value 0. $uisearchmode: 0, //[optional] way (0 parellel, 1 recursive, default value 1) search ui components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc). $playorientation: 2, //[optional] orientation play slide (for auto play, navigation), 1 horizental, 2 vertical, default value 1 $dragorientation: 0, //[optional] orientation drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value 1 (note $dragorientation should same $playorientation when $displaypieces greater 1, or parking position not 0), $thumbnailnavigatoroptions: { $class: $jssorthumbnailnavigator$, //[required] class create thumbnail navigator instance $chancetoshow: 2, //[required] 0 never, 1 mouse over, 2 $actionmode: 1, //[optional] 0 none, 1 deed click, 2 deed mouse hover, 3 both, default value 1 $autocenter: 3, //[optional] auto center thumbnail items in thumbnail navigator container, 0 none, 1 horizontal, 2 vertical, 3 both, default value 3 $lanes: 1, //[optional] specify lanes arrange thumbnails, default value 1 $spacingx: 0, //[optional] horizontal space between each thumbnail in pixel, default value 0 $spacingy: 0, //[optional] vertical space between each thumbnail in pixel, default value 0 $displaypieces: 3, //[optional] number of pieces display, default value 1 $parkingposition: 0, //[optional] offset position park thumbnail $orientation: 1, //[optional] orientation arrange thumbnails, 1 horizental, 2 vertical, default value 1 $disabledrag: false //[optional] disable drag or not, default value false } }; var jssor_slider1 = new $jssorslider$("slider1_container", options); function onmainsliderpark(currentindex, fromindex) { $.each(nestedsliders, function (index, nestedslider) { nestedslider.$pause(); }); settimeout(function () { nestedsliders[currentindex].$play(); }, 2000); } jssor_slider1.$on($jssorslider$.$evt_park, onmainsliderpark); onmainsliderpark(0, 0); //responsive code begin //you can remove responsive code if don't want slider scales while window resizes function scaleslider() { var bodywidth = document.body.clientwidth; if (bodywidth) jssor_slider1.$scalewidth(math.min(bodywidth, 960)); else window.settimeout(scaleslider, 30); } scaleslider(); $(window).bind("load", scaleslider); $(window).bind("resize", scaleslider); $(window).bind("orientationchange", scaleslider); //responsive code end }); </script> <!-- sliderh style begin --> <style> /* jssor slider bullet navigator skin 03 css */ /* .jssorb03 div (normal) .jssorb03 div:hover (normal mouseover) .jssorb03 .av (active) .jssorb03 .av:hover (active mouseover) .jssorb03 .dn (mousedown) */ .jssorb03 div, .jssorb03 div:hover, .jssorb03 .av { background: url(../img/b03.png) no-repeat; overflow:hidden; cursor: pointer; } .jssorb03 div { background-position: -5px -4px; } .jssorb03 div:hover, .jssorb03 .av:hover { background-position: -35px -4px; } .jssorb03 .av { background-position: -65px -4px; } .jssorb03 .dn, .jssorb03 .dn:hover { background-position: -95px -4px; } </style> <!-- sliderh style end --> <!-- jssor slider begin --> <!-- can move inline styles css file or css block. --> <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 960px; height: 400px; overflow: hidden; "> <!-- 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: #000; 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: 0px; top: 0px; width: 960px; height: 400px; overflow: hidden;"> <div> <div id="sliderh1_container" class="sliderh1" style="position: relative; top: 0px; left: 0px; width: 960px; height: 400px;"> <!-- slides container --> <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 960px; height: 400px; overflow: hidden;"> <div><img u="image" src="../img/landscape/05.jpg" /></div> <div><img u="image" src="../img/landscape/06.jpg" /></div> <div><img u="image" src="../img/landscape/07.jpg" /></div> <div><img u="image" src="../img/landscape/01.jpg" /></div> <div><img u="image" src="../img/landscape/02.jpg" /></div> <div><img u="image" src="../img/landscape/03.jpg" /></div> <div><img u="image" src="../img/landscape/04.jpg" /></div> </div> <!-- bullet navigator skin begin --> <!-- bullet navigator container --> <div u="navigator" class="jssorb03" style="position: absolute; bottom: 110px; right: 10px;"> <!-- bullet navigator item prototype --> <div u="prototype" style="position: absolute; width: 21px; height: 21px; text-align:center; line-height:21px; color:white; font-size:12px;"><numbertemplate></numbertemplate></div> </div> <!-- bullet navigator skin end --> </div> <div u="thumb"> <img src="holder.js/320x160"> <div class="title_back"></div> <div class="title"> landscape </div> </div> </div> <div> <div id="sliderh2_container" class="sliderh2" style="position: relative; top: 0px; left: 0px; width: 960px; height: 400px;"> <!-- slides container --> <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 960px; height: 400px; overflow: hidden;"> <div><img u="image" src="../img/motor/001.jpg" /></div> <div><img u="image" src="../img/motor/002.jpg" /></div> <div><img u="image" src="../img/motor/003.jpg" /></div> <div><img u="image" src="../img/motor/004.jpg" /></div> <div><img u="image" src="../img/motor/005.jpg" /></div> <div><img u="image" src="../img/motor/006.jpg" /></div> <div><img u="image" src="../img/motor/007.jpg" /></div> <div><img u="image" src="../img/motor/008.jpg" /></div> </div> <!-- bullet navigator skin begin --> <!-- bullet navigator container --> <div u="navigator" class="jssorb03" style="position: absolute; bottom: 110px; right: 10px;"> <!-- bullet navigator item prototype --> <div u="prototype" style="position: absolute; width: 21px; height: 21px; text-align:center; line-height:21px; color:white; font-size:12px;"><numbertemplate></numbertemplate></div> </div> <!-- bullet navigator skin end --> </div> <div u="thumb"> <img src="holder.js/320x160"> <div class="title_back"></div> <div class="title"> motor </div> </div> </div> <div> <div id="sliderh3_container" class="sliderh3" style="position: relative; top: 0px; left: 0px; width: 960px; height: 400px;"> <!-- slides container --> <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 960px; height: 400px; overflow: hidden;"> <div><img u="image" src="../img/photography/004.jpg" /></div> <div><img u="image" src="../img/photography/005.jpg" /></div> <div><img u="image" src="../img/photography/006.jpg" /></div> <div><img u="image" src="../img/photography/007.jpg" /></div> <div><img u="image" src="../img/photography/008.jpg" /></div> <div><img u="image" src="../img/photography/009.jpg" /></div> <div><img u="image" src="../img/photography/010.jpg" /></div> <div><img u="image" src="../img/photography/011.jpg" /></div> <div><img u="image" src="../img/photography/012.jpg" /></div> </div> <!-- bullet navigator skin begin --> <!-- bullet navigator container --> <div u="navigator" class="jssorb03" style="position: absolute; bottom: 110px; right: 10px;"> <!-- bullet navigator item prototype --> <div u="prototype" style="position: absolute; width: 21px; height: 21px; text-align:center; line-height:21px; color:white; font-size:12px;"><numbertemplate></numbertemplate></div> </div> <!-- bullet navigator skin end --> </div> <div u="thumb"> <img src="holder.js/320x160"> <div class="title_back"></div> <div class="title"> photography </div> </div> </div> </div> <!-- thumbnailnavigator skin begin --> <div u="thumbnavigator" class="jssort12" style="cursor: default; position: absolute; width: 960px; height: 100px; left:0px; bottom: 0px;"> <!-- thumbnail item skin begin --> <style> /* jssor slider thumbnail navigator skin 12 css */ /* .jssort12 .p (normal) .jssort12 .p:hover (normal mouseover) .jssort12 .pav (active) .jssort12 .pav:hover (active mouseover) .jssort12 .pdn (mousedown) */ .jssort12 .p img { filter: alpha(opacity=55); opacity: .55; transition: opacity .6s; -moz-transition: opacity .6s; -webkit-transition: opacity .6s; -o-transition: opacity .6s; } .jssort12 .pav img, .jssort12 .pav:hover img, .jssort12 .p:hover img { filter: alpha(opacity=100); opacity: 1; transition: none; -moz-transition: none; -webkit-transition: none; -o-transition: none; } .jssort12 .pav:hover img, .jssort12 .p:hover img { filter: alpha(opacity=70); opacity: .7; } .jssort12 .title, .jssort12 .title_back { position: absolute; top: 70px; left: 0px; width: 320px; height: 30px; line-height: 30px; text-align: center; color: #000; font-size: 20px; } .jssort12 .title_back { background-color: #fff; filter: alpha(opacity=50); opacity: .5; } .jssort12 .pav:hover .title_back, .jssort12 .p:hover .title_back { filter: alpha(opacity=40); opacity: .4; } .jssort12 .pav .title_back { background-color: #000; filter: alpha(opacity=50); opacity: .5; } .jssort12 .pav .title { color: #fff; } </style> <div u="slides" style="cursor: move;"> <div u="prototype" class=p style="position: absolute; width: 320px; height: 100px; top: 0; left: 0;"> <thumbnailtemplate style="width: 320px; height: 100px; border: none; position: absolute; top: 0; left: 0; "></thumbnailtemplate> </div> </div> <!-- thumbnail item skin end --> </div> <!-- thumbnailnavigator skin end --> <a style="display: none" href="http://www.jssor.com">slideshow html</a> </div> <!-- jssor slider end --></body> <script src="holder.js"></script> </html> ok so: - modified width 600px 960px , height 300px 400px. - modified thumbnail sizes 200x100 320x160 (320 because fit in 960 , 160 respect ratio). - had modify <div u="navigator"> bottom 110px instead of 10px. - used holder.js replace thumbnail images (place holder.js file @ same level of htlm file if want test using code).
use diff tool check difference between code , content of original nested-slider.source.html file.
hope helps!
javascript jquery css jssor
No comments:
Post a Comment