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