playground
/
ResponsiveSlides.js
mirror of https://github.com/viljamis/ResponsiveSlides.js
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Cleaning things up for merging

pull/21/head
Viljami S 13 years ago
parent
8d7d352ece
commit
54d980db4d
6 changed files with 58 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 0
      demo/demo.css
  2. 4
      demo/demo.html
  3. BIN
      demo/themes/img/psd/arrows.psd
  4. 12
      demo/themes/themes.css
  5. 0
      demo/themes/themes.gif
  6. 16
      demo/themes/themes.html

0
demo/example.css → demo/demo.css
Unescape View File

4
demo/demo.html
Unescape View File

@ -9,7 +9,8 @@
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../responsiveslides.min.js"></script> <script src="../responsiveslides.min.js"></script>
<script> <script>
jQuery(function() { $(function () {
// Slideshow 1 // Slideshow 1
$("#slides1").responsiveSlides({ $("#slides1").responsiveSlides({
maxwidth: 800 maxwidth: 800
@ -22,6 +23,7 @@
fade: 300, fade: 300,
maxwidth: 540 maxwidth: 540
}); });
}); });
</script> </script>
</head> </head>

BIN
demo/themes/img/psd/arrows.psd
View File

Binary file not shown.

12
demo/themes/css/styles.css → demo/themes/themes.css
Unescape View File

@ -25,10 +25,16 @@ body {
} }
h1 { h1 {
font: 600 24px/32px sans-serif; font: 600 28px/36px sans-serif;
margin: 50px 0; margin: 50px 0;
} }
h3 {
font: 600 18px/24px sans-serif;
color: #999;
margin: 0 0 20px;
}
.rslides { .rslides {
margin: 0 auto; margin: 0 auto;
} }
@ -51,7 +57,7 @@ h1 {
text-decoration: none; text-decoration: none;
height: 61px; height: 61px;
width: 38px; width: 38px;
background: transparent url(../img/arrows.gif) no-repeat left top; background: transparent url("themes.gif") no-repeat left top;
margin-top: -45px; margin-top: -45px;
} }
@ -94,7 +100,7 @@ h1 {
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: #000 url(../img/arrows.gif) no-repeat left 50%; background: #000 url("themes.gif") no-repeat left 50%;
width: 38px; width: 38px;
} }

0
demo/themes/img/arrows.gif → demo/themes/themes.gif
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 359 B

After

Width:  |  Height:  |  Size: 359 B

16
demo/themes/demo_themes.html → demo/themes/themes.html
Unescape View File

@ -2,14 +2,15 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Alternative pagination styles</title> <title>ResponsiveSlides.js &middot; Alternative themes</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="../../responsiveslides.css" /> <link rel="stylesheet" href="../../responsiveslides.css" />
<link rel="stylesheet" href="css/styles.css" /> <link rel="stylesheet" href="themes.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../../responsiveslides.js"></script> <script src="../../responsiveslides.js"></script>
<script> <script>
jQuery(function() { $(function () {
// Slideshow 1 // Slideshow 1
$("#slides1").responsiveSlides({ $("#slides1").responsiveSlides({
auto: false, auto: false,
@ -36,14 +37,15 @@
fade: 300, fade: 300,
maxwidth: 800 maxwidth: 800
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<div id="wrapper"> <div id="wrapper">
<h1>Alternative pagination styles</h1> <h1>Three different ways to use next/prev buttons</h1>
<!-- Slideshow 1 --> <h3>Vertically centered on both sides</h3>
<div class="rslides_container"> <div class="rslides_container">
<ul id="slides1"> <ul id="slides1">
<li><img src="../1.jpg" alt="" /></li> <li><img src="../1.jpg" alt="" /></li>
@ -52,7 +54,7 @@
</ul> </ul>
</div> </div>
<!-- Slideshow 2 --> <h3>Transparent buttons over the left and right side</h3>
<div class="rslides_container"> <div class="rslides_container">
<ul id="slides2"> <ul id="slides2">
<li><img src="../1.jpg" alt="" /></li> <li><img src="../1.jpg" alt="" /></li>
@ -61,7 +63,7 @@
</ul> </ul>
</div> </div>
<!-- Slideshow 3 --> <h3>100% height with vertically centered icons</h3>
<div class="rslides_container"> <div class="rslides_container">
<ul id="slides3"> <ul id="slides3">
<li><img src="../1.jpg" alt="" /></li> <li><img src="../1.jpg" alt="" /></li>
Write Preview
Loading…
Cancel
Save