다른 이미지 크기로 구름 회전 목마 v1.0.5를 축척하는 방법

다른 이미지 크기로 확장 가능한 R. Recco의 CloudCarousel V1.0.5 플러그인을 어떻게 만들 수 있는지 궁금합니다. 다음과 같은 의미가 있습니다 : 저는 이미지 회전식 캐 러셀을 Foundation 응답 프레임 워크에 포함 시켰습니다. 그리고 나머지 웹 응용 프로그램은 다른 글꼴 크기 (레이아웃에서 기본베이스 사용)에 정확하게 맞춰 졌으므로 변경해야하는 속성과 방법을 알고 싶습니다. 더 큰 또는 더 작은 크기로 동일한 양상을 유지하기 위해 플러그인에서.다른 이미지 크기로 구름 회전 목마 v1.0.5를 축척하는 방법

현재 일부 선형 속성 (xpos, ypos) 만 변경했지만 플러그인은 일부 비선형 함수 (cos, sin..etc)를 사용하기 때문에 따라갈 패턴을 찾을 수 없습니다. 래퍼 컨테이너에 따라 크기를 변경 한 후에 공백과 위치가 일치하지 않습니다). 나는 또한 minif 스케일을 수정하려고 시도했지만, 더 이상 무엇을 만질 지 모른다.

누군가가 적절하게 모든 것을 확장하기 위해 변경해야 할 사항에 대한 힌트를 제공 할 수 있습니까?

여기 관련 코드가있는 jsfiddle입니다. 희망이 충분합니다.

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

이

은 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>

좋아, 죄송하지만 여기에 더 많은 코드를 넣어 약간의 문제가있다. jsfiddle 링크가 있다면 왜 필요한지 이해할 수 없습니다. 어쨌든 모든 것을 볼 수 있습니다.

감사합니다.

출처

2014-01-23 user2158954