我最近购买了 Royal Slider 的许可证，并开始使用提供的文档在我们的 ASP.NET 网站中实现它：TheFullertonian.com。除了缩略图问题，我已经设法让滑块进入并工作。
我试图让我们的查看器像此链接中的那样工作：http: //dimsemenov.com/plugins/royal-slider/gallery/
我得到了使用 div 标签的链接示例。要查看多张照片，您只需在 (div class="col span_4 fwImage") 中添加更多“div id='imageId[####]”。代码中的锚标记显示图像最初在 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 增加了一层难度。必须将脚本添加到滑块中，并且我们已将我们的脚本放在一个部分中，该部分还包含我们当前的 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 滑块的代码。出于某种原因，较大的图像会显示得很好，但在任何给定时间，查看器中只会显示一个缩略图。请将此代码与第一个 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>
}
我如何才能在一张照片下查看多个缩略图？到目前为止，我只看到一个与滑块上部显示的较大照片相关的缩略图。
如果您想查看滑块现在的外观，请点击以下链接： http ://thefullertonian.com/Article/Details/739