2
我最近购买了Royal Slider的许可证，并开始使用提供的文档将其实施到我们的ASP.NET网站：TheFullertonian.com。我已经设法让滑块进入并且避开缩略图的问题。Royal Slider只显示一个缩略图
我试图让我们的观众像在这个环节的工作：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="[email protected](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