Question

我正在开发的网站是使用twitter bootstrap制作的，并且完全响应。我已成功使SpriteSpin与我的网站一起工作，但是有一个问题，我不能让它作为我的网站的其余部分响应，因为它将内联css添加到图像所在的div。

JS看起来像这样：

首先它调用图像：

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

然后这个：

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

如何更改此固定宽度和高度，并将css类或w / h设置为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/

Answer 1

您可以在自己的CSS指令后添加！important来覆盖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/

Answer 2

我知道这是一个老帖子，但我今天遇到了同样的问题。基本上你需要做的是在你的CSS中设置每个屏幕尺寸的媒体查询来调整容器的大小，图像将响应，因为它们的宽度和高度已经设置为100％。

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

}

Answer 3

将它与bootstrap解决方案一起用于响应式嵌入对象非常棒

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>

Answer 4

我知道这个问题很旧，但是对于那些碰巧希望找到答案的人：该插件现在有一个设置。只需添加responsive: true，然后设置 SpriteSpin 的宽度即可。参见the official demo。

如何让SpriteSpin响应？

4 个答案: