Question

任何人都可以帮我在视频库中添加图片缩略图吗？这是我的网站：[skinwhitening101.weebly.com] [1]

[1]：http://skinwhitening101.weebly.com，正如您在我的主页中看到的，我使用Jssor滑块，而我的视频库只有数字缩略图。我尝试使用图像缩略图复制并粘贴其他幻灯片中的某些代码，但似乎无法正常工作。我修改了一些代码并在缩略图上放了一个图像，但仍无法正常工作。请求帮助！

Answer 1

请完成3个步骤以启用缩略图导航器。

添加$ ThumbnailNavigatorOptions来初始化jssor滑块。

var options = {
    ...
    $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
        $Cols: 10,                             //[Optional] Number of pieces to display, default value is 1
        $Align: 360                           //[Optional] The offset position to park thumbnail
    },
    ...
};

在滑块容器中添加缩略图导航器外观

<div id="slider1_container" ...>
    ...
    <!-- Thumbnail Navigator Skin Begin -->
    <!-- open skin\thumbnail-xx.source.html, copy/paste thumbnail navigator skin herer -->
    <!-- Thumbnail Navigator Skin End -->
    ...
</div>

在每张幻灯片中添加缩略图元素（＆lt; img u =“thumb”src =“url”/＆gt;），

<div u="slides" ...>
    <div>
        <img u="image" src="../img/alila/01.jpg" />
        <img u="thumb" src="../img/alila/thumb-01.jpg" />
    </div>
    <div>
        <img u="image" src="../img/alila/02.jpg" />
        <img u="thumb" src="../img/alila/thumb-02.jpg" />
    </div>
    ...
</div>

将缩略图添加到jssor视频库

1 个答案: