Kristijan Korman Kristijan Korman - 1 year ago 213
Javascript Question

How to make SpriteSpin responsive?

Site i am working on is made with twitter bootstrap and is fully responsive. I have successfully made SpriteSpin to work with my site but there is a problem, i can't make it responsive as rest of my site because it adds inline css to div where the image is.

JS looks like this:

First it calls images:

var frames = [
(other images)

Then this:

width : 960,
height : 540,
(other code)

How can i change this fixed width and height and put there css class or w/h to 100% so that is responsive.

I already tried to add css class to container with this but no success:

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

I believe the problem here is that the script somehow adds inline css

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

You can see it on official SpriteSpin website (link below) when using inspect element on Bicycle image.

Help me fix this issue or suggest me other 360 image sprite spin solution that is responsive and works on mobile touch.


Answer Source

You can override CSS by adding !important after your own CSS directives. In it's simplest form:

background: red            !important;

If you have inline style attributes in HTML:

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

you can try this CSS:

div[style] {
   background: yellow !important;

But it's not really good practice to rely on it in production code. More info:,