Topic: Integrating soundslides in responsive design

Hey guys,

I've been using soundslides for some two years now and I've been pretty much excited about how seamless the entire publishing process is.

I'm working for several months now to completely redesign my website and make it more user- and device-friendly. I ended up going for a responsive design, with two major breakpoints: one for tablet and one for mobile users.

How can I get soundslides to act like the rest of my website? It'll always take up 100% width of the content column, but for now, whenever I resize the browser or try to view it on another device, the player refuses to adapt to the new width.

Has any of you managed to make it work in a fluid-width design?



Re: Integrating soundslides in responsive design

Unfortunately this functionality is not supported in Soundslides at this time.



Re: Integrating soundslides in responsive design

I see.

While I don't really have any skill working with Flash, I wouldn't really know where to start fixing it. But the HTML5 shell included in the 1.9.5 version (which I have to say I love more than the older, chunky one), shouldn't be too difficult to make responsive.

I'd be happy share the result once it's done, so it can be included in the next soundslides version.



Re: Integrating soundslides in responsive design


Glad you like the new HTML 5 version of the player. Let us know any improvements or updates you make.


5 (edited by johnitsa 2014-05-29 14:35:12)

Re: Integrating soundslides in responsive design

You can try out a first version of it here: link removed.

There are quite a few changes made, since most of the code was (imho) way too bloated, making the process very complicated.

Everything seems to work alright for now, except for the thumbnail page, which I don't know how to adapt at the moment. I'll do some extra research and see how can I force it to get the size of the slideshow element, without extending over the controls area.

The page currently has a max-width of 1024px set. Resize your browser to anything lower and you should be able to see the results.

Here's a short list of the most important things changed:

  • removed most of the width, height and positioning applied on the fly from javascript

  • changed the #slide_area div into an ul, for an easier management of the fade-in/out transition

  • the slides aren't positioned:absolute anymore. They're list items, left floating with relative positioning and a right margin of -100% (to actually have a nice transition effect and not have it pass through black).

  • and a lot of other small changes...

Wherever possible, I kept the original code (both in soundslides.css and soundslides.js files), commented out the part I wanted removed and added unindented code to replace that particular part (this mostly applies to the css file).

Check out the source: css and js

Things to do:

  • fix the thumbnail display

  • check the fullscreen, panning and lower third subtitles features (but after upgrading my licence to pro)

  • test it on sufficient browsers to make sure it works properly

Looking forward to your input on this.


Re: Integrating soundslides in responsive design

Any timeline on a Soundslides update that addresses this problem? I'd love better integration with Wordpress - especially responsive themes such as GraphPaperPress's new ones.



Re: Integrating soundslides in responsive design

Thanks for your interest. We are continuing to study the issue, but do not have an announcement to make yet.