Question

我需要设计类似下面示例的图库，并提供响应功能。

enter image description here

到目前为止，我设法找到了几个画廊，但每个画廊都有一个或另一个限制。我正在处理的图库基于jssor示例http://www.jssor.com/demos/image-gallery-with-vertical-thumbnail.html

我能够对代码进行一些修改并使其与我的要求类似，不幸的是，在本地系统上工作的相同代码无法在JSFiddle上运行。

目前我试图将标题添加到jssor库但是它不起作用，而我的实际要求是两个单独的标题，一个将显示图像的标题＆amp;其他将链接到网站或网页...

我很感激这方面的帮助或类似于我的要求的画廊我花了两天时间试图获得可以轻松定制我的设计的优秀代码。

代码示例：

<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行的不需要的'/'。

进行以下更改

为字幕添加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);
}

添加字幕选项

$CaptionSliderOptions: {
    $Class: $JssorCaptionSlider$,
    $CaptionTransitions: _CaptionTransitions,
    $PlayInMode: 1,
    $PlayOutMode: 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/

带有缩略图和两个标题的图库

1 个答案: