我现在正在为我的问题寻找答案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 -->
如果我的问题不会被忽视，我将不胜感激。
答案 0 :(得分：0)
您的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
},
从display: none;移除slider1_container。
替换
<div id="slider1_container" style="display: none;
与
<div id="slider1_container" style="