Rectangle 27 0

var nestedSliders = [];

        $.each(["sliderh1_container", "sliderh2_container", "sliderh3_container", "sliderh4_container"], function (index, value) {

            var sliderhOptions = {
                $PauseOnHover: 0,                               //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 3
                $AutoPlaySteps: 4,                                  //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
                $SlideDuration: 300,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
                $MinDragOffsetToSlide: 20,                          //[Optional] Minimum drag offset to trigger slide , default value is 20
                $SlideWidth: 200,                                   //[Optional] Width of every slide in pixels, default value is width of 'slides' container
                //$SlideHeight: 150,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
                $SlideSpacing: 3,                                   //[Optional] Space between each slide in pixels, default value is 0
                $DisplayPieces: 4,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
                $ParkingPosition: 0,                              //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
                $UISearchMode: 0,                                   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).

                $BulletNavigatorOptions: {                                //[Optional] Options to specify and enable navigator or not
                    $Class: $JssorBulletNavigator$,                       //[Required] Class to create navigator instance
                    $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                    $AutoCenter: 0,                                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                    $Steps: 1,                                      //[Optional] Steps to go for each navigation request, default value is 1
                    $Lanes: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
                    $SpacingX: 0,                                   //[Optional] Horizontal space between each item in pixel, default value is 0
                    $SpacingY: 0,                                   //[Optional] Vertical space between each item in pixel, default value is 0
                    $Orientation: 1                                 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
                }
            }
            var jssor_sliderh = new $JssorSlider$(value, sliderhOptions);

            nestedSliders.push(jssor_sliderh);
        });

        $("#sliderh1_container").mouseenter(function () {
            nestedSliders[0].$Play();
        });

        $("#sliderh1_container").mouseleave(function () {
            nestedSliders[0].$Pause();
        });

jquery - Jssor Slider: How to target specific Child Slide - Stack Over...

jquery jssor
Rectangle 27 0

Jssor Slider will stop 'click' event from firing if there is successful drag operation. But I am not sure if the fancy box will capture the 'click' event before jssor slider.

<script>

    jQuery(document).ready(function ($) {
        var options = {

            $AutoPlay: true,                                   //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $DragOrientation: 1                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
        };

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);

        function SliderClickEventHandler(slideIndex, event) {
            //open fancy box
        }

        jssor_slider1.$On($JssorSlider$.$EVT_CLICK, SliderClickEventHandler);
    });
</script>

I can see how this works, The trouble I am having is that I need to parse the image source to the fancybox control. Is this possible?

Also, this means the arrows no longer work.

You can determine the image source by the parameter 'slideIndex'

jquery - How can I make JSSOR Slider have clickable images without bre...

jquery jssor
Rectangle 27 0

<script>
    jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_START, function(position, virtualPosition){});
    jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_END, function(position, virtualPosition){});
</script>

Wow, thank you for being so responsive to questions about Jssor; that's great! I looked through the Jssor API, but as a beginner, I don't really understand what I need to do. Do you have example code somewhere for tracking swipes using the API so I can try and figure it out?

javascript - Use Jssor slider to sort images and display results - Sta...

javascript jquery slider jssor
Rectangle 27 0

the post you referred is full screen slider, you may just need a full screen slider.

This definitely was the issue, I tried to get away with the minimal code but when I used the full code from the demo you suggested it worked perfect!

jquery - JSSOR slider will not stay positioned properly - Stack Overfl...

jquery html css jssor
Rectangle 27 0

//slider cluster controller code begin
        function SliderCluster(mainSlider, autoPlayInterval) {
            var _Self = this;
            var _NestedSliders = [];
            var _NestedSliderCurrent;

            var _CaptionInCounter = 0;

            function OnChildSliderStateChange(currentIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd) {
                if (progress == idleBegin) {
                    if (!(++_CaptionInCounter % 4)) {

                        _NestedSliderCurrent && _NestedSliderCurrent.$Pause();

                        mainSlider.$Play(true);
                    }
                }
            }

            function OnMainSliderStateChange(currentIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd) {

                _NestedSliderCurrent = _NestedSliders[currentIndex];

                if (_NestedSliderCurrent) {
                    if (progress == idleBegin) {

                        mainSlider.$Pause();
                        _NestedSliderCurrent.$Play(true);
                    }
                    else if (progress == progressBegin) {
                        _CaptionInCounter = 0;
                        mainSlider.$Play(true);
                    }
                }
            }

            function OnMainSliderSwipeStart(position, virtualPosition) {
                _NestedSliderCurrent && _NestedSliderCurrent.$Pause();
                mainSlider.$Pause();
            }

            function OnMainSliderPark(slideIndex, fromIndex) {
                _CaptionInCounter = 0;
                mainSlider.$Play();
            }

            _Self.$AddChildSlider = function (childSlider, slideIndex) {
                _NestedSliders[slideIndex] = childSlider;
                childSlider.$On($JssorSlider$.$EVT_STATE_CHANGE, OnChildSliderStateChange);
            };

            _Self.$Start = function () {
                mainSlider.$On($JssorSlider$.$EVT_PARK, OnMainSliderPark);
                mainSlider.$On($JssorSlider$.$EVT_STATE_CHANGE, OnMainSliderStateChange);
                mainSlider.$On($JssorSlider$.$EVT_SWIPE_START, OnMainSliderSwipeStart);

                mainSlider.$Play(true);
            }
        }

        var sliderCluster = new SliderCluster(jssorSliderc);
        sliderCluster.$AddChildSlider(jssorSlider1, 0);
        sliderCluster.$AddChildSlider(jssorSlider2, 1);
        sliderCluster.$AddChildSlider(jssorSlider3, 2);
        sliderCluster.$Start();

        //slider cluster controller code end

jquery - Jssor (Slider Cluster): How to disable AutoPlay? - Stack Over...

jquery jssor
Rectangle 27 0

To scale jssor slider, it will always keep aspect ratio. You cannot scale with without scaling height.

If you want to keep the original height, you can disable scaling by removing the following code.

function ScaleSlider() {
        var parentWidth = $('#slider1_container').parent().width();
        if (parentWidth) {
            jssor_slider1.$ScaleWidth(parentWidth);
        }

        else
            $JssorUtils$.$Delay(ScaleSlider, 30);
    }

    ScaleSlider();
    $(window).bind("load", ScaleSlider);
    $(window).bind("resize", ScaleSlider);
    $(window).bind("orientationchange", ScaleSlider);

In addition, to keep your page responsive and keep the slider auto center, you can wrap the slider by a wrapper.

<div style="position: relative; width: 100%; overflow: hidden;">
    <div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;">

        <!-- use 'margin: 0 auto;' to auto center element in parent container -->
        <div id="slider1_container" style="...margin: 0 auto;..." ...>
        </div>

    </div>
</div>

javascript - Is it possible to have full width JSSOR slider with fixed...

javascript jquery css slider jssor
Rectangle 27 0

If you use jquery version, jssor slider will initialize and format ui after document load. Before the initialization, it keeps the original look of the raw html.

To modify the look of raw html, you can specify 'position: absolute; top: ...px; left: ...px;' for any slide/thumbnail to show/hide it.

The following code will show first slide and hide other slides. And you can hide thumbnails before the initialization by style 'position: absolute; top: 0px; left: -300px;'.

<!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 970px; 
            height: 255px; overflow: hidden;">
            <div style="position: absolute; top: 0px; left: 0px;">
                <img src="/includes/jssor/country_en_nolink.jpg" alt="description" style="position: absolute; top: 0px; left: 0px; width: 970px; height: 255px;" />
                <img style="position: absolute; top: 0px; left: -300px;" u="thumb" src="/includes/jssor/country_en_nolink_thumb.jpg" />
            </div>
            <div style="position: absolute; top: -255px; left: 0px;">
                <a href="/pb/index.html"><img src="/includes/jssor/KM-Banner-970x255.jpg" alt="description 2" style="position: absolute; top: 0px; left: 0px; width: 970px; height: 255px;" /></a>
                <img style="position: absolute; top: 0px; left: -300px;" u="thumb" src="/includes/jssor/KM-Banner-970x255-thumb.jpg" />
            </div>
        </div>

Thank you very much for making Jssor Slider the most useful, easiest to use responsive slider I've seen, and for letting me know how to avoid showing the last slide first. I especially value the many useful, well documented code samples.

jquery - Jssor - how to prevent last slide showing briefly on load? - ...

jquery jssor
Rectangle 27 0

function ScaleSlider() {
        var parentWidth = jssor_slider2.$Elmt.parentNode.clientWidth;
        if (parentWidth)
            jssor_slider2.$ScaleWidth(Math.min(parentWidth, 1024));
        else
            window.setTimeout(ScaleSlider, 30);
    }

    ScaleSlider();
    $(window).bind("load", ScaleSlider);
    $(window).bind("resize", ScaleSlider);
    $(window).bind("orientationchange", ScaleSlider);

jquery - JSSOR slider not resizing properly in iOS when rotating devic...

jquery ios resize device-orientation jssor
Rectangle 27 0

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Slider with Slideshow Example - Jssor Slider, Slideshow with Javascript Source Code</title>
</head>
<body style="background:#fff; margin: 0px; overflow: hidden;">
    <!-- it works the same with all jquery version from 1.x to 2.x -->
    <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
    <!-- use jssor.slider.mini.js (39KB) or jssor.sliderc.mini.js (31KB, with caption, no slideshow) or jssor.sliders.mini.js (26KB, no caption, no slideshow) instead for 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 ($) {
            //Reference http://www.jssor.com/development/slider-with-slideshow-jquery.html
            //Reference http://www.jssor.com/development/tool-slideshow-transition-viewer.html

            var _SlideshowTransitions = [
            //Fade
            { $Duration: 1200, x: 1, $Delay: 50, $Cols: 8, $Rows: 4, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseOutQuad }, $Opacity: 2 }
            ];

            var options = {
                $SlideDuration: 800,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
                $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
                $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                $AutoPlayInterval: 1500,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
                $SlideshowOptions: {                                //[Optional] Options to specify and enable slideshow or not
                    $Class: $JssorSlideshowRunner$,                 //[Required] Class to create instance of slideshow
                    $Transitions: _SlideshowTransitions,            //[Required] An array of slideshow transitions to play slideshow
                    $TransitionsOrder: 1,                           //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
                    $ShowLink: true                                    //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
                }
            };

            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 windowWidth = $(window).width();

                if (windowWidth) {
                    var windowHeight = $(window).height();
                    var originalWidth = jssor_slider1.$OriginalWidth();
                    var originalHeight = jssor_slider1.$OriginalHeight();

                    var scaleWidth = windowWidth;
                    if (originalWidth / windowWidth > originalHeight / windowHeight) {
                        scaleWidth = Math.ceil(windowHeight / originalHeight * originalWidth);
                    }

                    jssor_slider1.$ScaleWidth(scaleWidth);
                }
                else
                    window.setTimeout(ScaleSlider, 30);
            }

            ScaleSlider();

            $(window).bind("load", ScaleSlider);
            $(window).bind("resize", ScaleSlider);
            $(window).bind("orientationchange", ScaleSlider);
            //responsive code end
        });


    </script>

    <div style="position: relative; width: 100%; overflow: hidden;">
        <div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;">
            <!-- Jssor Slider Begin -->
            <!-- You can move inline styles to css file or css block. -->
            <div id="slider1_container" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 600px; height: 300px;">

                <!-- 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: 600px;  height: 300px;
            overflow: hidden;">
                    <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>
                <a style="display: none" href="http://www.jssor.com">jquery content slider</a>
            </div>

        </div>
    </div>
</body>
</html>

jssor slider transition dont work - Stack Overflow

slider transition jssor
Rectangle 27 0

Will the following codes work?

function OnSlidePark(slideIndex, fromIndex) {
    switch (slideIndex) {
        case 0:
            $('#i1').attr('src', '');
            $('#i1').attr('src', imagen1.src);
            break;
        case 1:
            $('#i2').attr('src', '');
            $('#i2').attr('src', imagen2.src);
            break;
        case 2:
            $('#i3').attr('src', '');
            $('#i3').attr('src', imagen3.src);
            break;
    }
}

Nope, it's the same. I tried to do the same without the slider and it works, so i think that must be a property or something required in jssor to do this change of images, but i don't know how

Does the gif image show? Or it would not rewind the gif animation to the beginning when the src is reset?

If i put the src in the html it's shown correctly, but leaving the src without path makes the slider show only the alt attribute at each image, but i cannot reset the images in that two cases

Please check the image element by 'inspect element' to see if the src is assigned correctly.

Also, please try your code to assign the src to any image element which is not in slider.

javascript - Jssor refreshing .gif - Stack Overflow

javascript jquery slider gif jssor
Rectangle 27 0

Please specify position, top and left for the element.

<div style="position: absolute; top: 0px; left: 0px; color:white;font-size:200%;">THIS TEXT WILL SHOW UP IN IE 11</div>

jquery - jssor slider missing content in IE but ok in Chrome - Stack O...

jquery slider jssor
Rectangle 27 0

<!DOCTYPE html> 
<html> 
    <head>
    <meta name="viewport" content="width=device-width">
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jssor.slider.mini.js"></script>
</head> 

<body> 
    <div id="main">
       <h1>Swipe right for yes and left for no.</h1>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 300px; height: 600px; overflow: hidden;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 300px; height: 600px;">
        <div><img src="{{ STATIC_URL }}images/indian.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/hamburger.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/italian-pizza.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/hummus.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/pie.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/montecristo.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/eclairs.jpg" alt="" title=""/></div> 
    </div> 
    <script>jssor_slider1_starter('slider1_container');</script>
</div>
    </div> 
<script>
    jQuery(document).ready(function ($) {
        var options = {
            $FillMode: 4,
        };                            
        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();
        $(window).bind("load", ScaleSlider);
        $(window).bind("resize", ScaleSlider);
        $(window).bind("orientationchange", ScaleSlider);
        //responsive code end
    });
</script>
</body>
</html>

Unfortunately the images are still too zoomed in, even with this exact code copied and pasted.

I was able to get it by adding: '<style> #slider1_container img { max-width:100%; max-height:100%; } </style>'

javascript - Jssor Images Too Zoomed In - Stack Overflow

javascript jquery slider jssor
Rectangle 27 0

<script>
    jQuery(document).ready(function ($) {
        var options = {
            $FillMode: 4,
        };                            
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);

        //swipe handling begin
        var swipeStartPosition
        function OnSwipeStart(position, virtualPosition)
        {
            lastSwipePosition = virtualPosition;
        }

        function OnSwipeEnd(position, virtualPosition)
        {
            if(virtualPosition > swipeStartPosition)
            {
                //swipe to left end, do something here
                //var currentSlideIndex = jssor_slider1.$CurrentIndex();
            }
            else
            {
                //swipe to right end, do something here
                //var currentSlideIndex = jssor_slider1.$CurrentIndex();
            }
        }
        jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_START, OnSwipeStart);
        jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_END, OnSwipeEnd);
        //swipe handling end

        //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();
        $(window).bind("load", ScaleSlider);
        $(window).bind("resize", ScaleSlider);
        $(window).bind("orientationchange", ScaleSlider);
        //responsive code end
    }
</script>

Jssor, I tried and tried to get your code working, but there seem to be several problems. The variable 'swipeStartPosition' doesn't have a definition, so I tried setting it to 0 without effect. 'position' and 'virtualPosition' look to have the exact same value at all times, so comparing them does nothing. Putting an alert after 'if(virtualPosition > swipeStartPosition)' causes two alerts for some reason. '$CurrentIndex()' doesn't work for pushing the image to an array.

sorry, there is a mistake. please replace lastSwipePosition with swipeStartPosition

javascript - Use Jssor slider to sort images and display results - Sta...

javascript jquery slider jssor
Rectangle 27 0

There is an option $StartIndex which enables you display a specified slide of a slider at the beginning.

var options = {
    ...
    $StartIndex: lastviewed_slide_index,    //Index of slide to display when initialize, default value is 0
    ...
};

Given the nested slider example, you can use the following statements to retrieve last viewed index.

var main_slider_lastviewed_index = jssor_slider1.$CurrentIndex();
var child_slider_lastviewed_index = nestedSliders[main_slider_lastviewed_index].$CurrentIndex();

When I put mentioned code than all slider stops working. I can see only first main image. Does lastviewed_slide_index is built in function ?

Thank you for right direction. If I would be the coder, probably I would complete this task quickly. Unfortunatelly I don't have an idea how to use your feedback. If you would be so kind, I would be very thanfull for more details. I believe that this would help aslo to the others.

You can use url parameter or cookie to do this job.

javascript - JSSOR - keep current slider position after every web page...

javascript jquery slider jssor
Rectangle 27 0

Thank you for further step direction. I spend a lot of time trying and looking for working examples but still with no luck.

I am not sure if url parameters are better than cookies but I have found some example regarding url parameters. Maybe there is somebody who would know how can I use it in my case ... If it would be easier, than it would be enought to keep at least main slider id and start main slider after web page refresh.

URL Paramets code which I found but I don't know how implement to Jssor slider:

$.urlParam = function(name){
var results = new RegExp('[\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
return results[1] || 0;
}

// example.com?param1=name&amp;param2=&amp;id=6
$.urlParam('param1'); // name
$.urlParam('id');        // 6
$.urlParam('param2');   // null

//example params with spaces
http://www.jquery4u.com?city=Gold Coast
console.log($.urlParam('city'));  
//output: Gold%20Coast

console.log(decodeURIComponent($.urlParam('city')));  
//output: Gold Coast

//This could be used for example to set the default value of a text input field:
 $('#city').val(decodeURIComponent($.urlParam('city')));

javascript - JSSOR - keep current slider position after every web page...

javascript jquery slider jssor
Rectangle 27 0

Given 2 captions locate at the same position, one covers the other then.

Using the JSSOR Slider with jquery - Force Caption Playout prior to Ne...

jquery slider