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

Question

我需要设计类似于下面示例的具有响应功能的画廊。

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

我可以对代码进行一些修改，使其与我的要求相似，不幸的是，在我的本地系统上运行的相同代码在 JSFiddle 上不起作用。

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

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

代码示例：

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

并进行以下更改，

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

2. 添加字幕选项

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

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/