Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
239 changes: 239 additions & 0 deletions 11.Sample-Shuffle.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@
<!DOCTYPE html>


<!--
#######################################
- THE HEAD PART -
######################################
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>

<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

<!-- CSS STYLE-->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

<!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />

<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="../src/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.themepunch.revolution.min.js"></script>

<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="../src/css/settings.css" media="screen" />

<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>

</head>



<!--
#######################################
- THE BODY PART -
######################################
-->
<body>

<article class="prevnext">
<a class="" href="01.Sample-Boxed.html">01</a>
<a class="" href="02.Sample-Fullwidth.html">02</a>
<a class="" href="03.Sample-FullScreen.html">03</a>
<a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
<a class="" href="05.Sample-Aligns.html">05</a>
<a class="" href="06.Sample-AlignForce.html">06</a>
<a class="" href="07.Sample-Videos.html">07</a>
<a class="" href="08.Sample-NavigationStyle.html">08</a>
<a class="" href="09.Sample-Api.html">09</a>
<a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
<a class="active" href="11.Sample-Shuffle.html">11</a>
<a class="" href="12.Sample-Backgrounds.html">12</a>
<a class="" href="13.Sample-HideCaptions.html">13</a>
<a class="" href="14.Sample-KenBurns.html">14</a>
<a class="" href="15.Sample-VideoBG.html">15</a>
<a class="" href="16.Caption-ShowDown.html">16</a>
<a class="" href="17.Sample-DottedBG.html">17</a>
<a class="" href="18.Sample-NewCaptionEffects.html">18</a> </article>


<!-- HEADER -->
<header>
<section class="container">
<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
<div style="clear:both"></div>
</section>
</header> <!-- END OF HEADER -->


<article class="boxedcontainer">

<!--
#################################
- THEMEPUNCH BANNER -
#################################
-->
<!-- START REVOLUTION SLIDER 3.1 rev5 fullwidth mode -->

<div class="tp-banner-container">
<div class="tp-banner" >
<ul>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">


<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos fade"
data-x="0"
data-y="0"
data-speed="500"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Slide 1
</div>
</li>

<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos fade"
data-x="0"
data-y="0"
data-speed="500"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Slide 2
</div>


</li>

<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos fade"
data-x="0"
data-y="0"
data-speed="500"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Slide 3
</div>
</li>

<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg4.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos fade"
data-x="0"
data-y="0"
data-speed="500"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Slide 4
</div>
</li>


</ul>
<div class="tp-bannertimer"></div>
</div>
</div>

<!-- THE SCRIPT INITIALISATION -->
<!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
<script type="text/javascript">

var revapi;

jQuery(document).ready(function() {

revapi = jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:500,
hideThumbs:10,
shuffle:"on"

});

}); //ready

</script>

<!-- END REVOLUTION SLIDER -->


</article><!-- Content End -->








<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->

<section class="container">
<h2>Shuffle Mode</h2>
<p>Activate simple the Shuffle Mode of the slider via the option shuffle:"on". It reorders at load the slider, but till new load, it will stay in this order.</p>
<div style="width:100%;height:20px"></div>
<h3> Initialise the Plugin somewhere in the Body Footer:</h3>
<pre>
&lt;script type="text/javascript"&gt;
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:500,
hideThumbs:10,
<strong>shuffle:"on"</strong>

});
});
&lt;/script&gt;
</pre>
</section>






</body>
6 changes: 3 additions & 3 deletions examples/01.Sample-Boxed.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,11 @@


<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.themepunch.revolution.min.js"></script>

<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../src/css/settings.css" media="screen" />

<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
Expand Down
7 changes: 3 additions & 4 deletions examples/02.Sample-Fullwidth.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,12 @@
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />


<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.themepunch.revolution.min.js"></script>

<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../src/css/settings.css" media="screen" />

<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
Expand Down
7 changes: 3 additions & 4 deletions examples/03.Sample-FullScreen.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,12 @@
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />


<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.themepunch.revolution.min.js"></script>

<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../src/css/settings.css" media="screen" />

<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
Expand Down
6 changes: 3 additions & 3 deletions examples/04.Sample-FullScreen-Offsets.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />

<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.themepunch.revolution.min.js"></script>

<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../src/css/settings.css" media="screen" />

<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
Expand Down
7 changes: 3 additions & 4 deletions examples/05.Sample-Aligns.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,12 @@
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />


<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.themepunch.revolution.min.js"></script>

<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../src/css/settings.css" media="screen" />

<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
Expand Down
7 changes: 3 additions & 4 deletions examples/06.Sample-AlignForce.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,12 @@
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />


<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.themepunch.revolution.min.js"></script>

<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../src/css/settings.css" media="screen" />

<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
Expand Down
7 changes: 3 additions & 4 deletions examples/07.Sample-Videos.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,12 @@
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />


<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.themepunch.revolution.min.js"></script>

<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../src/css/settings.css" media="screen" />

<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
Expand Down
7 changes: 3 additions & 4 deletions examples/08.Sample-NavigationStyle.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,12 @@
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />


<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.themepunch.revolution.min.js"></script>

<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../src/css/settings.css" media="screen" />

<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
Expand Down
9 changes: 4 additions & 5 deletions examples/09.Sample-Api.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<<!DOCTYPE html>
<!DOCTYPE html>


<!--
Expand All @@ -23,13 +23,12 @@
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />


<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.themepunch.revolution.min.js"></script>

<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../src/css/settings.css" media="screen" />

<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
Expand Down
Loading