0

我有轮播，width=300px我height=300px
想显示模态并克隆所有轮播 dom 元素以查看它更大的内容，
每件事都按照我的意愿复制。
但是在单击下一个上一个按钮时，旧的轮播移动而不是模态中的那个我也改变id了新的轮播和href在新的轮播内部，但是仍然新的轮播在单击“下一个/上一个或指示器”时没有滚动 

$('#oldCarousel .item img').click(function(){
    var carousel = $(this).parents('#oldCarousel');
    carousel.attr('id','NewCarousel');
    carousel.find('a[href="#oldCarousel"]').attr('href','#NewCarousel');
    $('#myModal .modal-dialog').html(carousel.clone());
    //$('#myModal .modal-content,#myModal .item,#myModal .modal-dialog').css({'width':'95%','height':'95%','max-height':'95%'});
    $('#myModal .modal-dialog').css('padding','0px');
    $('#myModal').modal('show');
    $('#NewCarousel').carousel().carousel(0);
});

这是 jsfiddle 链接：https ://jsfiddle.net/yo0gxtd9/

4

2 回答 2

0

如果你只是想让你的轮播更大，调整width和height使用一些 CSS 类不是更好吗？

JS：

var elements = $("#oldCarousel").add("#oldCarousel .item img");

$('#oldCarousel .item img').click(function(){
    elements.toggleClass("fullscreen");
});

CSS：

   .fullscreen {
      width: 100vw;
      height: 100vh;
    }

    img.fullscreen {
      min-width: 100vw;
      min-height: 100vh;
      width: auto;
      height: auto;
    }

请检查小提琴： https ://jsfiddle.net/yo0gxtd9/3/

于 2016-11-28T14:32:30.863 回答
0

以下是我注意到并在此处提供此解决方案的几个问题：

  • e.stopImmediatePropagation()- 单击图像时需要停止事件冒泡到其父级，以便carousel单击时不会滚动image
  • carousel.clone()- 您正在更改carousel属性，这会影响原始属性，然后html在使用clone. 这导致两者carousel变得相同attributes/id。所以你需要克隆first and then change the属性值`。

以下是您的代码的更新版本。

$('#oldCarousel .item img').click(function(e){
    e.stopImmediatePropagation(); //stops event being propagated to its parent
    var carousel = $(this).parents('#oldCarousel').clone(); //clone it and then change attributes
    carousel.attr('id','NewCarousel');
    carousel.find('a[href="#oldCarousel"]').attr('href','#NewCarousel');
    $('#myModal .modal-dialog').html(carousel); //attach the cloned version
    $('#myModal .modal-dialog').css('padding','0px');
    $('#myModal').modal('show');
    $('#NewCarousel').carousel().carousel(0);
});

这是更新的小提琴

于 2016-11-29T05:36:33.503 回答