幻灯片收费插件破解版-ROYALSLIDER-VIDEO GALLERY

星期三, 2015-01-14 14:31 — shiping1

我所使用的方法   已打包成附件 RoyalSlider.zip
   下面是html代码
<section id="covers">

   <h1 class="visuallyhidden">Covers</h1>

       <div id="full-width-slider" class="royalSlider rsUni">

           <div class="rsContent">
               <a href="http://www.istitutomarangoni.com.cn/zh/campus/shanghai">               <img class="rsImg" src="{dede:global.cfg_templets_skin/}/images/index/1600x610-shanghai-building-black.jpg" alt="shanghai training centre" width="1600" height="610">
               <div class="infoBlock rsABlock" data-fade-effect="true" data-move-offset="10" data-move-effect="bottom" data-speed="200">
                                       
                                                                                   
                                                           </div>
               </a>           </div>

           <div class="rsContent rsABlock">
                               <img class="rsImg" src="{dede:global.cfg_templets_skin/}/images/index/we-say-bravo-istituto-marangoni-hp.jpg" alt="Istituto Marangoni" width="1600" height="610">
               <div class="infoBlock rsABlock" data-fade-effect="true" data-move-offset="10" data-move-effect="bottom" data-speed="200">
                                       
                                                                                   
                                                           </div>
                           </div>

   </div>
   <div class="cut-white-bkg"></div>
</section>

下面是css代码
<link href="{dede:global.cfg_templets_skin/}/style/index/royalslider.css" rel="stylesheet">

<link href="{dede:global.cfg_templets_skin/}/style/index/rs-universal.css" rel="stylesheet">

    下面是js代码

<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/index/jquery-1.9.1.min.js"></script>
<script src="{dede:global.cfg_templets_skin/}/js/index/jquery-migrate-1.1.1.min.js"></script>
<script src="{dede:global.cfg_templets_skin/}/js/index/jquery.royalslider.min.js"></script>
<script>
    jQuery(document).ready(function($) {
        $('#full-width-slider').royalSlider({
            keyboardNavEnabled: true,
            imageScaleMode: 'fill',
            autoPlay: {
                enabled: true,
                pauseOnHover: true,
                delay: 5000
            },
            transitionType:'move',
            globalCaption: false,
        });
    });
</script>

首页 > jquery插件 > 媒体> 幻灯片和轮播图

插件描述

RoyalSlider 可以创建包括文字、图片、视频的幻灯片效果，在每个桌面和移动设备提供良好的用户体验。而遗憾的是这款插件是收费的，但是本站经过多次测试终于把某些模板整理了出来。该模板是用于播放视频的。

使用步骤

1、引入以下的js和css文件

<link href="royalslider.css" rel="stylesheet">
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.royalslider.min.js"></script>
<link href="reset.css" rel="stylesheet">
<link href="rs-default.css" rel="stylesheet">

2、在head标签中加入以下js代码

<script>
    jQuery(document).ready(function($) {
        $('#video-gallery').royalSlider({
            arrowsNav: false,
            fadeinLoadedSlide: true,
            controlNavigationSpacing: 0,
            controlNavigation: 'thumbnails',
 
            thumbs: {
                autoCenter: false,
                fitInViewport: true,
                orientation: 'vertical',
                spacing: 0,
                paddingBottom: 0
            },
            keyboardNavEnabled: true,
            imageScaleMode: 'fill',
            imageAlignCenter: true,
            slidesSpacing: 0,
            loop: false,
            loopRewind: true,
            numImagesToPreload: 3,
            video: {
                autoHideArrows: true,
                autoHideControlNav: false,
                autoHideBlocks: true
            },
            autoScaleSlider: true,
            autoScaleSliderWidth: 960,
            autoScaleSliderHeight: 450
        });
    });
</script>

3、在body标签中加入以下格式的html代码（详细请查看下载包中的Demo）

<div class="page wrapper main-wrapper">
     
    <div class="row clearfix">
         
        <div class="col span_6 fwImage">
             
            <div id="video-gallery" class="royalSlider videoGallery rsDefault">
                <a class="rsImg" data-rsvideo="http://www.youtube.com/watch?v=HFbHRWwyihE" href="images/admin-video.png">
                <div class="rsTmb">
                     
                    <h5>
                        New RoyalSlider
                    </h5>
<span>by Dmitry Semenov</span>
                </div>
</a><a class="rsImg" data-rsvideo="https://vimeo.com/45830194"href="images/319715493_640.jpg">
                <div class="rsTmb">
                     
                    <h5>
                        Stanley Piano
                    </h5>
<span>by Digital Kitchen</span>
                </div>
</a>
                <div class="rsContent">
                    <a class="rsImg" data-rsvideo="https://vimeo.com/31240369" href="images/210393954_640.jpg">
                    <div class="rsTmb">
                         
                        <h5>
                            I Believe I Can Fly
                        </h5>
<span>by sebastien montaz-rosset</span>
                    </div>
</a>
                    <h3 class="rsABlock sampleBlock">
                        Animated block, to show you that you can put anything you want inside each slide.
                    </h3>
 
                </div>
<a class="rsImg" data-rsvideo="https://vimeo.com/44878206"href="images/311891198_640.jpg">
                <div class="rsTmb">
                     
                    <h5>
                        Dubstep Dispute
                    </h5>
<span>by Fluxel Media</span>
                </div>
</a><a class="rsImg" data-rsvideo="https://vimeo.com/45778774"href="images/318502540_640.jpg">
                <div class="rsTmb">
                     
                    <h5>
                        The Epic & The Beasts
                    </h5>
<span>by Sebastian Linda</span>
                </div>
</a><a class="rsImg" data-rsvideo="https://vimeo.com/41132461"href="images/284709146_640.jpg">
                <div class="rsTmb">
                     
                    <h5>
                        Barcode Band
                    </h5>
<span>by Kang woon Jin</span>
                </div>
</a><a class="rsImg" data-rsvideo="hhttps://vimeo.com/44388232"href="images/308375094_640.jpg">
                <div class="rsTmb">
                     
                    <h5>
                        Samm Hodges Reel
                    </h5>
<span>by Animal</span>
                </div>
</a><a class="rsImg" data-rsvideo="http://www.youtube.com/watch?v=VDspPKDMBMo" href="images/02.jpg">
                <div class="rsTmb">
                     
                    <h5>
                        The Foundry Showreel
                    </h5>
<span>by The Foundry</span>
                </div>
</a>
            </div>
 
        </div>
 
    </div>
 
</div>

参数配置

参数名参数说明可选值默认值
autoScaleSlider 是否基于基础宽度自动更新滑块高度 true或false false
autoScaleSliderWidth 幻灯片基本宽度整数 800
autoScaleSliderHeight 幻灯片基本高度整数 400
imageScaleMode 图片缩放模式 “fill”, “fit”, “fit-if-smaller” 或 “none” ‘fit-if-smaller’
imageAlignCenter 幻灯片是否居中对齐 true或false true
imageScalePadding 图片和幻灯片边缘的距离，在’fill’缩放模式下不起作用数字 4
controlNavigation 导航类型 ‘bullets’, ‘thumbnails’, ‘tabs’ 或 ‘none’ ‘bullets’
arrowsNav 是否用箭头导航 true或false true
arrowsNavAutoHide 箭头导航是否自动隐藏 true或false true
arrowsNavHideOnTouch 箭头导航是否在触摸设备中隐藏 true或false false
imgWidth 所有图片的基本宽度整数 null
imgHeight 所有图片的基本高度整数 null
slidesSpacing 幻灯片之间的间隔，单位px 整数 8
startSlideId 从第几张幻灯片开始播放整数 0
loop 是否从最后一张幻灯片滑动到第一张 true或false false
loopRewind 是否从最后一张幻灯片通过环绕的方式滑动到第一张，重写loop参数 true或false false
randomizeSlides 是否随机一张幻灯片开始播放 true或false false
numImagesToPreload 幻灯片预加载的图片数量，如果设置为0，那么开始将只有一张图片显示在列表中整数 4
usePreloader Enables spinning preloader, you may style it via CSS (class rsPreloader). Since 9.3 version. true或false true
slidesOrientation 滑动方向 ‘vertical’ 或 ‘horizontal’ ‘horizontal’
transitionType 切换过渡类型 ‘move’ 或 ‘fade’ ‘move ‘
transitionSpeed 切换毫秒速度整数 600
navigateByClick 是否允许在幻灯片上点击鼠标导航 true或false true
sliderDrag 是否允许在幻灯片上鼠标拖动导航 true或false true
sliderTouch 是否允许触摸导航 rue或false true
keyboardNavEnabled 是否允许键盘按键控制导航 true或false false
fadeinLoadedSlide Fades in slide after it’s loaded. true或false true
allowCSS3 是否允许css3效果的使用 true或false true
globalCaption Adds global caption element to slide true或false true
addActiveClass 是否在切换之前将rsActiveSlide应用到当前幻灯片的样式上 true或false false
minSlideOffset 拖拽时的最小偏移量数字 10
autoHeight 缩放和动画基本高度 false

slides 重写html幻灯片，用于创建未附加到DOM的的元素 null

来自 http://www.jq22.com/jquery-info26

附件	大小
RoyalSlider.zip	55.55 KB

普通分类:

div+css

You are here

首页 > jquery插件 > 媒体> 幻灯片和轮播图

插件描述

使用步骤

参数配置

友情链接

搜索表单

用户登录

You are here

幻灯片收费插件破解版-ROYALSLIDER-VIDEO GALLERY

首页 > jquery插件 > 媒体> 幻灯片和轮播图

插件描述

使用步骤

参数配置

友情链接