最近、Royal Slider のライセンスを購入し、提供されたドキュメントを使用して ASP.NET Web サイト (TheFullertonian.com) に実装し始めました。サムネイルの問題は別として、なんとかスライダーを入れて動作させることができました。
このリンクのようにビューアーを動作させようとしています: http://dimsemenov.com/plugins/royal-slider/gallery/
div タグを操作するためのリンクの例を取得しました。複数の写真を表示するには、「div id='imageId[####]」を (div class="col span_4 fwImage") に追加するだけです。コード内のアンカー タグは、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 スライダーのコードです。何らかの理由で、大きな画像は問題なく表示されますが、ビューアーには常に 1 つのサムネイルしか表示されません。このコードを、最初の 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>
}
1 つの写真の下に複数のサムネイルを表示できるようにするにはどうすればよいですか? これまでのところ、スライダーの上部に表示されている大きな写真に対応するサムネイルが 1 つだけ表示されます。
スライダーがどのように見えるかを確認したい場合は、次のリンクをたどってください: http://thefullertonian.com/Article/Details/739