Skip to content
Browse files

added slide transitions

- transition is selected through use of transition=tname on the !SLIDE
  definition

- any transitions supported by jQuery Cycle plugin are supported,
  see http://www.malsup.com/jquery/cycle/browser.html

- custom transitions can be added as per jQuery Cycle plugin, see
  http://www.malsup.com/jquery/cycle/adv2.html
  • Loading branch information...
1 parent a92cf92 commit f56591ac03d0bc21b5976ed771a2fae9ae41e7ea @krisb krisb committed Mar 15, 2010
Showing with 18 additions and 10 deletions.
  1. +2 −2 example/one/slidesA.md
  2. +13 −4 lib/showoff.rb
  3. +3 −4 public/js/showoff.js
View
4 example/one/slidesA.md
@@ -2,7 +2,7 @@
# First Slide #
-!SLIDE bullets incremental
+!SLIDE bullets incremental transition=fade
# Second Slide #
@@ -12,6 +12,6 @@
* a fourth thing
* a fifth thing
-!SLIDE center
+!SLIDE center transition=scrollUp
![octocat](octocat.png)
View
17 lib/showoff.rb
@@ -55,15 +55,24 @@ def process_markdown(name, content)
end
slides.each do |slide|
md = ''
+ # extract content classes
lines = slide.split("\n")
- classes = lines.shift
+ content_classes = lines.shift.split
slide = lines.join("\n")
- md += '<div class="slide">'
+ # add content class too
+ content_classes.unshift "content"
+ # extract transition, defaulting to none
+ transition = 'none'
+ content_classes.delete_if { |x| x =~ /^transition=(.+)/ && transition = $1 }
+ puts "classes: #{content_classes.inspect}"
+ puts "transition: #{transition}"
+ # create html
+ md += "<div class=\"slide\" data-transition=\"#{transition}\">"
if seq
- md += "<div class=\"content #{classes}\" ref=\"#{name}/#{seq.to_s}\">\n"
+ md += "<div class=\"#{content_classes.join(' ')}\" ref=\"#{name}/#{seq.to_s}\">\n"
seq += 1
else
- md += "<div class=\"content #{classes}\" ref=\"#{name}\">\n"
+ md += "<div class=\"#{content_classes.join(' ')}\" ref=\"#{name}\">\n"
end
sl = Markdown.new(slide).to_html
sl = update_image_paths(name, sl)
View
7 public/js/showoff.js
@@ -52,9 +52,8 @@ function initializePresentation() {
slides = $('#preso > .slide')
slideTotal = slides.size()
- //setup jquery cycle with default show/hide transition
+ //setup manual jquery cycle
$('#preso').cycle({
- fx: 'none',
timeout: 0
})
@@ -131,8 +130,8 @@ function showSlide(back_step) {
}
currentSlide = slides.eq(slidenum)
-
- $('#preso').cycle(slidenum)
+ var transition = currentSlide.attr('data-transition')
+ $('#preso').cycle(slidenum, transition)
percent = getSlidePercent()
$("#slideInfo").text((slidenum + 1) + '/' + slideTotal + ' - ' + percent + '%')

0 comments on commit f56591a

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