jssor Gallery無法同時使用縮略圖和標題

Question

我正在尋找我的問題的答案，已有3天了，到目前為止，找不到很好的答案。
我發現的最接近的是這個問題，但對我沒有用。
我正在使用jssor畫廊，並且我需要畫廊按照示例鏈接畫廊中的說明進行工作，在主圖像下方有縮略圖，在圖像底部有標題
我可以使用縮略圖和標題分別制作圖片庫，但是當我嘗試將兩者結合時，則無法使用。

這是我用拇指和標題為畫廊使用的代碼：

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

如果我的問題不會被忽略，將不勝感激。

Answer 1

1. 一,缺少在你的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 }, 

2. 刪除display: none; 來自slider1_container 。

   更換

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

   與

    <div id="slider1_container" style="