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 working on is based on jssor example http://www.jssor.com/demos/image-gallery-with-vertical-thumbnail.html

I am able to make some modification to the code and make it similar to my requirement, Unfortunately same code which is working on my local system is not working on JSFiddle.

At present i tried to add the caption to the jssor gallery but it is not working, while my actual requirement is for two separate caption one will show the title of the image & other will be link to a website or web page...

I would appreciate help in this regarding or a gallery which is similar to my requirement I have spend two days trying to get my hands on good code which can be easy to customize to my design.

Code sample:

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

回答1:

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

And make following changes,

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);
}

Add caption options

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

Add captions to slide

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

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

来源：https://stackoverflow.com/questions/26233355/image-gallery-with-thumnail-and-two-captions

标签

javascript

jquery

html

css

image-gallery