How to scale cloud carousel v1.0.5 with different image sizes

Question

I was wondering how I could make R. Recco's CloudCarousel V1.0.5 plugin scalable with different image sizes. I mean: I have included the image carousel within Foundation responsive framework and since the rest of my web application fits correctly to different font sizes (using rem base in the layout), I would like to know which properties I have to change and how in the plugin in order to keep the same aspect with bigger or smaller sizes.

At the moment, I have only changed some linear properties (xpos, ypos), but since the plugin uses some no-linear functions (cos, sin..etc) I can't work out the pattern to follow (the spaces and positions don't match after changing the size accordingly with the wrapper containers). I have also tried modifiying min-scale, but I don't know what more to touch.

Could someone provide me some hints about what needs to be changed to scale everything properly?

Here is the jsfiddle with the relevant code. Hope this will be enough.

http://jsfiddle.net/joseAyudarte91/UaJg3/6/

This is the html:

      <div id="carousel_wrapper">
            <div id = "cloud_carousel">    
                    <!-- All images with class of "cloudcarousel" will be turned into carousel items -->
                    <!-- You can place links around these images -->
                    <a href="#" rel="Caserio nevado"><img class="cloudcarousel" src="http://s26.postimg.org/jxv8igwfd/image.jpg" alt="Miniatura: caserio nevado" title="Caserio nevado" /></a>
                    <a href="#" rel="Desayuno en el porche"><img class="cloudcarousel" src="http://s26.postimg.org/yjm96pt7t/image.jpg" alt="Desayuno en el porche" title="Desayuno en el porche" /></a>
                    <a href="#" rel="Suite"><img class="cloudcarousel" src="http://s26.postimg.org/62wy00209/image.jpg" alt="Suite" title="Suite "/></a>
                    <a href="#" rel="Porche hamacas"><img class="cloudcarousel" src="http://s26.postimg.org/9rmmzhc15/image.jpg" alt="Porche hamacas" title="Porche hamacas" /></a>
                    <a href="#" rel="Sauna"><img class="cloudcarousel" src="http://s26.postimg.org/4dnurxmax/image.jpg" alt="Sauna" title="Sauna" /></a>
                    <a href="#" rel="camino entorno"><img class="cloudcarousel" src="http://s26.postimg.org/yng2myyp5/image.jpg" alt="Camino entorno" title="Camino entorno" /></a>
                    <a href="#" rel="Sala con minibar"><img class="cloudcarousel" src="http://s26.postimg.org/glwxp64o9/image.jpg" alt="Sala con minibar" title="Sala con minibar" /></a>
                    <a href="#" rel="Pantano Landa"><img class="cloudcarousel" src="http://s26.postimg.org/9swkswdux/image.jpg" alt="Pantano Landa" title="Pantano Landa" /></a>
                            <!--<a href="#" rel="Vistas con nieve"><img class="cloudcarousel" src="images/thumbnails/09.jpg" alt="Vistas con nieve" title="Vistas con nieve" /></a>
                                    <a href="#" rel="Porche vistas exterior"><img class="cloudcarousel" src="images/thumbnails/10.jpg" alt="Porche vistas exterior" title="Porche vistas exterior" /></a>-->
            </div>

            <!-- Define left and right buttons. -->
            <center>
                <input id="slider-left-but" type="button" value="" />
                <input id="slider-right-but" type="button" value="" />
            </center>
            <div id="title_carousel">BIENVENIDO A ATERBE</div>
      </div>

Ok, sorry but I have some problems to put more code here. I can't really understand why it is needed if I have a jsfiddle link.. Anyway, everything can be seen there.

Thanks

Answer 1

Ok, I have run into the answer in another post I hadn't seen before. It seems that the radious of the carousel circle needs to be changed first: Smaller Cloud Carousel