c# - Royal Slider 中仅显示一个缩略图

Question

我最近购买了 Royal Slider 的许可证，并开始使用提供的文档将其实现到我们的 ASP.NET 网站:TheFullertonian.com。我已经设法让 slider 进入并解决缩略图问题。

我正在尝试让我们的查看器像此链接中的那样工作:http://dimsemenov.com/plugins/royal-slider/gallery/

我得到了使用 div 标签的链接示例。要查看多张照片，您需要做的就是将更多的“div id='imageId[####]”添加到 (div class="col span_4 fwImage") 中。代码中的 anchor 标记显示图像最初在 dimsemenov.com 链接中的显示方式。

<div class="col span_4 fwImage">
<div id="gallery-1" class="royalSlider rsDefault">
<div id="imageId1108">
<a class="rsImg"
href="http://thefullertonian.com/Content/Article/2013.03.17_16.28.20_IMG_2664.JPG">
    </a>
        <div>
<a class="deleteLink" href="http://thefullertonian.com/Image/Delete/1108">Delete</a>
        </div>
<img width="96" height="72" class="rsTmb"                                                        
src="http://thefullertonian.com/Content/Article/2013.03.17_16.28.20_IMG_2664.JPG" /> 
</a>
</div>
<div id="imageId1105">
    <a class="rsImg"    
href="http://thefullertonian.com/Content/Article/2013.03.17_16.27.00_IMG_2660.JPG">
    </a>
        <div>
            <a class="deleteLink"  
href="http://thefullertonian.com/Image/Delete/1105">Delete</a>
        </div>
<img width="96" height="72" class="rsTmb"  
src="http://thefullertonian.com/Content/Article/2013.03.17_16.27.00_IMG_2660.JPG" />  
</a>
</div>
<div id="imageId1106">
    <a class="rsImg" 
href="http://thefullertonian.com/Content/Article/2013.03.17_16.27.03_IMG_2661.JPG">
    </a>
        <div>
            <a class="deleteLink" 
href="http://thefullertonian.com/Image/Delete/1106">Delete</a>
        </div>
    <img width="96" height="72" class="rsTmb"   
src="http://thefullertonian.com/Content/Article/2013.03.17_16.27.03_IMG_2661.JPG" /> 
</a>
</div>
<div id="imageId1107">
    <a class="rsImg"  
href="http://thefullertonian.com/Content/Article/2013.03.17_16.27.06_IMG_2662.JPG">
    </a>
        <div>
            <a class="deleteLink" 
href="http://thefullertonian.com/Image/Delete/1107">Delete</a>
        </div>
    <img width="96" height="72" class="rsTmb"  
src="http://thefullertonian.com/Content/Article/2013.03.17_16.27.06_IMG_2662.JPG" /> 
</a>
</div>
<div id="imageId1109">
    <a class="rsImg"  

href="http://thefullertonian.com/Content/Article/2013.03.17_16.38.01_IMG_2666.JPG">
    </a>
        <div>
            <a class="deleteLink"  
href="http://thefullertonian.com/Image/Delete/1109">Delete</a>
        </div>
    <img width="96" height="72" class="rsTmb"  
src="http://thefullertonian.com/Content/Article/2013.03.17_16.38.01_IMG_2666.JPG" /> 
</a>
</div>
<div id="imageId1110">
    <a class="rsImg"  
href="http://thefullertonian.com/Content/Article/2013.03.20_16.30.42_new-red-clown-wig- 
zoom.jpg">
    </a>
        <div>
            <a class="deleteLink"  
href="http://thefullertonian.com/Image/Delete/1110">Delete</a>
        </div>
    <img width="40" height="72" class="rsTmb"  
src="http://thefullertonian.com/Content/Article/2013.03.20_16.30.42_new-red-clown-wig- 
zoom.jpg" /></a>
</div>

<a class="rsImg" data-rsw="632" data-rsh="500" data- 
rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/2.jpg"  
href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/2.jpg">Vincent 
van Gogh - The Starry Night<img width="96" height="72" class="rsTmb"  
src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/2.jpg" /></a>
<a class="rsImg"  data-
rsBigImg="http://thefullertonian.com/Content/Article/2013.03.20_16.30.42_new-red-clown-
wig-zoom.jpg" href="http://thefullertonian.com/Content/Article/2013.03.20_16.30.42_new- 
red-clown-wig-zoom.jpg">Leonardo da Vinci - Mona Lisa<img width="96" height="72" 
class="rsTmb" src="http://thefullertonian.com/Content/Article/2013.03.20_16.30.42_new-
red-clown-wig-zoom.jpg" /></a>
<a class="rsImg" data-rsw="417" data-rsh="500" data- 
rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/4.jpg"  
href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/4.jpg">Grant 
DeVolson Wood - American Gothic<img width="96" height="72" class="rsTmb" 
src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/4.jpg" /></a>
<a class="rsImg" data-rsw="601" data-rsh="500" data-
rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/5.jpg" 
href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/5.jpg">Rembrandt 
- The Night Watch<img width="96" height="72" class="rsTmb" 
src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/5.jpg" /></a>
<a class="rsImg" data-rsw="350" data-rsh="500" data-
rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/6.jpg" 
href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/6.jpg">Johannes 
Vermeer - Girl with a Pearl Earring<img width="96" height="72" class="rsTmb" 
src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/6.jpg" /></a>
<a class="rsImg" data-rsw="596" data-rsh="500" data-
rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/7.jpg" 
href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/7.jpg">Paul 
Cezanne - Card Players<img width="96" height="72" class="rsTmb" 
src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/7.jpg" /></a>
<a class="rsImg" data-rsw="700" data-rsh="414" data-
rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/8.jpg" 
href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/8.jpg">Ilya 
Repin - Reply of the Zaporozhian Cossacks<img width="96" height="72" class="rsTmb" 
src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/8.jpg" /></a>
<a class="rsImg" data-rsw="470" data-rsh="500" data-
rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/9.jpg"  
href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/9.jpg">Ivan 
Aivazovsky - Chesmabattle<img width="96" height="72" class="rsTmb" 
src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/9.jpg" /></a>
<a class="rsImg" data-rsw="500" data-rsh="500" data-
rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/10.jpg" 
href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/10.jpg">Gustav 
Klimt - The Kiss<img width="96" height="72" class="rsTmb" 
src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/10.jpg" /></a>
 <a class="rsImg" data-rsw="700" data-rsh="475" data-
rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/11.jpg" 
href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/11.jpg">Ivan 
Shishkin - Morning in a Pine Forest<img width="96" height="72" class="rsTmb" 
src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/11.jpg" /></a>
</div>
</div>
</div>
</div>

我已经能够复制出画廊模板的纯 HTML 版本。缩略图就像在 dimseminov.com 链接中一样工作，但实现 C# Razor 增加了一层困难。必须将脚本添加到 slider ，我们将我们的脚本放在一个部分中，该部分还包含我们当前的 Royal Slider 实现。

<script>
$(function () {
    var bar = $('.bar');
    var percent = $('.percent');
    var status = $('#status');
    $('.royalSlider').royalSlider({
        fullscreen: {
            enabled: true,
            nativeFS: true
        },
        arrowsNav: true,
        imageAlignCenter: true,
        controlNavigation: 'thumbnails',
        loop: true,
        navigateByClick: true,
        autoScaleSlider: true,
        autoScaleSliderWidth: 42.5,
        autoScaleSliderHeight: 35,
        numImagesToPreload: 2,
        keyboardNavEnabled: true,
        fadeinLoadedSlide: true,
        thumbs: {
            fitInViewport: true,
            appendSpan: false,
            firstMargin: true,
            arrows: true,
            paddingBottom: 4,

        }
    });
    $('form').ajaxForm({
        beforeSend: function () {
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        uploadProgress: function (event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        complete: function (xhr) {
            status.html(xhr.responseText);
        }
    });
});
</script>

下面是 TheFullertonian slider 的代码。出于某种原因，较大的图像可以很好地显示，但在任何给定时间，查看器中只会显示一个缩略图。请将此代码与第一个 html 示例中列出的代码进行比较。

@if (Model != null)
{
<div class="royalSlider reDefault">
    @foreach (var item in Model)
    {
        <div id="imageId@(item.ImageId)">
            <a href="/Image/Details/@item.ImageId">
                <img src="@(item.FullPath)?width=650&height=431&mode=max&scale=canvas"
        alt="@item.Title" />
                <div>@item.Title</div>
            </a>
            <img height="72" class="rsTmb" src="@(item.FullPath)" />
        </div>
    }
    <div class="rsTmb"></div>
</div>
}

如何才能在一张照片下查看多个缩略图？到目前为止，我只看到一个与 slider 上部显示的较大照片相关的缩略图。

如果您想查看 slider 现在的外观，请访问此链接:http://thefullertonian.com/Article/Details/739

Answer 1

您只包含核心 RoyalSlider JS 文件，没有模块。您需要包含缩略图模块才能使它们正常工作。

德米特里