thumnail 및 두 자막이있는 이미지 갤러리

Question

반응 형 기능으로 아래 예와 비슷한 갤러리를 디자인해야합니다.

지금까지 내가 몇 갤러리를 발견 할 수 있지만, 각각은 하나 또는 다른 제한이 있었다. 내가 일하고있는 갤러리는 jssor를 기반으로합니다. 예 http://www.jssor.com/demos/image-gallery-with-vertical-thumbnail.html

코드를 수정하고 내 요구 사항과 비슷하게 만들 수 있습니다. 불행히도 내 로컬 시스템에서 작동하는 동일한 코드가 JSFiddle에서 작동하지 않습니다.

현재 jssor 갤러리에 캡션을 추가하려고했지만 실제로 작동하지 않습니다. 두 개의 별도 캡션 중 하나는 이미지의 제목을 표시합니다. & 기타는 웹 사이트 또는 웹 페이지에 대한 링크입니다. ...

내 설계와 관련하여 도움이되었거나 내 요구 사항과 유사한 갤러리를 보내 주시면 감사하겠습니다. 멋진 디자인을 쉽게 만들 수있는 좋은 코드를 손에 넣으려고 노력했습니다.

코드 샘플 :

<div style="width:1000px; background-color:green; margin-top:30px;"> 
    <!-- Jssor Slider Begin --> 
    <!-- You can move inline styles to css file or css block. --> 
    <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 1000px; height: 480px; overflow: hidden;"> 
     <!-- Loading Screen --> 
     <div u="loading" style="position: absolute; top: 0px; left: 0px;"> 
      <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block; top: 0px; left: 0px;width: 100%;height:100%;"></div> 
      <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center; top: 0px; left: 0px;width: 100%;height:100%;"></div> 
     </div> 
     <!-- Slides Container --> 
     <div u="slides" style="cursor: move; position: absolute; left:0; top: 0px; width: 550px; height: 480px; overflow: hidden;"> 
      <div> 
       <img u="image" src="http://www.jssor.com/img/travel/01.jpg" /> 
       <img u="thumb" src="http://www.jssor.com/img/travel/thumb-01.jpg" /> <span> Title</span> 

      </div> 
      <div> 
       <img u="image" src="http://www.jssor.com/img/travel/02.jpg" /> 
       <img u="thumb" src="http://www.jssor.com/img/travel/thumb-02.jpg" /> 
      </div> 
      <div> 
       <img u="image" src="http://www.jssor.com/img/travel/03.jpg" /> 
       <img u="thumb" src="http://www.jssor.com/img/travel/thumb-03.jpg" /> 
      </div> 
      <div> 
       <img u="image" src="http://www.jssor.com/img/travel/04.jpg" /> 
       <img u="thumb" src="http://www.jssor.com/img/travel/thumb-04.jpg" /> 
      </div> 
      <div> 
       <img u="image" src="http://www.jssor.com/img/travel/05.jpg" /> 
       <img u="thumb" src="http://www.jssor.com/img/travel/thumb-05.jpg" /> 
      </div> 
      <div> 
       <img u="image" src="http://www.jssor.com/img/travel/06.jpg" /> 
       <img u="thumb" src="http://www.jssor.com/img/travel/thumb-06.jpg" /> 
      </div> 
      <div> 
       <img u="image" src="http://www.jssor.com/img/travel/07.jpg" /> 
       <img u="thumb" src="http://www.jssor.com/img/travel/thumb-07.jpg" /> 
      </div> 
      <div> 
       <img u="image" src="http://www.jssor.com/img/travel/08.jpg" /> 
       <img u="thumb" src="http://www.jssor.com/img/travel/thumb-08.jpg" /> 
      </div> 
      <div> 
       <img u="image" src="http://www.jssor.com/img/travel/09.jpg" /> 
       <img u="thumb" src="http://www.jssor.com/img/travel/thumb-09.jpg" /> 
      </div> 
      <div> 
       <img u="image" src="http://www.jssor.com/img/travel/10.jpg" /> 
       <img u="thumb" src="http://www.jssor.com/img/travel/thumb-10.jpg" /> 
      </div> 
      <div> 
       <img u="image" src="http://www.jssor.com/img/travel/11.jpg" /> 
       <img u="thumb" src="http://www.jssor.com/img/travel/thumb-11.jpg" /> 
      </div> 
      <div> 
       <img u="image" src="http://www.jssor.com/img/travel/12.jpg" /> 
       <img u="thumb" src="http://www.jssor.com/img/travel/thumb-12.jpg" /> 
      </div> 
      <div> 
       <img u="image" src="http://www.jssor.com/img/travel/13.jpg" /> 
       <img u="thumb" src="http://www.jssor.com/img/travel/thumb-13.jpg" /> 
      </div> 
      <div> 
       <img u="image" src="http://www.jssor.com/img/travel/14.jpg" /> 
       <img u="thumb" src="http://www.jssor.com/img/travel/thumb-14.jpg" /> 
      </div> 
     </div> 
     <!-- Arrow Left --> <span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 140px; left: 10px;"> 
     </span> 

     <!-- Arrow Right --> <span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 140px; left: 490px"> 
     </span> 

     <!-- Arrow Navigator Skin End --> 
     <!-- Thumbnail Navigator Skin 02 Begin --> 
     <div u="thumbnavigator" class="jssort02" style="position: absolute; width: 430px; height: 480px; right:0px; bottom: 0px; margin-left:2px;"> 
      <div u="slides" style="cursor: move;" class="thumbnail-custom"> 
       <div u="prototype" class="p" style="position: absolute; width: 99px; height: 66px; top: 0; left: 0;"> 
        <div class=w> 
         <thumbnailtemplate style=" width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></thumbnailtemplate> 
        </div> 
        <div class=c></div> 
       </div> 
      </div> 
      <!-- Thumbnail Item Skin End --> 
     </div> 
     <!-- Thumbnail Navigator Skin End --> 
    </div> 
    <!-- Jssor Slider End --> 
</div> 

Answer 1

스크립트의 라인 42 '/'원치 않는를 제거하십시오.

그리고 수 있도록 다음과 같이 변경,

1. 자막에 대한 CSS를 추가

   /* caption css */ 
   .captionOrange, .captionBlack 
   { 
       color: #fff; 
       font-size: 20px; 
       line-height: 30px; 
       text-align: center; 
       border-radius: 4px; 
   } 
   .captionOrange 
   { 
       background: #EB5100; 
       background-color: rgba(235, 81, 0, 0.6); 
   } 
   .captionBlack 
   { 
       font-size:16px; 
       background: #000; 
       background-color: rgba(0, 0, 0, 0.4); 
   } 
   a.captionOrange, A.captionOrange:active, A.captionOrange:visited 
   { 
       color: #ffffff; 
       text-decoration: none; 
   } 
   a.captionOrange:hover 
   { 
       color: #eb5100; 
       text-decoration: underline; 
       background-color: #eeeeee; 
       background-color: rgba(238, 238, 238, 0.7); 
   } 
   

2. 추가 캡션 옵션

   $CaptionSliderOptions: { 
       $Class: $JssorCaptionSlider$, 
       $CaptionTransitions: _CaptionTransitions, 
       $PlayInMode: 1, 
       $PlayOutMode: 3 
   } 
   

3. 슬라이드 캡션을 추가

   <div u=caption t="L" du="2000" class="captionOrange" style="position:absolute; left:20px; top: 300px; width:500px; height:30px;"> Caption 1 </div> 
   <a u="caption" t="R" class="captionOrange" href="http://www.yourdomain.com" style="position: absolute; top: 300px; left: 630px; width: 250px; height: 30px;">www.yourdomain.com</a> 
   

는 http://jsfiddle.net/77uuamcn/4/