Royal Slider只显示一个缩略图

时间:2013-03-28 03:58:48

标签: c# asp.net-mvc image slider

我最近购买了Royal Slider的许可证,并开始使用提供的文档将其实现到我们的ASP.NET网站: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滑块的代码。由于某种原因,较大的图像将显示正常,但在任何给定时间只有一个缩略图将显示在查看器中。请将此代码与第一个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

1 个答案:

答案 0 :(得分:0)

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

梅德