javascript - jssor 画廊不能一起使用缩略图和标题-6ren

javascript - jssor 画廊不能一起使用缩略图和标题

转载作者：行者123 更新时间：2023-11-28 08:07:55

我已经为我的问题寻找答案 3 天了，到目前为止还没有找到好的答案。
我找到的最接近的是这个 question但它对我不起作用。
我正在使用 jssor 画廊，我需要画廊按照示例链接中的描述工作 gallery with thumbnails under the main image and caption at the bottom of the image
我可以制作带有缩略图和标题的图库，但当我尝试将两者结合时，它不起作用。

这是我用于带有缩略图和标题的画廊的代码:

jQuery(document).ready(function ($) {
                var _CaptionTransitions = [];
                _CaptionTransitions["MCLIP|B"] = { $Duration: 800, $Clip: 8, $Move: true, $Easing: $JssorEasing$.$EaseOutExpo };

                var options = {
                    $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                    $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
                    
                        $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
                    }
                  
                  $ThumbnailNavigatorOptions: {                       //[Optional] Options to specify and enable thumbnail navigator or not
                        $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance
                        $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                        $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                        $SpacingX: 8,                                   //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
                        $DisplayPieces: 10,                             //[Optional] Number of pieces to display, default value is 1
                        $ParkingPosition: 360                           //[Optional] The offset position to park thumbnail
                    }

                };

                var jssor_slider1 = new $JssorSlider$("slider1_container", options);
            });

 .jssort01 .w
              {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
              }
              .jssort01 .c {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 122px;
                height: 74px;
                border: #000 2px solid;
              }
              .jssort01 .p:hover .c, .jssort01 .pav:hover .c, .jssort01 .pav .c {
                background: url(/vault/js/t01.png) center center;
                border-width: 0px;
                top: 0px;
                left: 0px;
                width: 122px;
                height: 74px;
              }
              .jssort01 .p:hover .c, .jssort01 .pav:hover .c {
                top: 0px;
                left: 0px;
                width: 122px;
                height: 74px;
                border: #fff 2px solid;
              }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Jssor Slider Begin -->
          <div id="slider1_container" style="display: none; position: relative; margin: 0 auto; width: 676px; height: 415px; overflow: hidden;">
            <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 676px; height: 415px;
                                   overflow: hidden;">
    <div>
      <img u="image" src="http://www.jssor.com/img/photography/001.jpg" alt="" />
      <img u="thumb" src="http://www.jssor.com/img/photography/001.jpg" />
      <div u="caption" t="MCLIP|B" style="position: absolute; top: 365px; left: 0px; right: 0; width: 676px; height: 50px; background: #000; opacity: 0.5; color: #fff;">
        <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
                            background-color: Black; opacity: 0.5; filter: alpha(opacity=50);">
                        </div>
                        <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
                            color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">
                            #photodescription#
                        </div>
    </div>
    </div>
    <div>
      <img u="image" src="http://www.jssor.com/img/photography/002.jpg" alt="" />
      <img u="thumb" src="http://www.jssor.com/img/photography/002.jpg" />
      <div u="caption" t="MCLIP|B" style="position: absolute; top: 365px; left: 0px; right: 0; width: 676px; height: 50px; background: #000; opacity: 0.5; color: #fff;">
        <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
                            background-color: Black; opacity: 0.5; filter: alpha(opacity=50);">
                        </div>
                        <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
                            color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">
                            #photodescription#
                        </div>
    </div>
    </div>
    <div>
      <img u="image" src="http://www.jssor.com/img/photography/003.jpg" alt="" />
      <img u="thumb" src="http://www.jssor.com/img/photography/003.jpg" />
      <div u="caption" t="MCLIP|B" style="position: absolute; top: 365px; left: 0px; right: 0; width: 676px; height: 50px; background: #000; opacity: 0.5; color: #fff;">
        <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
                            background-color: Black; opacity: 0.5; filter: alpha(opacity=50);">
                        </div>
                        <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
                            color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">
                            #photodescription#
                        </div>
    </div>
    </div> 
    <div>
      <img u="image" src="http://www.jssor.com/img/photography/004.jpg" alt="" />
      <img u="thumb" src="http://www.jssor.com/img/photography/004.jpg" />
      <div u="caption" t="MCLIP|B" style="position: absolute; top: 365px; left: 0px; right: 0; width: 676px; height: 50px; background: #000; opacity: 0.5; color: #fff;">
        <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
                            background-color: Black; opacity: 0.5; filter: alpha(opacity=50);">
                        </div>
                        <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
                            color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">
                            #photodescription#
                        </div>
    </div>
    </div>
<div>
      <img u="image" src="http://www.jssor.com/img/photography/005.jpg" alt="" />
      <img u="thumb" src="http://www.jssor.com/img/photography/005.jpg" />
      <div u="caption" t="MCLIP|B" style="position: absolute; top: 365px; left: 0px; right: 0; width: 676px; height: 50px; background: #000; opacity: 0.5; color: #fff;">
        <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
                            background-color: Black; opacity: 0.5; filter: alpha(opacity=50);">
                        </div>
                        <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
                            color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">
                            #photodescription#
                        </div>
    </div>
    </div>
<div>
      <img u="image" src="http://www.jssor.com/img/photography/006.jpg" alt="" />
      <img u="thumb" src="http://www.jssor.com/img/photography/006.jpg" />
      <div u="caption" t="MCLIP|B" style="position: absolute; top: 365px; left: 0px; right: 0; width: 676px; height: 50px; background: #000; opacity: 0.5; color: #fff;">
        <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
                            background-color: Black; opacity: 0.5; filter: alpha(opacity=50);">
                        </div>
                        <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
                            color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">
                            #photodescription#
                        </div>
    </div>
    </div>
<div>
      <img u="image" src="http://www.jssor.com/img/photography/007.jpg" alt="" />
      <img u="thumb" src="http://www.jssor.com/img/photography/007.jpg" />
      <div u="caption" t="MCLIP|B" style="position: absolute; top: 365px; left: 0px; right: 0; width: 676px; height: 50px; background: #000; opacity: 0.5; color: #fff;">
        <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
                            background-color: Black; opacity: 0.5; filter: alpha(opacity=50);">
                        </div>
                        <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
                            color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">
                            #photodescription#
                        </div>
    </div>
    </div>
<div>
      <img u="image" src="http://www.jssor.com/img/photography/008.jpg" alt="" />
      <img u="thumb" src="http://www.jssor.com/img/photography/008.jpg" />
      <div u="caption" t="MCLIP|B" style="position: absolute; top: 365px; left: 0px; right: 0; width: 676px; height: 50px; background: #000; opacity: 0.5; color: #fff;">
        <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
                            background-color: Black; opacity: 0.5; filter: alpha(opacity=50);">
                        </div>
                        <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
                            color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">
                            #photodescription#
                        </div>
    </div>
    </div>
<div>
      <img u="image" src="http://www.jssor.com/img/photography/009.jpg" alt="" />
      <img u="thumb" src="http://www.jssor.com/img/photography/009.jpg" />
      <div u="caption" t="MCLIP|B" style="position: absolute; top: 365px; left: 0px; right: 0; width: 676px; height: 50px; background: #000; opacity: 0.5; color: #fff;">
        <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
                            background-color: Black; opacity: 0.5; filter: alpha(opacity=50);">
                        </div>
                        <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
                            color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">
                            #photodescription#
                        </div>
    </div>
    </div>
<div>
      <img u="image" src="http://www.jssor.com/img/photography/010.jpg" alt="" />
      <img u="thumb" src="http://www.jssor.com/img/photography/010.jpg" />
      <div u="caption" t="MCLIP|B" style="position: absolute; top: 365px; left: 0px; right: 0; width: 676px; height: 50px; background: #000; opacity: 0.5; color: #fff;">
        <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
                            background-color: Black; opacity: 0.5; filter: alpha(opacity=50);">
                        </div>
                        <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
                            color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">
                            #photodescription#
                        </div>
    </div>
    </div>
            </div>
            <!-- Thumbnail Navigator Skin Begin -->
            <div u="thumbnavigator" class="jssort01" style="position: absolute; width: 800px; height: 100px; left:0px; bottom: 0px;">
            
                <!-- Thumbnail Item Skin Begin -->
                <div u="slides" style="cursor: move;">
                    <div u="prototype" class="p" style="position: absolute; width: 72px; height: 72px; top: 0; left: 0;">
                        <div class=w><div u="thumbnailtemplate" style="width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></div></div>
                        <div class=c>
                        </div>
                    </div>
                </div>
                <!-- Thumbnail Item Skin End -->
            </div>
            <!-- Thumbnail Navigator Skin End -->
            
            
          </div>
          <!-- Jssor Slider End -->

如果我的问题不会被忽略，我将不胜感激。

最佳答案

您的 js 代码中缺少 ,。请更换

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

与

$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
},

从 slider1_container 中删除 display: none;。

替换

<div id="slider1_container" style="display: none;

与

<div id="slider1_container" style="

关于javascript - jssor 画廊不能一起使用缩略图和标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29413071/

文章推荐： jquery - 禁用模态表单的自动关闭

文章推荐： javascript - Cloudinary cl_image_upload 与 cl_image_upload_tag

文章推荐：带有 extern "C"的两个文件出现 C++ lnk2005 错误，为什么？

文章推荐： html - 默认情况下 Bootstrap 辅助导航栏不折叠

html - 标题/标题
我附上了一个我尝试使用 html/css 实现的示例(如果您看不到图像:名字和姓氏，然后第二行是职位描述)。我希望所有文本(两行)在一个 div 中强制对齐(左和右)，但我不确定这是否可能。我尝试了一
html - Div 标题/标题
我想使两个 h1 元素成为 div 上的标题/页眉。所以每个都在特定的 div 之上。 Youtube Achievements
Android EditText 标题(标题)就像在 android 指南中
我想让每个 EditText 对象都有自己的标题，就像 Pure Android 指南中那样 (screenshot) 这个东西有原生支持吗？我想他们也可能会使用带有部分的 ListView ，但这对
swift - UICollectionView 标题 View 类似于表格 View 标题(不是节标题)
是否可以像 UITableView headerView 一样创建 UICollectionView 标题 View ？我的意思是整个集合 View 的标题 View ，而不是每个部分的重复 View
android - Material Design 排版 - 标题、标题、间距、文本外观
我一直在遵循有关排版的 Google 官方 Material 设计指南 (http://www.google.com/design/spec/style/typography.html)，但我发现它们
python - 是否有 Python 库来提取视频元数据，例如 [标题、描述、标题/字幕]？
我目前正在尝试找到可以帮助我从视频文件中提取元数据或信息的 python 库，例如 [ mp4, Mkv, Avi, WebM, mpg ] 格式为例。我主要从视频文件中提取的主要数据是 [标题、描
html - Bootstrap 缩略图 - 中心内容(img + 标题)，标题 float :left
你好，这是我正在尝试做的: 将每个缩略图的内容(img + 标题)居中。我的 img 必须是 span3，标题必须是 span4。这是我的问题: 我可以获取内容中心，或者标题 float 在 im
ios - UINavigationBar 后退按钮在某些设备或模拟器上显示 "Back"标题，在其他设备或模拟器上显示之前的 View Controller 标题
我有一个带有导航栏的应用程序，可以从一个 View Controller 导航到下一个 View Controller 。在某些模拟器和设备上导航到下一个 View Controller 时，后退按钮
sql - t-sql 这是如何工作的？ SELECT @MyList = ISNULL(@MyList ,'') + 标题 + ', ' FROM 标题
我遇到了一些非常酷的 t-sql，可以从一个 t-sql 查询中的选定行生成一个逗号分隔的列值列表: SELECT @MyList = ISNULL(@MyList,'') + Title + ',
HTML 标题
请确保将 HTML heading 标签只用于标题。不要仅仅是为了生成粗体或的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标
每页上的 wkhtmltopdf 标题
我正在使用 wkhtmltopdf 将 html 转换为 pdf。我想在每个页面中添加标题，但它只显示在第一页(目录)中。我使用的命令是 "C:\Program Files\wkhtmltopdf
r - 如何在ggplot2中显示obs的方向(标题)
如何使用 ggplot2 显示观察的方向(标题)？有没有办法调整shape=17 (三角形)以便它“指向”下一次观察？示例代码 library(ggplot2) dat % pivot_wide
macos - 标题&&关闭按钮不显示
我尝试在 cocoa 应用程序中显示/隐藏标题栏。我使用以下代码: if ([window styleMask]==NSResizableWindowMask) { [wind
文本字段上的 JavaScript 标题
我有这样的 HTML 标题 http://s1.postimg.org/4ebyk3qwv/image.png 当我编写这段代码时: document.getElementById("TL85_1_
wordpress - 在Facebook上与视频共享URL不显示描述/标题
我叫麦克。谢谢你的帮助。在Wordpress中，我们已经设计了我们的网站，以便在Facebook调试器中og数据尽可能接近youtube。尽管如此，在Facebook上共享视频的方式还是不同的。尽管
scala - 返回确切的响应/标题？
从 web 应用程序的客户端，我点击了服务器端路由，它只是第三方 API 的包装器。使用分派(dispatch)，我试图让服务器端请求返回 exact header 和第三方 API 对客户端 AJA
scala - 返回确切的响应/标题？
从 web 应用程序的客户端，我点击了服务器端路由，它只是第三方 API 的包装器。使用分派(dispatch)，我试图让服务器端请求返回 exact header 和第三方 API 对客户端 AJA
SAPUI5 - 标题、侧边栏和导航
我是 SAPUI5 的新手，在导航、侧边栏和标题方面遇到一些问题。我想开发一个带有标题和侧边栏的应用程序。我为此使用“ToolPage”。每个页面都包含工具页，如下所示:
go - “标题”注释的目的
我最近在为客户做的项目中被介绍给Go。他们已经建立了代码库，需要进行一些更改。我注意到所有的方法，结构等等都有一些奇怪的类似于标题的注释，如下所示: // SomeType ... type Som
java - ListView 标题
我创建了一个采用整个屏幕布局的标题布局(xml 文件)... 我还创建了一个 listView 并将此 header_layout 添加到 listView 中: LayoutInflater inf

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - jssor 画廊不能一起使用缩略图和标题