JSSOR gallery: Captions on Image Gallery w Vertical bar?

Question

Is it possible to put captions on the jssor "Image Gallery w Vertical bar" example? If possible I'd like to do it in the actual HTML rather than the js, since I'm working in Ruby on Rails.

Something like:

<% @images.each do |image|  %>
    <div>
    <img u="image" caption="<%= image['caption'] -%>" src="<%= image['fullsize'] -%>" />
    <img u="thumb" src="<%= image['thumb'] -%>" />
    </div>
<% end -%>

Answer 1

<script>
        ...
        var _CaptionTransitions = [];
        _CaptionTransitions["CLIP|LR"] = {$Duration: 900, $Clip: 3, $Easing: $JssorEasing$.$EaseInOutCubic };
        var options = {
            ...
            $CaptionSliderOptions: {                            //[Optional] Options which specifies how to animate caption
                $Class: $JssorCaptionSlider$,                   //[Required] Class to create instance to animate caption
                $CaptionTransitions: _CaptionTransitions,       //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
                $PlayInMode: 1,                                 //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
                $PlayOutMode: 3                                 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
            },

            ...
        };
        ...
        var jssor_slider1 = new $JssorSlider$("slider1_container", options);
</script>
<% @images.each do |image|  %>
    <div>
    <img u="image" caption="<%= image['caption'] -%>" src="<%= image['fullsize'] -%>" />
    <img u="thumb" src="<%= image['thumb'] -%>" />
    <div u="caption" t="CLIP|LR"  style="position:absolute; left:20px; top: 30px; width:300px; height:30px;"> 
            Jssor Slider, touch swipe
    </div>
</div>
<% end -%>