Skip to content
Browse files

Make the thing a bit more generic

  • Loading branch information...
1 parent 52fc50e commit 2f0bc47b5f5060041846fade917b6e7db5825005 @fdv fdv committed Oct 11, 2009
Showing with 99 additions and 13 deletions.
  1. +6 −4 lib/typo_sliding_posts.rb
  2. +10 −9 stylesheets/typo_sliding_posts.css
  3. +83 −0 typo_sliding_posts.css
View
10 lib/typo_sliding_posts.rb
@@ -4,11 +4,13 @@ module TypoSlidingPosts
end
module TypoSlidingPostsHelper
- def render_carousel(articles)
+ def render_sliding_posts(articles)
i = 0
- carousel = '<div id="carousel">'
- carousel << '<a href="#" class="carousel-control" id="carousel-previous" rel="prev"><img src="/images/theme/fleche1.png" alt="Article précédent" /></a>'
- carousel << '<a href="#" class="carousel-control" id="carousel-next" rel="next"><img src="/images/theme/fleche2.png" alt="Article suivant" /></a>'
+ carousel = stylesheet_link_tag('typo_sliding_posts')
+ carousel << javascript_include_tag('carousel')
+ carousel << '<div id="carousel">'
+ carousel << '<a href="#" class="carousel-control" id="carousel-previous" rel="prev"><img src="/images/carousel_previous.png" alt="Article précédent" /></a>'
+ carousel << '<a href="#" class="carousel-control" id="carousel-next" rel="next"><img src="/images/carousel_next.png" alt="Article suivant" /></a>'
carousel << '<div id="carousel-wrapper">'
carousel << '<div id="carousel-content">'
articles.each do |article|
View
19 stylesheets/typo_sliding_posts.css
@@ -1,35 +1,36 @@
#carousel {
- width: 644px;
+ width: 100%;
margin-top: 3px;
- height: 195px;
+ height: 180px;
overflow: hidden;
position: relative;
border: #000 3px solid;
margin-bottom: 30px;
}
#carousel-wrapper {
- width: 650px;
- height: 200px;
+ width: 100%;
+ height: 180px;
overflow: hidden;
}
#carousel-content {
- width: 2000px;
+ width: 100%;
+ overflow: hidden;
}
#carousel-content .slide {
float: left;
- width: 650px;
- height: 195px;
- padding-top: 135px;
+ width: 100%;
+ height: 180px;
+ padding-top: 120px;
}
#carousel-content .slide p {
bottom: 0;
color: #fff;
height: 60px;
margin: 0;
- width: 650px;
+ width: 100%;
line-height: 16px;
font-size: 18px;
font-family: "Trebuchet MS", Calibri, Helvetica, sans-serif;
View
83 typo_sliding_posts.css
@@ -0,0 +1,83 @@
+#carousel {
+ width: 100%;
+ margin-top: 3px;
+ height: 180px;
+ overflow: hidden;
+ position: relative;
+ border: #000 3px solid;
+ margin-bottom: 30px;
+}
+
+#carousel-wrapper {
+ width: 100%;
+ height: 180px;
+ overflow: hidden;
+}
+
+#carousel-content {
+ width: 2000px;
+}
+#carousel-content .slide {
+ float: left;
+ width: 100%;
+ height: 180px;
+ padding-top: 135px;
+}
+
+#carousel-content .slide p {
+ bottom: 0;
+ color: #fff;
+ height: 60px;
+ margin: 0;
+ width: 100%;
+ line-height: 16px;
+ font-size: 18px;
+ font-family: "Trebuchet MS", Calibri, Helvetica, sans-serif;
+ cursor: pointer;
+}
+
+#carousel-content .slide p small {
+ font: 11px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif;
+}
+
+#carousel-content .slide p a {
+ color: #fff;
+ text-decoration: none;
+ display: block;
+ opacity:0.7;
+ filter:alpha(opacity=70);
+ background: #000;
+ padding: 5px 10px;
+}
+
+#carousel-content .slide p a:hover {
+ opacity:0.9;
+ filter:alpha(opacity=90);
+}
+
+a#carousel-previous,
+a#carousel-next {
+ position: absolute;
+ top: 50px;
+ opacity:0.2;
+ filter:alpha(opacity=20);
+}
+
+a#carousel-previous img,
+a#carousel-next img {
+ border: none;
+}
+
+a#carousel-previous:hover,
+a#carousel-next:hover {
+ opacity: 1;
+ filter: alpha(opacity=100);
+}
+
+a#carousel-previous {
+ left: 0;
+}
+
+#carousel-next {
+ right: 0;
+}

0 comments on commit 2f0bc47

Please sign in to comment.
Something went wrong with that request. Please try again.