{"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
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 3、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。 基于ElasticSearch + Spark的智能搜索和推荐系统源码+项目说明.zip
资源推荐
资源详情
资源评论
收起资源包目录
基于ElasticSearch + Spark的智能搜索和推荐系统源码+项目说明.zip (2000个子文件)
rateit.aspx 290B
components.min.css 493KB
components.css 195KB
bootstrap.css 149KB
bootstrap.css 145KB
bootstrap.css 145KB
bootstrap.css 123KB
bootstrap.min.css 121KB
bootstrapTheme.css 120KB
main.css 120KB
bootstrap.css 118KB
bootstrap.min.css 115KB
bootstrap.min.css 100KB
bootstrap.min.css 98KB
bootstrap.css 84KB
layout.css 60KB
animate.css 60KB
layout.css 50KB
settings.css 49KB
editor_ie7.css 48KB
editor_iequirks.css 47KB
editor_ie8.css 46KB
editor_ie.css 46KB
editor_gecko.css 45KB
editor.css 45KB
layout.min.css 43KB
plugins.min.css 39KB
datatables.css 37KB
plugins.css 35KB
datepicker3.css 33KB
bootstrap-datepicker3.standalone.css 33KB
datatables.min.css 33KB
bootstrap-datepicker3.css 32KB
font-awesome.css 32KB
bootstrap-datepicker3.standalone.min.css 31KB
bootstrap-datepicker3.min.css 31KB
fontello.css 30KB
red-intense.css 29KB
green-haze.css 29KB
purple-studio.css 29KB
blue-steel.css 29KB
yellow-orange.css 29KB
default.css 29KB
red-sunglo.css 29KB
blue-hoki.css 29KB
yellow-crusta.css 29KB
purple-plum.css 29KB
editor.css 28KB
jquery-ui-1.10.3.custom.min.css 27KB
jquery-ui.min.css 26KB
style.css 26KB
style.css 26KB
font-awesome.min.css 26KB
settings-ie8.css 26KB
bootstrap-theme.css 26KB
light.css 25KB
bootstrap-theme.min.css 24KB
light2.css 24KB
grey.css 23KB
style.min.css 22KB
style.min.css 22KB
red-intense.min.css 22KB
blue-steel.min.css 22KB
blue-hoki.min.css 22KB
yellow-crusta.min.css 22KB
purple-plum.min.css 22KB
green-haze.min.css 22KB
red-sunglo.min.css 22KB
yellow-orange.min.css 22KB
default.min.css 22KB
purple-studio.min.css 22KB
lightgreen.css 22KB
darkblue.css 22KB
default.css 22KB
responsive.css 21KB
font-awesome.css 21KB
bootstrap-editable.css 21KB
_all.css 20KB
bootstrap-theme.css 19KB
datepicker.css 18KB
bootstrap-datepicker.standalone.css 18KB
select2.css 17KB
font-awesome.min.css 17KB
bootstrap-theme.min.css 17KB
dialog_ie7.css 17KB
bootstrap-datepicker.css 17KB
select2.css 17KB
dialog_ie8.css 16KB
dialog_iequirks.css 16KB
dialog_ie.css 16KB
bootstrap-datepicker.standalone.min.css 16KB
dialog.css 15KB
bootstrap-datepicker.min.css 15KB
layerslider.css 15KB
select2-bootstrap.min.css 15KB
select2.min.css 15KB
_all.css 14KB
_all.css 14KB
_all.css 12KB
datetimepicker.css 12KB
共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
土豆片片
- 粉丝: 1823
- 资源: 5645
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功