如何讓SpriteSpin響應？

我正在使用的網站是由twitter引導製作的，並且完全響應。我已經成功地讓SpriteSpin與我的網站一起工作，但是存在一個問題，我無法使其作爲我網站的其他部分響應，因爲它將內聯css添加到了圖像所在的div。如何讓SpriteSpin響應？

JS是這樣的：

首先它調用圖片：

$(function(){ 
    var frames = [ 
     "folder/image.jpg", 
     (other images) 
    ];

那麼這樣的：

$("#mali").spritespin({ 
    width  : 960, 
    height : 540, 
    (other code) 
    });

我怎樣才能改變這種固定的寬度和高度，並把那裏的CSS類或瓦特/小時到100％，以便迴應。

我已經嘗試過的CSS類添加到容器中這一點，但沒有成功：

$("div").addClass("myClass");

我相信這裏的問題是，該腳本在某種程度上增加了內嵌CSS

<div class="spritespin spritespin-instance" unselectable="on" style="overflow: hidden; position: relative; width: 480px; height: 327px;">

你可以看到它在自行車影像上使用檢查元素時，在官方SpriteSpin網站（下面的鏈接）上。

幫我解決這個問題，或者建議我使用其他360圖像精靈旋轉解決方案，它對響應和移動觸摸起作用。

SpriteSpin：http://spritespin.ginie.eu/

來源

2014-02-15 Kristijan Korman

您可以通過添加覆蓋CSS自己的CSS指令之後重要的！在它最簡單的形式：

background: red   !important;

如果您在HTML內嵌樣式屬性：

<div style="background: red;"> 
    The inline styles for this div should make it red. 
</div>

你可以試試這個CSS：

div[style] { 
    background: yellow !important; 
}

但它不是真正靠好習慣在生產代碼上。更多信息： http://css-tricks.com/when-using-important-is-the-right-choice/, http://css-tricks.com/override-inline-styles-with-css/

來源

2014-02-15 21:54:10

我不認爲這會工作。如果我有： '

' 我不認爲我可以添加CSS，即使！因爲style =「」中的css標記很重要，它會覆蓋我放入css文件的所有內容，甚至是重要的。但你給了我一個主意，我發現我的答案在這裏：http://css-tricks.com/override-inline-styles-with-css/ –

酷！我不知道你可以這樣使用它！我已經更新了我的答案以反映這一點，爲了他人的利益。 –

我知道這是一箇舊帖子，但我今天遇到了同樣的問題。基本上所有你需要做的就是在CSS中的每個屏幕大小設置一個媒體查詢來調整容器的大小，圖像將作出響應，因爲它們的寬度和高度已經設置爲100％。

@media only screen and (min-width: 100px) and (max-width: 767px) { 
.spritespin, .spritespin-instance { 
    width:383px !important; 
    height:300px !important; 
} 

}

來源

2015-07-01 15:08:20 mikelshikel

仍然不會工作，因爲spritespin給這些元素一些內聯的CSS與JavaScript不能被覆蓋，甚至沒有！重要。解決方案是使用類或元素名稱，並將其與[樣式]結合以更改內聯樣式和！important。 –

我們很高興地與響應嵌入引導解決方案使用對象

var $container = $(".images3d-container") 
 
if ($container.length && $.fn.spritespin != undefined) { 
 

 
    var source = [] 
 
    $container.find(".images").find('img').each(function() { 
 
    source.push($(this).attr('src')) 
 
    }) 
 

 
    $container.find(".view").spritespin({ 
 
    source: source, 
 
    animate: false, 
 
    renderer: "image", 
 
    width : 450, // width in pixels of the window/frame 
 
    height : 450 // height in pixels of the window/frame, 
 
    }) 
 

 
}

.images3d-container .images { 
 
    display: none; 
 
} 
 

 
.images3d-container .view { 
 
    width: 100%!important; /* here it is */ 
 
    height: 0 !important; 
 
    padding-bottom: 100%; 
 
    position: relative; 
 
    overflow: hidden; 
 
    border-bottom: 1px solid #ccc; 
 
    margin-bottom: 20px; 
 

 
}

<section class="images3d-container"> 
 
    <div class="view"></div> 
 
    <ol class="images"> 
 

 
    <li><img src="/img/1.jpg"></li> 
 
     
 
    <li><img src="/img/2.jpg"></li> 
 
     
 
    <li><img src="/img/3.jpg"></li> 
 
     
 
    <li><img src="/img/4.jpg"></li> 
 
    </ol> 
 
</section>

來源

2016-05-21 08:46:41 wtorsi

如何讓SpriteSpin響應？

回答

相關問題