Image Gallery With Thumnail And Two Captions

I need to design gallery in similar to example below with responsive feature. so far i managed to find few galleries but each one had one or the other limitation. Gallery i am wor

Solution 1:

Please remove the unwanted '/' at line 42 of scripts.

And make following changes,

1. Add css for captions

   /* 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. Add caption options

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

3. Add captions to slide

   <divu=captiont="L"du="2000"class="captionOrange"style="position:absolute; left:20px; top: 300px; width:500px; height:30px;"> Caption 1 </div><au="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>

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