Galleria di immagini con tamburo e due didascalie

Ho bisogno di progettare galleria in modo simile all'esempio qui sotto con funzionalità retriggers.

immettere qui la descrizione dell'immagine

finora sono riuscito a trovare alcune gallerie, ma ognuno aveva una o l'altra limitazione. La galleria che sto lavorando è basata su jssor esempio http://www.jssor.com/demos/image-gallery-with-vertical-thumbnail.html

Sono in grado di apportre alcune modifiche al codice e renderlo simile al mio requisito, purtroppo il codice stesso che sta lavorando sul mio sistema locale non sta lavorando a JSFiddle .

Al momento ho cercato di aggiungere la didascalia alla galleria jssor, ma non funziona, mentre il mio requisito attuale è per due didascalie separate che mostrerà il titolo dell'image e altro sarà link a un sito web o una pagina web …

    Apprezzo l'aiuto in questo riguardo o una galleria che è simile al mio requisito ho trascorso due giorni cercando di mettere le mani su un buon codice che può essere facile da personalizzare al mio disegno.

    Esempio di codice:

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

    Rimuovi la "/" indesiderata alla row 42 degli script.

    E fare i seguenti cambiamenti,

    1. Aggiungere css per le didascalie

       /* 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. Aggiungi opzioni didascalie

       $CaptionSliderOptions: { $Class: $JssorCaptionSlider$, $CaptionTransitions: _CaptionTransitions, $PlayInMode: 1, $PlayOutMode: 3 } 
    3. Aggiungi le didascalie per scorrere

       <div u=caption t="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> 

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