{"version": "2.0","name": "Revolution Responsive jQuery Slider","subline": "","username": "ThemePunch","created": "06/22/2012","website": "http://www.codecanyon.com/user/themepunch?ref=themepunch","update": "06/08/2013","update_today": true,"email": "info@themepunch.com","description": "","intro": "For support please checkout http://themepunch.ticksy.com !","button_1_text": "","button_2_text": "","button_3_text": "","button_1_url": "","button_2_url": "","button_3_url": "","sections": [{"title": "How to start","id": "how_to_start","content": "<p>\tThis chapter will gives you general instructions on how to install the slider and setup the options. Later chapters will be more detailed if needed.</p>\n<p>\t </p>\n<h4>\n\tWhat files do I need to upload to my server?</h4>\n<p>\tPlease upload the rs-plugin folder to your server. In this folder you will find the following subfolders containing all of the items content:</p>\n<ul>\t<li>\t\tjs</li>\n\t<li>\t\tcss</li>\n\t<li>\t\tassets</li>\n</ul>\n<p>\tYou could use your own jQuery but we recommend loading it directly from the Google ressources (see later in this documentation).</p>\n<p>\tYou will find many <strong>examples</strong> in your downloaded zip under the <strong>examples&sources</strong> folder.. </p>\n<p>\t </p>\n<h4>\n\tImplement the jQuery</h4>\n<p>\tAdd the following lines to your HTML Head: </p>\n<pre class=\"js\">\n<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js></pre>\n<p>\t </p>\n<h4>\n\tAdd Revolution js and css files to your HTML page</h4>\n<div>\n\t </div>\n<div>\n\tAlso in the <HEAD> section:</div>\n<div>\n\t </div>\n<div>\n\t<pre class=\"html\">\n<!-- jQuery REVOLUTION Slider -->\n<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>\n<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>\n\n<!-- REVOLUTION BANNER CSS SETTINGS -->\n<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />\n</pre>\n\t<div>\n\t\t </div>\n</div>\n<div>\n\tThis contains the JS and CSS for the Slider itself and some helping modules .</div>\n<div>\n\t </div>\n<div>\n\t </div>\n<div>\n\t<h4>\n\t\tCreate a Container for the Banner</h4>\n\t<div>\n\t\t </div>\n\t<div>\n\t\tPut it in the HTML: (the class names used here are only examples. In our Example files we called them banner-container, fullwidthbanner-container and fullscreenbanner-container, different then here below ! )</div>\n\t<pre class=\"html\">\n<div class="bannercontainer">\n<div class="banner">...</div>\n</div>\n</pre>\n\t<div>\n\t\tThe Banner-container can have different Styling depending on that, which layout you wish to use. </div>\n\t<div>\n\t\t </div>\n\t<div>\n\t\t<h5>\n\t\t\tResponsive Style </h5>\n\t\t<p>\t\t\tThis Style allows you to creat predefined container sizes, undependent from sourrounding container, and create Medai Query (Browsr Size) Dependent responsive alterantives.</p>\n\t\t<p>\t\t\tIt requests</p>\n\t\t<ul>\t\t\t<li>\t\t\t\ta container with predefined Width and Height Attributes,</li>\n\t\t\t<li>\t\t\t\tMedia Query dependent Sizing. - this should be always with the same proportion. Means Width/Height should always have the same result !!!</li>\n\t\t</ul>\n\t\t<p>\t\t\tPut this in your CSS File (i.e) :</p>\n\t\t<pre class=\"css\">\n<strong>.bannercontainer</strong> {\npadding:0px;\nbackground-color:#fff;\nwidth:960px;\nposition:relative;\nposition:relative;\nmargin-left:auto;\nmargin-right:auto;\n}\n\n<strong>.banner</strong>{\nwidth:960px;\nheight:500px;\nposition:relative;\noverflow:hidden;\n}\n\n<strong>@media only screen and (min-width: 768px) and (max-width: 959px)</strong> {\n <span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span> .banner, .bannercontainer<span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>{<span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>width:760px; height:395px;}\n}\n\n\n<strong>@media only screen and (min-width: 480px) and (max-width: 767px)</strong> {\n .banner, .bannercontainer<span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>{<span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>width:480px; height:250px;<span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>}\n}\n\n<strong>@media only screen and (min-width: 0px) and (max-width: 479px)</strong> {\n .banner, .bannercontainer<span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>{<span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>width:320px;height:166px;<span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>}\n}</pre>\n\t\t<div>\n\t\t\t </div>\n\t\t<h5>\n\t\t\tFullWidth Style</h5>\n\t\t<p>\t\t\tThis Style allows you to have the banner always fit in the maximum width of the Sourrounding Container. </p>\n\t\t<p>\t\t\tIt requests:</p>\n\t\t<ul>\t\t\t<li>\t\t\t\ta Fluid wrapping container (which will always change the size depending on browser size. I.e. width:100% etc.. </li>\n\t\t</ul>\n\t\t<p>\t\t\tPut this in your CSS File </p>\n\t\t<pre class=\"css\">\n.<strong>bannercontainer</strong>{\nwidth:100% !important;\nposition:relative;\npadding:0;\nmax-height:500px !important;\noverflow:hidden;\n}</pre>\n\t</div>\n\t<div>\n\t\t<h4>\n\t\t\t </h4>\n\t\t<h5>\n\t\t\tFullScreen Style</h5>\n\t\t<p>\t\t\tThis Style allows you to have a banner always fit in the maxium screensize. In Some option you can select containers which will reduce the height of the banner with the height of the container. See examples.</p>\n\t\t<p>\t\t\tIt requests:</p>\n\t\t<ul>\t\t\t<li>\t\t\t\ta fullwidth and fullheight wrapping container</li>\n\t\t</ul>\n\t\t<p>\t\t\tPut this in your CSS File</p>\n\t\t<pre class=\"css\">\n.<strong>bannercontainer</strong> {\nwidth:100% !important;\nposition:relative;\npadding:0;\nheight:100%;\n}</pre>\n\t\t<h4>\n\t\t\t </h4>\n\t\t<h4>\n\t\t\tCreate Your First Slides</h4>\n\t\t<p>\t\t\tCreate an Unordered list inside the banner container where each <li> element will correspond to one slide.</p>\n\t\t<p>\t\t\t </p>\n\t\t<pre class=\"html\">\n<ul>\n<!-- THE BOXSLIDE EFFECT EXAMPLES WITH LINK ON THE MAIN SLIDE EXAMPLE -->\n\n <li data-transition="boxslide" data-slotamount="7" data-link="http://www.google.de"> \n <img src="images/slides/image1.jpg">\n <div class="caption sft big_white" data-x="400" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">KICKSTART YOUR WEBSITE</div>\n <div class="caption sfb big_orange" data-x="400" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">WITH SLIDER REVOLUTION!</div>\n <div class="caption lfr medium_grey" data-x="510" data-y="210" data-speed="300" data-start="2000">UNLIMITED TRANSITIONS</div>\n </li>\n...\n</ul></pre>\n\t\t<div>\n\t\t\t </div>\n\t\t<h4>\n\t\t\tCall the jQuery Plugin to build the Slider (Options need to be set of course...)</h4>\n\t\t<p>\t\t\t </p>\n\t\t<pre class=\"js\">\n<script type="text/javascript">\n\n var tpj=jQuery;\n tpj.noConflict();\n tpj(document).ready(function() {\n if (tpj.fn.cssOriginal!=undefined)\n tpj.fn.css = tpj.fn.cssOriginal;\n tpj('.fullscre
枫蜜柚子茶
- 粉丝: 9019
- 资源: 5351
最新资源
- 基于bilibili弹幕分析,包含爬虫、词云分析、词频分析、情感分析、构建衍生指标,可视化资料齐全+详细文档+源码.zip
- 基于Python 网络爬虫实战、数据分析合集 当当 网易云音乐 unsplash 必胜客 猫眼资料齐全+详细文档+源码.zip
- 基于python flask vue-element-admin selenium 爬虫 后台资料齐全+详细文档+源码.zip
- 基于Python爬虫小项目汇总(招聘信息电影信息股票信息天气信息贴吧信息图片信息视频信息..)资料齐全+详细文档+源码.zip
- 基于python模拟登陆一些大型网站资料齐全+详细文档+源码.zip
- 基于scrapy + selenium + phantomjs + mongodb机票爬虫(去哪儿和携程网)资料齐全+详细文档+源码.zip
- 基于rocket电商网站爬虫合集,淘宝京东亚马逊等资料齐全+详细文档+源码.zip
- 基于Python入门网络爬虫之精华版资料齐全+详细文档+源码.zip
- 基于Scrapy + seleniumwebdriver + 爬取某书整站爬虫资料齐全+详细文档+源码.zip
- 基于scrapy+scrapy-redis+selenium+pandas+matplotlibaqi天气信息爬虫、清洗资料齐全+详细文档+源码.zip
- 基于selenium + sqlite3 爬虫,实现将淘宝网站数据、1688网站数据的爬取,淘宝爬虫1688爬虫;并保存到数据库中资料齐全+详细文档+源码.zip
- 基于scrapy分布式爬虫,selenium 爬虫,手机群控(自动化)反爬破解文档资料齐全+详细文档+源码.zip
- 基于selenium 携程酒店爬虫+简单数据分析资料齐全+详细文档+源码.zip
- 基于selenium+python实现京东商品爬虫淘宝店铺爬虫资料齐全+详细文档+源码.zip
- 基于selenium裁判文书网爬虫,文书网登录资料齐全+详细文档+源码.zip
- 基于Selenium×Firefox自动化爬虫模板资料齐全+详细文档+源码.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈