Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

added a thumbnail demo

  • Loading branch information...
commit d0a3356a900f07a5e88f0fb6a64171a1004d994a 1 parent 8a84228
@ekallevig authored
Showing with 103 additions and 23 deletions.
  1. +18 −19 index.html
  2. +85 −4 jshowoff.css
View
37 index.html
@@ -205,32 +205,18 @@
</div><!--end #donate-->
</div><!--end #action-->
- <h2>Sliding Demo</h2>
+ <h2>Sliding Effect &amp; Custom Labels Demo</h2>
<div id="slidingFeatures">
- <div><a href="http://google.com"><img src="http://farm5.static.flickr.com/4017/4303103738_a4745a3e6d_o.jpg" alt="Shore" /></a></div>
- <div><img src="http://farm5.static.flickr.com/4062/4302354579_2a16dcb3cd_o.jpg" alt="Eddie" class="eddie" /><h2>HTML Slide</h2><p>Example of an HTML slide.</p><p>Lorem ipsum dolor sit amet, nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.</p><p><a href="http://reddit.com">Learn More &#8250;</a></p></div>
- <div><a href="http://imgur.com"><img src="http://farm5.static.flickr.com/4067/4302354517_d72d321f17_o.jpg" alt="Flower" /></a></div>
- <div><a href="http://gmail.com"><img src="http://farm3.static.flickr.com/2739/4303103822_a3b23ff7f5_o.jpg" alt="Fern" /></a></div>
- </div>
- <script type="text/javascript">
- $(document).ready(function(){ $('#slidingFeatures').jshowoff({
- effect: 'slideLeft',
- hoverPause: false
- }); });
- </script>
-
-
- <h2>Custom Labels Demo</h2>
- <div id="labelFeatures">
<div title="Shore"><a href="http://google.com"><img src="http://farm5.static.flickr.com/4017/4303103738_a4745a3e6d_o.jpg" alt="Shore" /></a></div>
<div title="Dog"><img src="http://farm5.static.flickr.com/4062/4302354579_2a16dcb3cd_o.jpg" alt="Eddie" class="eddie" /><h2>HTML Slide</h2><p>Example of an HTML slide.</p><p>Lorem ipsum dolor sit amet, nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.</p><p><a href="http://reddit.com">Learn More &#8250;</a></p></div>
<div title="Flower"><a href="http://imgur.com"><img src="http://farm5.static.flickr.com/4067/4302354517_d72d321f17_o.jpg" alt="Flower" /></a></div>
<div title="Fern"><a href="http://gmail.com"><img src="http://farm3.static.flickr.com/2739/4303103822_a3b23ff7f5_o.jpg" alt="Fern" /></a></div>
</div>
<script type="text/javascript">
- $(document).ready(function(){ $('#labelFeatures').jshowoff({
+ $(document).ready(function(){ $('#slidingFeatures').jshowoff({
+ effect: 'slideLeft',
controlText:{play:'Reproducir',pause:'Pausar',previous:'Anterior',next:'Siguiente'},
- hoverPause: false
+ hoverPause: false
}); });
</script>
@@ -250,7 +236,20 @@
hoverPause: false
}); });
</script>
-
+
+ <h2>Re-styled Thumbnail Demo</h2>
+ <div id="thumbFeatures">
+ <div><a href="http://google.com"><img src="http://farm5.static.flickr.com/4056/4438272805_0abbbbaff2_o_d.jpg" alt="Mountain" /></a></div>
+ <div><a href="http://google.com"><img src="http://farm3.static.flickr.com/2754/4439049486_ec397f1d76_o_d.jpg" alt="Mountain" /></a></div>
+ <div><a href="http://imgur.com"><img src="http://farm5.static.flickr.com/4011/4439049454_d5e54a53f7_o_d.jpg" alt="Mountain" /></a></div>
+ <div><a href="http://gmail.com"><img src="http://farm3.static.flickr.com/2656/4438272741_b26665f2c4_o_d.jpg" alt="Mountain" /></a></div>
+ </div>
+ <script type="text/javascript">
+ $(document).ready(function(){ $('#thumbFeatures').jshowoff({
+ cssClass: 'thumbFeatures',
+ effect: 'slideLeft'
+ }); });
+ </script>
</div><!--end #demo-->
View
89 jshowoff.css
@@ -227,6 +227,7 @@ a.submit {
#download a:hover, a.submit:hover {
background-color: #1e5398;
border-color: #153f75;
+ color: #fff;
}
#donate {
@@ -263,6 +264,9 @@ a.submit {
display: block;
font-weight: bold;
}
+#emailform .email_updates label {
+ display: inline;
+ }
.email_name, .email_address {
width: 205px;
float: left;
@@ -288,7 +292,6 @@ a.submit {
.email_submit {
margin: 25px 0;
- _height: 1%;
}
#status.error {
@@ -309,7 +312,7 @@ a.submit {
/*-- jShowOff module styles --*/
-#features, #slidingFeatures, #labelFeatures, #basicFeatures {
+#features, #slidingFeatures, #labelFeatures, #basicFeatures, #thumbFeatures {
background: #efefef;
position: relative;
overflow: hidden;
@@ -361,7 +364,7 @@ a.submit {
}
.jshowoff-slidelinks a, .jshowoff-controls a {
display: block;
- background: #000;
+ background-color: #000;
color: #fff;
padding: 5px 7px 5px;
margin: 5px 0 0 5px;
@@ -377,7 +380,7 @@ a.submit {
color: #fff;
}
.jshowoff-slidelinks a.jshowoff-active, .jshowoff-slidelinks a.jshowoff-active:hover {
- background: #fff;
+ background-color: #fff;
color: #000;
}
p.jshowoff-controls {
@@ -401,3 +404,81 @@ p.jshowoff-controls {
.jshowoff-pausetext {
color: #fff;
}
+
+
+/*-- Re-styled Thumbnail Demo --*/
+
+.thumbFeatures p.jshowoff-slidelinks {
+ background: #000;
+ bottom: 0;
+ padding: 5px 0 5px 5px;
+ right: 113px;
+ height: 32px;
+ }
+.thumbFeatures .jshowoff-slidelinks a {
+ display: block;
+ width: 60px;
+ height: 30px;
+ background-color: none;
+ background-repeat: no-repeat;
+ margin: 0 5px 0 0;
+ padding: 0;
+ border: 1px solid #4f4f4f;
+ text-indent: -10000em;
+ -moz-border-radius: 0;
+ -webkit-border-radius: 0;
+ }
+.thumbFeatures .jshowoff-slidelinks a.jshowoff-active {
+ border: 1px solid #fff;
+ }
+.thumbFeatures .jshowoff-slidelink-0 {
+ background-image: url(http://farm5.static.flickr.com/4065/4439060414_c11002d183_o_d.jpg);
+ }
+.thumbFeatures .jshowoff-slidelink-1 {
+ background-image: url(http://farm5.static.flickr.com/4049/4438283469_5ddf465356_o_d.jpg);
+ }
+.thumbFeatures .jshowoff-slidelink-2 {
+ background-image: url(http://farm5.static.flickr.com/4033/4439060472_02efbb3955_o_d.jpg);
+ }
+.thumbFeatures .jshowoff-slidelink-3 {
+ background-image: url(http://farm5.static.flickr.com/4041/4438283519_4f08cb4a57_o_d.jpg);
+ }
+.thumbFeatures p.jshowoff-controls {
+ background: none;
+ height: 38px;
+ overflow: visible;
+ padding: 0;
+ position: absolute;
+ top: 100px;
+ width: 100%;
+ z-index: 150;
+ }
+.thumbFeatures .jshowoff-controls a {
+ display: block;
+ width: 22px;
+ height: 38px;
+ background: none;
+ background-repeat: no-repeat;
+ margin: 0;
+ padding: 0;
+ text-indent: -10000em;
+ position: absolute;
+ }
+
+.thumbFeatures .jshowoff-controls a.jshowoff-prev {
+ left: 15px;
+ background-image: url(http://farm5.static.flickr.com/4035/4438728886_fd55756fc5_o_d.gif);
+ }
+.thumbFeatures .jshowoff-controls a.jshowoff-next {
+ right: 15px;
+ background-image: url(http://farm3.static.flickr.com/2743/4438728872_07e935da40_o_d.gif);
+ }
+.thumbFeatures .jshowoff-controls a.jshowoff-play {
+ display: none;
+ }
+.jshowoff.thumbFeatures {
+ height: 250px;
+ }
+.jshowoff.thumbFeatures div, .jshowoff.thumbFeatures img, .jshowoff.thumbFeatures {
+ -webkit-border-radius: 6px;
+ }
Please sign in to comment.
Something went wrong with that request. Please try again.