为什么jquery插件在执行后没有重复

时间:2014-10-10 14:50:18

标签: javascript jquery

当用户已经有一次尝试时,我很难找到重复操作的解决方案。例如,当用户到达现场时,可以滑动,滑动并最终打开旋转木马以便看到完整的画廊。我已设法做到这一点,但当用户进行此操作并关闭模态框时,他无法重复相同的操作。任何人都知道如何解决它?

这是js

$(document).ready(function () {
    // - jQuery

    // Swipe feature
    $('#myCarousel').swiperight(function () {
        $('#myCarousel').carousel('prev');
    });
    $('#myCarousel').swipeleft(function () {
        $('#myCarousel').carousel('next');
    });

    // Swipe feature for modal
    $('#modal-carousel').swiperight(function () {
        $('#modal-carousel').carousel('prev');
        console.log('swipe_right');
    });
    $('#modal-carousel').swipeleft(function () {
        $('#modal-carousel').carousel('next');
        console.log('swipe_left');
    });

    // Additional toolbar with "close" button appears
    $(window).on('shown.bs.modal', function () {
        $('modal').modal('show');
        $('#toolbar').css('display', 'block'); //.css('position','fixed')
        $('.carousel-inner').css('overflow', 'visible');
        // Remove entirely in final version
        $('.item').css('background', 'none')
        console.log('fires toolbar');
    });

    $(window).on('hidden.bs.modal', function () {
        $('modal').modal('show');
        $('#toolbar').css('display', 'none'); //.css('position','absolute')
        $('.carousel-inner').css('overflow', 'hidden');
        // Remove entirely in final version
        $('.item').css('background', '#60b1ff')
        console.log('closes toolbar when modal is closed');
    });

    // Closes modal on toolbar
    $('.trigger').click(function () {
        $('.modal').modal('hide');
    });

    /* Modal Carousel from version 3. adjusted to version 2.3 */

    /* activate the carousel */
    $("#modal-carousel").carousel({
        interval : false,
    });

    /* when clicking a image */
    $(".thumbnail").click(function () {
        var content = $(".carousel-inner");

        content.empty();

        var id = this.id;
        var repo = $('#img-repo .item');
        var repoCopy = repo.filter('#' + id).clone();
        var active = repoCopy.first();
        var next = repoCopy.last();

        active.addClass('active');

        content.append(repoCopy);

        // show the modal
        $('#modal-gallery').modal('show');

    });

    // Carousel pause - prevents automatic slideshow
    $('.carousel').carousel({
        pause : true,
        interval : false
    });

    // Close window
    $('.modal-backdrop').modal({
        show : false
    });

}); //end of script

问题出在content.empty();,执行后的操作保持为空。任何想法如何解决这个问题?

Fiddle

Fiddle 2 with working carousel. Just imagine that you are able to open one of those images in modal.

0 个答案:

没有答案