плагин owl carousel не работает внутри клика по событию

мне нужно инициализировать карусель совы внутри события щелчка, как следующий код, он работает в первый раз, когда я нажимаю, но когда я нажимаю его снова (на элементе div события), он просто не работает. как я могу это сделать? есть ли способ сбросить карусель совы?

Я добавил свой полный код в последнюю часть этого поста, чтобы лучше понять мой pb и протестировать его.

Не могли бы вы помочь мне в этом? Мне это очень нужно.

заранее спасибо,

CAFC

исходная карусель совы: http://owlgraphic.com/owlcarousel/demos/customJson.html

$('#XX').click(function(e) {

    e.PreventDefault;

    $("#owl-demo").owlCarousel({
        jsonPath: 'json/customData2.json',
        jsonSuccess: customDataSuccess
    });

    function customDataSuccess(data) {

        var content = "";
        for (var i in data["items"]) {

            var img = data["items"][i].img;
            var alt = data["items"][i].alt;

            content += "<img src=\"" + img + "\" alt=\"" + alt + "\">"
        }

        $("#owl-demo").html(content);
    }

});

мой полный код:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Owl Carousel - Dynamic content via JSON</title>

    <!-- Owl Carousel Assets -->
    <link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="../owl-carousel/owl.theme.css" rel="stylesheet">


    <script src="../assets/js/jquery-1.9.1.min.js"></script>
    <script src="../owl-carousel/owl.carousel.js"></script>


    <!-- Demo -->

    <style>
        #owl-demo .item {
            background: #a1def8;
            padding: 10px 0px;
            display: block;
            margin: 5px;
            color: #FFF;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            text-align: center;
        }
    </style>


    <script>
        $(document).ready(function() {



            $('#XX').click(function(e) {


                $("#owl-demo").owlCarousel({
                    jsonPath: 'json/customData2.json',
                    jsonSuccess: customDataSuccess
                });

                function customDataSuccess(data) {



                    var content = "";
                    for (var i in data["items"]) {

                        var img = data["items"][i].img;
                        var alt = data["items"][i].alt;

                        content += "<img src=\"" + img + "\" alt=\"" + alt + "\">"
                    }

                    $("#owl-demo").html(content);
                }



            });




        });
    </script>




</head>

<body>


    <div id="owl-demo"></div>

    <div id='XX'>Click HERE!</div>

</body>

</html>

javascript carousel jquery owl-carousel
person cafc    schedule 06.08.2014    source источник
comment
Пожалуйста, читайте описания тегов, когда добавляете теги к своим вопросам. Тег owl относится к OWL, языку веб-онтологий. Вы должны были пометить это тегом owl-carousel. Я исправил это для вас, а также добавил javascript.   -  person Joshua Taylor    schedule 07.08.2014

Ответы (1)


arrow_upward
0
arrow_downward

Вот:

JS:

$(document).ready(function () {
    var owl = false;
    $('#XX').click(function (e) {
        if (owl) {
            $("#owl-demo").data('owlCarousel').reinit({
                jsonPath: '/echo/json',
                jsonSuccess: customDataSuccess
            });
        } else {
            owl = true;
        }
        $("#owl-demo").owlCarousel({
            jsonPath: '/echo/json',
            jsonSuccess: customDataSuccess
        });

        function customDataSuccess(data) {
            console.log('loading Data');

            data = testJSON;

            var content = "";
            for (var i in data["items"]) {

                var img = data["items"][i].img;
                var alt = data["items"][i].alt;

                content += "<img src=\"" + img + "\" alt=\"" + alt + "\">";
            }

            $("#owl-demo").html(content);
        }
    });
});

Методы reinit находятся в нижней части документации в разделе 5. Owl Data methods.

Демонстрация: http://jsfiddle.net/robschmuecker/pLvdx8xx/

person Rob Schmuecker    schedule 06.08.2014