變化引導輪播ID

我有旋轉木馬與width=300px和height=300px
我想顯示模式和克隆所有轉盤DOM元素進行查看大
因爲我想每一件事情被複制。
但點擊下一個先前按鈕老轉盤移動不是一個模態我也改變了新的轉盤id和href內新的旋轉木馬，但仍然是新的旋轉木馬是不是滾動上點擊「下一個/上或指標」變化引導輪播ID

$('#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/

來源

2016-11-28 alamnaryab

你能不能添加一個'fiddle'並張貼一些HTML？ –

https://jsfiddle.net/yo0gxtd9/ – alamnaryab

如果你只是想使你的旋轉木馬做大，是不是更好用，例如一些CSS類調整width和height？

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-28 14:32:30 luke

這不適合我，因爲我的旋轉木馬顯示在頁面居中，即使我嘗試fullscreen =絕對，但不適合顯示內部父母和破碎 – alamnaryab

你是什麼意思全屏幕=絕對？我沒有將所有內容複製到另一個旋轉木馬上 - 在我看來，這將是一個非常糟糕的做法。請嘗試更新版本，告訴我什麼是壞的。 – luke

下面是幾個問題，我注意到，在這裏提供此解決方案：

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); 
});

Here's the Updated fiddle

來源

2016-11-29 05:36:33

變化引導輪播ID

回答

相關問題