图库thumnail和两个字幕 [英] Image gallery with thumnail and two captions

查看：95
本文介绍了图库thumnail和两个字幕的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要用类似于下面的例子来设计图库，并使用响应式功能。


到目前为止，我设法找到了几个画廊，但每个画廊都有一个或另一个限制。我正在处理的图库基于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开始 - > 
 <！ - 您可以将内联样式移动到css文件或css块。 - > 
< div id =slider1_containerstyle =position：relative; top：0px; left：0px; width：1000px; height：480px; overflow：hidden;> 
 <！ -   - 载入画面 - > 
< div u =loadingstyle =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％;高度：100％;>< / DIV> 
< / div> 
<！ - 幻灯片容器 - > 
< div u =slidesstyle =cursor：move; position：absolute; left：0; top：0px; width：550px; height：480px; overflow：hidden;> 
< div> 
< img u =imagesrc =http://www.jssor.com/img/travel/01.jpg/> 
< img u =thumbsrc =http://www.jssor.com/img/travel/thumb-01.jpg/> <跨度>标题< /跨度> 
 
< / div> 
< div> 
< img u =imagesrc =http://www.jssor.com/img/travel/02.jpg/> 
< img u =thumbsrc =http://www.jssor.com/img/travel/thumb-02.jpg/> 
< / div> 
< div> 
< img u =imagesrc =http://www.jssor.com/img/travel/03.jpg/> 
< img u =thumbsrc =http://www.jssor.com/img/travel/thumb-03.jpg/> 
< / div> 
< div> 
< img u =imagesrc =http://www.jssor.com/img/travel/04.jpg/> 
< img u =thumbsrc =http://www.jssor.com/img/travel/thumb-04.jpg/> 
< / div> 
< div> 
< img u =imagesrc =http://www.jssor.com/img/travel/05.jpg/> 
< img u =thumbsrc =http://www.jssor.com/img/travel/thumb-05.jpg/> 
< / div> 
< div> 
< img u =imagesrc =http://www.jssor.com/img/travel/06.jpg/> 
< img u =thumbsrc =http://www.jssor.com/img/travel/thumb-06.jpg/> 
< / div> 
< div> 
< img u =imagesrc =http://www.jssor.com/img/travel/07.jpg/> 
< img u =thumbsrc =http://www.jssor.com/img/travel/thumb-07.jpg/> 
< / div> 
< div> 
< img u =imagesrc =http://www.jssor.com/img/travel/08.jpg/> 
< img u =thumbsrc =http://www.jssor.com/img/travel/thumb-08.jpg/> 
< / div> 
< div> 
< img u =imagesrc =http://www.jssor.com/img/travel/09.jpg/> 
< img u =thumbsrc =http://www.jssor.com/img/travel/thumb-09.jpg/> 
< / div> 
< div> 
< img u =imagesrc =http://www.jssor.com/img/travel/10.jpg/> 
< img u =thumbsrc =http://www.jssor.com/img/travel/thumb-10.jpg/> 
< / div> 
< div> 
< img u =imagesrc =http://www.jssor.com/img/travel/11.jpg/> 
< img u =thumbsrc =http://www.jssor.com/img/travel/thumb-11.jpg/> 
< / div> 
< div> 
< img u =imagesrc =http://www.jssor.com/img/travel/12.jpg/> 
< img u =thumbsrc =http://www.jssor.com/img/travel/thumb-12.jpg/> 
< / div> 
< div> 
< img u =imagesrc =http://www.jssor.com/img/travel/13.jpg/> 
< img u =thumbsrc =http://www.jssor.com/img/travel/thumb-13.jpg/> 
< / div> 
< div> 
< img u =imagesrc =http://www.jssor.com/img/travel/14.jpg/> 
< img u =thumbsrc =http://www.jssor.com/img/travel/thumb-14.jpg/> 
< / div> 
< / div> 
<！ - 箭头向左 - > < span u =arrowleftclass =jssora05lstyle =width：40px; height：40px; top：140px; left：10px;> 
< / span> 
 
 <！ -   - 右箭头 - > < span u =arrowrightclass =jssora05rstyle =width：40px; height：40px; top：140px; left：490px> 
< / span> 
 
<！ - 箭头导航器外观结束 - > 
 <！ -  Thumbnail Navigator Skin 02开始 - > 
< div u =thumbnavigatorclass =jssort02style =position：absolute; width：430px; height：480px; right：0px; bottom：0px; margin-left：2px;> 
< div u =slidesstyle =cursor：move;类=缩略图定制> 
< div u =prototypeclass =pstyle =position：absolute; width：99px; height：66px; top：0; left：0;> 
< div class = w> 
 < / div> 
< div class = c>< / div> 
< / div> 
< / div> 
<！ - 缩略图项目外观结束 - > 
< / div> 
 <！ - 缩略图导航器外观结束 - > 
< / div> 
 <！ -  Jssor Slider End  - > 
< / div>


解决方案

请在第42行删除不需要的'/'脚本。



并进行以下更改，


  1. 字幕

      / * 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; 
    背景：＃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：下划线; 
     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 =Ldu =2000class =captionOrangestyle =position：absolute; left： 20px; top：300px; width：500px; height：30px;>标题1< / div>


请参阅 http://jsfiddle.net/77uuamcn/4/


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>

解决方案

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

And make following changes,

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

  2. Add caption options

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

  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/

这篇关于图库thumnail和两个字幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆