jQuery uncaught error about slider

[jssor]

please remove the following line,
var jssor_slider1 = $('#slider1_container').data('jssorSlider');

[jssor]

Hi Artur,

please remove the following line,

var jssor_slider1 = $('#slider1_container').data('jssorSlider');

Regards,

Jssor

From: Artur [mailto:[email protected]]
Sent: Thursday, April 03, 2014 03:17
To: jssor/slider.js
Subject: [slider.js] jQuery uncaught error (#6)

Hi,

I'm trying to configurate the slider from the 0 and I ran into some issues.

I hope you can tell me what is causing them.

I'm fallowing your documentation to configure it and I'm trying to make it responsive.

But in the process I get this error:
Uncaught TypeError: Cannot call method '$SetScaleWidth' of undefined

Could you please take a look at my test page and tell me why this is happening?

Here is the link:
http://www.turdidesigns.com/es/testing-page

Thank you,

—
Reply to this email directly or view it on GitHub #6 . https://github.com/notifications/beacon/5205605__eyJzY29wZSI6Ik5ld3NpZXM6QmVhY29uIiwiZXhwaXJlcyI6MTcxMjA4NTQwMywiZGF0YSI6eyJpZCI6MjkxMjg3MTJ9fQ==--2641d5b56b1b0b9a78a7e3758081d25def7e4e07.gif

[epiblue]

Perfect! That worked !!!

Thanks a lot, now I will continue configurating and I'll contact you if I'll need further help!

Again, Thank you very much! I love the flexibility of the slider and I really looking forward to configurate it to my needs!

Best wishes!

[jssor]

Great!

Please feel free to contact if you need any help.

From: Artur [mailto:[email protected]]
Sent: Thursday, April 03, 2014 15:32
To: jssor/slider.js
Cc: jssor
Subject: Re: [slider.js] jQuery uncaught error (#6)

Perfect! That worked !!!

Thanks a lot, now I will continue configurating and I'll contact you if I'll need further help!

Again, Thank you very much! I love the flexibility of the slider and I really looking forward to configurate it to my needs!

Best wishes!

—
Reply to this email directly or view it on GitHub #6 (comment) . https://github.com/notifications/beacon/5205605__eyJzY29wZSI6Ik5ld3NpZXM6QmVhY29uIiwiZXhwaXJlcyI6MTcxMjEyOTUzOSwiZGF0YSI6eyJpZCI6MjkxMjg3MTJ9fQ==--ddbc1ebef4a0bae3ff5beda7fadbd667f1ad59d0.gif

[epiblue]

Can you please take a look,

I try to add captions and not working, I can't understand why... Again, following your documentation...

http://www.turdidesigns.com/es/testing-page

Slider stops working when I add a div with u="caption"

Sorry,

Thanks,

[jssor]

jQuery(document).ready(function ($) {  
    //define random caption transitions, if a caption specifies '*' as transition,
    //it will choose transition randomly every time from following transition array
    var _CaptionTransitions = [{$Duration:900,$FlyDirection:1,$Easing:{$Left:$JssorEasing$.$EaseInOutSine},$ScaleHorizontal:0.6,$Opacity:2}];
    //use following line instead if there is no caption plays random transition
    _CaptionTransitions["transtion_name1"] = {$Duration:900,$FlyDirection:1,$Easing:{$Left:$JssorEasing$.$EaseInOutSine},$ScaleHorizontal:0.6,$Opacity:2};

    var options = {
        $CaptionSliderOptions: {
            $Class: $JssorCaptionSlider$,
            $CaptionTransitions: _CaptionTransitions,
            $PlayInMode: 1,
            $PlayOutMode: 3
        }
    };

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.$SetScaleWidth(parentWidth);
        }
        else
            window.setTimeout(ScaleSlider, 30);
    }
    //Scale slider after document ready
    ScaleSlider();
    if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
        //Capture window resize event
        $(window).bind('resize', ScaleSlider);
    }
    //responsive code end 
});

[epiblue]

Now I get

jssor_slider1_starter is undefined...

:(

[epiblue]

any ideas? And suggestion to avoid it in the future?

[jssor]

highly recommended that develop your slider separately.

develop your slider in a simple page, and then insert it into your page.

btw, the following code is not necessary,

<script>
$(function(){
jssor_slider1_starter('slider1_container');
});</script>

[epiblue]

OK, I have decided to develop it on my local machine.

BUT the problem is the same! It's not working.

Can you help, because I'm fallowing your documentation and it simply doesn't work...

Here is my code:

<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://www.turdidesigns.com/templates/epiblue/js/jquery-1.10.2.min.js"></script>
<script src="http://www.turdidesigns.com/templates/epiblue/js/jssor-slider/jssor.slider.mini.js"></script>
</head>
<body>
<div>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 1200px; height: 300px; overflow: hidden;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 1200px; height: 300px;">
        <div>
          <img u="image" src="http://www.turdidesigns.com/images/covers/contacto.jpg" />
          <div u="caption" t="transition_name1" style="position: absolute; top: 30px; left: 30px; width: 50px;height: 50px;">
        </div>
        <div><img u="image" src="http://www.turdidesigns.com/images/covers/diseno-web.jpg" /></div>
    </div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {  
    //define random caption transitions, if a caption specifies '*' as transition,
    //it will choose transition randomly every time from following transition array
    var _CaptionTransitions = [{$Duration:900,$FlyDirection:1,$Easing:{$Left:$JssorEasing$.$EaseInOutSine},$ScaleHorizontal:0.6,$Opacity:2}];
    //use following line instead if there is no caption plays random transition
    _CaptionTransitions["transtion_name1"] = {$Duration:900,$FlyDirection:1,$Easing:{$Left:$JssorEasing$.$EaseInOutSine},$ScaleHorizontal:0.6,$Opacity:2};

    var options = {
        $CaptionSliderOptions: {
            $Class: $JssorCaptionSlider$,
            $CaptionTransitions: _CaptionTransitions,
            $PlayInMode: 1,
            $PlayOutMode: 3
        }
    };

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.$SetScaleWidth(parentWidth);
        }
        else
            window.setTimeout(ScaleSlider, 30);
    }
    //Scale slider after document ready
    ScaleSlider();
    if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
        //Capture window resize event
        $(window).bind('resize', ScaleSlider);
    }
    //responsive code end 
});
</script>
</body>
</html>

It does respond to the screen, but nothing else works... I can't understand why.

And there are no errors in the console... I don't get it.

[jssor]

Hi Artur,

Wrong slides html definition, you defined only one slide as follows,

        <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 1200px; height: 300px;">

            <div>

                <img u="image" src="http://www.turdidesigns.com/images/covers/contacto.jpg" />

                <div u="caption" t="transition_name1" style="position: absolute; top: 30px; left: 30px; width: 50px;height: 50px;">

                </div>

                <div><img u="image" src="http://www.turdidesigns.com/images/covers/diseno-web.jpg" /></div>

            </div>

        </div>

It works when I change it to follows,

        <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 1200px; height: 300px;">

            <div>

                <img u="image" src="http://www.turdidesigns.com/images/covers/contacto.jpg" />

                <div u="caption" t="transition_name1" style="position: absolute; top: 30px; left: 30px; width: 50px;height: 50px;">

                </div>

            </div>

            <div><img u="image" src="http://www.turdidesigns.com/images/covers/diseno-web.jpg" /></div>

        </div>

That’s to say, there must be at least 2 slides to make the slider work.

Regards,

Jssor

From: Artur [mailto:[email protected]]
Sent: Thursday, April 10, 2014 18:07
To: jssor/slider.js
Cc: jssor
Subject: Re: [slider.js] jQuery uncaught error (#6)

OK, I have decided to develop it on my local machine.

BUT the problem is the same! It's not working.

Can you help, because I'm fallowing your documentation and it simply doesn't work...

Here is my code:

<script type="text/javascript" src="http://www.turdidesigns.com/templates/epiblue/js/jquery-1.10.2.min.js"></script> <script src="http://www.turdidesigns.com/templates/epiblue/js/jssor-slider/jssor.slider.mini.js"></script>

<script type="text/javascript"> jQuery(document).ready(function ($) { //define random caption transitions, if a caption specifies '*' as transition, //it will choose transition randomly every time from following transition array var _CaptionTransitions = [{$Duration:900,$FlyDirection:1,$Easing:{$Left:$JssorEasing$.$EaseInOutSine},$ScaleHorizontal:0.6,$Opacity:2}]; //use following line instead if there is no caption plays random transition _CaptionTransitions["transtion_name1"] = {$Duration:900,$FlyDirection:1,$Easing:{$Left:$JssorEasing$.$EaseInOutSine},$ScaleHorizontal:0.6,$Opacity:2}; var options = { $CaptionSliderOptions: { $Class: $JssorCaptionSlider$, $CaptionTransitions: _CaptionTransitions, $PlayInMode: 1, $PlayOutMode: 3 } }; 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.$SetScaleWidth(parentWidth); } else window.setTimeout(ScaleSlider, 30); } //Scale slider after document ready ScaleSlider(); if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) { //Capture window resize event $(window).bind('resize', ScaleSlider); } //responsive code end }); </script>

—
Reply to this email directly or view it on GitHub #6 (comment) . https://github.com/notifications/beacon/5205605__eyJzY29wZSI6Ik5ld3NpZXM6QmVhY29uIiwiZXhwaXJlcyI6MTcxMjc0MzU5MiwiZGF0YSI6eyJpZCI6MjkxMjg3MTJ9fQ==--c29011faaa591cc8c5258d32afbdb6de68419f83.gif