Adding pagination

fburatti · Dec 18, 2013 · 763ceea · 763ceea
1 parent a57917f
commit 763ceea
Show file tree

Hide file tree

Showing 6 changed files with 409 additions and 239 deletions.
diff --git a/README.md b/README.md
@@ -3,56 +3,9 @@
 A simple, lightweight, and responsive jQuery slideshow by <a href="http://kthornbloom.com" target="_blank">Kevin Thornbloom</a> that features Ken Burns type animations.
 
 
-##Demo
-http://kthornbloom.com/smoothslides
+##Demo and Usage Info
+http://kthornbloom.com/smoothslides.php
 
-##Features
-
-- Lightweight [6Kb]
-- Four Animation Types: Zoom In, Zoom Out, Pan Left, Pan Right, Pan Up, Pan Down
-- Easily add captions
-- CSS3 transitions for smoother effects
-- Responsive image sizes
-- Set various defaults
-
-##Usage
-- Include smoothslides.css in the header
-- Include jQuery and smoothslides.min.js in the footer
-- Create a div with a class of "ss-slides". Create each slide within as a div called "ss-slide" and place your image inside. Images should be the same size. 
-- Want a caption? Add a title attribute to your "ss-slide" div.
-- Call your script:
-<script type="text/javascript">
-$(window).load( function() {
-    $(document).smoothSlides();
-});
-- Or, to specify options, call your script like this: 
-$(window).load( function() {
-    $(document).smoothSlides({
-    	/* milliseconds */
-    	playTimer: 4000,
-    	/* CSS easing type */
-		animEasing: 'ease-in-out',
-		/* Options are: none, random, zoomIn, zoomOut, panLeft, panRight, panUp, panDown */
-		autoanimType: 'random',
-		nextText: 'Next',
-		prevText: 'Prev',
-		captions: 'true',
-		navigation: 'true'
-    });
-});
-</script>
-
-
-
-##Browser Support
-- Full support: Chrome, Safari, Firefox (16+), Internet Explorer (9+)
-- Supported without transitions: Internet Explorer 7-8, Firefox (-16)
-- Unsupported: Internet Explorer 6
-
-		
-
-##Licensing
-Free to use and modify personally or commercially. Not for resale. 
 
 ##Help & Feedback
 Connect with me on <a href="https://twitter.com/kthornbloom" target="_blank">twitter.</a>

diff --git a/css/smoothslides.css b/css/smoothslides.css
@@ -2,23 +2,36 @@
     position: relative;
     display: inline-block;
     line-height: 0px;
-    overflow: hidden;
-    border-radius: 6px;
 }
-.ss-caption {
-    background:rgb(255,255,255);
-    background:rgba(255,255,255,.7);
-    color:#555;
-    width:100%;
-    padding:15px 0;
-    font-family:sans-serif;
-    font-size:16px;
+.ss-capwrap {
     text-align:center;
     position:absolute;
-    bottom:0px;
-    -webkit-transition:all .2s ease-out;
-    -moz-transition:all .2s ease-out;
-    transition:all .2s ease-out;
+    bottom:5px;
+    width:100%;
+    text-align: center;
+}
+.ss-caption {
+    font-size:16px;
+    display: inline-block;
+}
+.ss-pag-wrap {
+    position: absolute;
+    text-align: center;
+    width: 100%;
+}
+.ss-paginate {
+    display: inline-block;
+    font-size: 20px; 
+}
+.ss-paginate a:link,
+.ss-paginate a:visited {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    background: #ccc;
+}
+.ss-current {
+    background:#000!important;
 }
 .ss-slides {
     position:relative;
@@ -53,21 +66,13 @@
     transition: none!important;
 }
 #ss-prev, #ss-next {
-    position:absolute;
-    bottom:0;
-    z-index: 50;
-    font-size: 14px;
-    line-height: 1em;
-    display: inline-block;
-    background:rgb(255,255,255);
-    background:rgba(255,255,255,.7);
-    color:#000;
-    padding:8px;
-    text-decoration: none;
+    position: absolute;
+}
+#ss-prev:hover, #ss-next:hover {
 }
 #ss-prev {
-    left:0px;
+    left:-23px;
 }
 #ss-next {
-    right:0px;
+    right:-23px;
 }
diff --git a/css/smoothslides.theme.css b/css/smoothslides.theme.css
@@ -0,0 +1,104 @@
+.ss-slides-wrap {
+    position: relative;
+    display: inline-block;
+    line-height: 0px;
+}
+.ss-capwrap {
+    text-align:center;
+    position:absolute;
+    bottom:5px;
+    width:100%;
+    text-align: center;
+}
+.ss-caption {
+    background: #444444; 
+    border-radius:4px;
+    color:#fff;    
+    padding:15px 10px;
+    font-family:sans-serif;
+    font-size:16px;
+    display: inline-block;
+}
+.ss-pag-wrap {
+    position: absolute;
+    text-align: center;
+    width: 100%;
+    padding-top:5px;
+}
+.ss-paginate {
+    display: inline-block;
+    font-size: 20px;
+    padding: 5px 10px;
+    border-radius: 4px;
+    background: #444444;  
+}
+.ss-paginate a:link,
+.ss-paginate a:visited {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 6px;
+    margin: 3px 6px;
+    background: #FFF;
+}
+.ss-current {
+    background:#36f9a5!important;
+    box-shadow: inset 0 1px 0 #fff, 0 0 0 3px rgba(54, 249, 165, 0.27), 0 2px 2px #000;
+}
+.ss-slides {
+    position:relative;
+    overflow:hidden;
+    display:inline-block;
+    transform-origin:50% 50%;
+    -ms-transform-origin:50% 50%;
+    -webkit-transform-origin:50% 50%;
+}
+.ss-slide {
+    top:0;
+    left:0;
+    position: absolute;
+    zoom: 1;
+    line-height:0;
+    -webkit-backface-visibility: hidden;
+}
+.ss-slide:after {
+    content: "";
+    display: block;
+    clear: both;
+    visibility: hidden;
+    line-height: 0;
+    height: 0;
+}
+.ss-slide img {
+    max-width:100%;    
+}
+.notrans {
+    -webkit-transition: none!important;
+    -moz-transition:none!important;
+    transition: none!important;
+}
+#ss-prev, #ss-next {
+    position: absolute;
+    top: 50%;
+    z-index: 50;
+    font-size: 55px;
+    font-family: serif;
+    margin-top: -20px;
+    line-height: 31px;
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+    color: #a7a7a7;
+    background: #FFF;
+    text-decoration: none;
+    border-radius: 30px;
+}
+#ss-prev:hover, #ss-next:hover {
+    color:#000;
+}
+#ss-prev {
+    left:-23px;
+}
+#ss-next {
+    right:-23px;
+}
diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
 	<link rel="icon" href="favicon.ico">
 
 <!-- CSS ====================================================== --> 
-	<link rel="stylesheet" href="css/smoothslides.css">
+	<link rel="stylesheet" href="css/smoothslides.theme.css">
 	<!-- Demo CSS (don't use) -->
 	<style type="text/css">
 		body, html {
@@ -88,18 +88,17 @@ <h1>Smoothslides</h1>
 	</div>
 </div>
 <br>
-
-<h2>Download & Info</h2>
-<a href="https://github.com/kthornbloom/Smoothslides" id="hub">Github</a>
+<h2>Help</h2>
+<a href="http://kthornbloom.com/smoothslides.php" id="hub">Usage & Info</a>
+<a href="https://github.com/kthornbloom/Smoothslides" id="hub">Download</a>
 </div><br>
 <!-- JS ======================================================= --> 
 	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
 	<script type="text/javascript" src="js/smoothslides.min.js"></script>
 	<script type="text/javascript">
-$(window).load( function() {
-    // use default options
-    $(document).smoothSlides();
-});
-</script>
+		$(window).load( function() {
+			$(document).smoothSlides();
+		});
+	</script>
 </body>
 </html>