<meta name="copyright"
content="Copyright © 2013 Kim Nguyễn" />
+ <!-- Load jQuery -->
+ <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
+
+ <!-- Initialize the library -->
<link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"
media="all" />
- <!-- allows to switch themes in firefox -->
+ <script src="../simpleWebSlides.js" type="text/javascript" >
+ </script>
- <link rel="stylesheet" title="Default" href="../themes/default.css"
- type="text/css" />
- <link rel="alternate stylesheet" title="Web 2.0"
+ <!-- Load a custom Theme -->
+ <link rel="stylesheet" title="Web 2.0"
href="../themes/webTwoPointO.css"
type="text/css" />
- <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
- <script src="../simpleWebSlides.js" type="text/javascript" ></script>
<!-- Customize some templates and initialize -->
<script type="text/javascript">
/*
- SWS.Presentation.setTemplate('sws-slide-change',
- SWS.Effects.slideChangeVerticalSlide);
- SWS.Presentation.setTemplate('sws-slide-change',
- SWS.Effects.slideChangeHorizontalSlide);
- SWS.Presentation.setTemplate('sws-slide-change',
- SWS.Effects.slideChangeFadeOutIn);
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeVerticalSlide;
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
*/
- SWS.Presentation.setTemplate('sws-slide-change',
- SWS.Effects.slideChangeHorizontalFlip);
-
- SWS.Presentation.setTemplate('sws-object-deactivate',
- SWS.Effects.objectDeactivateFadeOut);
-
- SWS.Presentation.setTemplate('sws-object-activate',
- SWS.Effects.objectActivateFadeIn);
-
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeHorizontalSlide;
+ SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
+ SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
SWS.Presentation.init();
</div>
</div>
-
+ <!-- H1 below is hidden, used for table of content (TODO) -->
<h1>Introduction</h1>
<div class="sws-slide" >
your <span style='font-size:larger'>❤</span>'s content
with <em id="css">C S S</em>!</li>
<li class="sws-pause" >Create animations using Javascript & jQuery!</li>
- <li class="sws-onslide-1_3_5_7">(I'm here every other frame)</li>
+ <li class="sws-onslide-1_3-5_7">(I'm here every other frame)</li>
</ul>
<script type="text/javascript">
var zoom_title = function (canvas) {
h1.animate({"font-size":"80pt" }, 300)
.animate({"font-size":old_size }, 300);
};
- SWS.Presentation.registerCallback(3, zoom_title);
+ SWS.Presentation.registerCallback(6, zoom_title);
</script>
</div>
return result;
};
+
+};
+
+
+
+
+SWS.Templates = new function () {
+ var self = this;
self.slideActivate = function (o) {
if (!(o.hasClass("sws-active-slide"))){
o.removeClass("sws-inactive-slide").addClass("sws-active-slide");
self.objectDeactivate = function (o) {
if (!(o.hasClass("sws-inactive-object"))){
o.addClass("sws-inactive-object").removeClass("sws-active-object");
- o.css({'visibility':'hidden'});
return true;
};
return false;
};
+
self.updateFooter = function (o) {
var footer = o.find(".sws-footer");
if (footer.length && (footer.children("*").length == 0)) {
};
self.updateHeader = function (o) {};
};
+SWS.ConfigBuilder = function () {
+ var self = this;
+ self['sws-object-activate'] = SWS.Templates.objectActivate;
+ self['sws-object-deactivate'] = SWS.Templates.objectDeactivate;
+ self['sws-slide-change'] = SWS.Templates.slideChange;
+ self['sws-update-footer'] = SWS.Templates.updateFooter;
+ self['sws-update-header'] = SWS.Templates.updateHeader;
+};
+
+SWS.Defaults = new SWS.ConfigBuilder ();
+
+SWS.Config = new SWS.ConfigBuilder ();
SWS.Effects = new function () {
self.objectDeactivateFadeOut = function (o) {
o.animate({'opacity': '0'}, 150,
- function () { SWS.Utils.objectDeactivate(o)});
+ function () { SWS.Templates.objectDeactivate(o)});
};
self.objectActivateFadeIn = function (o) {
- if (SWS.Utils.objectActivate(o)){
+ if (SWS.Templates.objectActivate(o)){
o.animate({'opacity': '1' }, 150);
};
var t = SWS.Presentation.getSlide(to);
f.animate({ 'left': '50%', 'width': '0pt', 'opacity':'0' }, 150,
function () {
- SWS.Utils.slideDeactivate(f);
+ SWS.Templates.slideDeactivate(f);
f.css({'left':'0%', 'width': '100%'});
t.css({ 'left': '50%', 'width': '0pt','opacity':'0' });
- SWS.Utils.slideActivate(t);
+ SWS.Templates.slideActivate(t);
t.animate({'left':'0%', 'width': '100%','opacity':'1'});
});
};
var f = SWS.Presentation.getSlide(from);
var t = SWS.Presentation.getSlide(to);
f.animate({ 'opacity': '0'}, 150,
- function () { SWS.Utils.slideDeactivate(f);
- SWS.Utils.slideActivate(t);
+ function () { SWS.Templates.slideDeactivate(f);
+ SWS.Templates.slideActivate(t);
t.css('opacity', '0');
t.animate({ 'opacity': '1'}, 150);
});
var t = SWS.Presentation.getSlide(to);
if (from < to) {
t.css('left', '100%');
- SWS.Utils.slideActivate(t);
- f.animate({ 'left': '-100%' }, 250, function () { SWS.Utils.slideDeactivate(f); });
+ SWS.Templates.slideActivate(t);
+ f.animate({ 'left': '-100%' }, 250, function () { SWS.Templates.slideDeactivate(f); });
t.animate({ 'left': '0%' }, 250);
} else {
t.css('left', '-100%');
- SWS.Utils.slideActivate(t);
- f.animate({ 'left': '100%' }, 250, function () { SWS.Utils.slideDeactivate(f); });
+ SWS.Templates.slideActivate(t);
+ f.animate({ 'left': '100%' }, 250, function () { SWS.Templates.slideDeactivate(f); });
t.animate({ 'left': '0%' }, 250);
};
};
var t = SWS.Presentation.getSlide(to);
if (from < to) {
t.css('top', '100%');
- SWS.Utils.slideActivate(t);
- f.animate({ 'top': '-100%' }, 250, function () { SWS.Utils.slideDeactivate(f); });
+ SWS.Templates.slideActivate(t);
+ f.animate({ 'top': '-100%' }, 250, function () { SWS.Templates.slideDeactivate(f); });
t.animate({ 'top': '0%' }, 250);
} else {
t.css('top', '-100%');
- SWS.Utils.slideActivate(t);
- f.animate({ 'top': '100%' }, 250, function () { SWS.Utils.slideDeactivate(f); });
+ SWS.Templates.slideActivate(t);
+ f.animate({ 'top': '100%' }, 250, function () { SWS.Templates.slideDeactivate(f); });
t.animate({ 'top': '0%' }, 250);
};
};
};
-
SWS.Presentation = new function () {
var self = this;
//TODO move outside of the Presentation object
- var templates = {};
var _total_slides;
var _slide_callbacks = new Array ();
-
-
- //Public methods
- self.setTemplate = function (tn, fn) {
- templates[tn] = fn;
- };
-
self.getNumSlides = function () { return _total_slides; };
self.getSlide = function(i) {
var info = to_slide.data("sws-frame-info");
if (slide_change) {
//Launch a slide transition:
- templates['sws-slide-change'](from_slide_num, to_slide_num);
+ SWS.Config['sws-slide-change'](from_slide_num, to_slide_num);
watch_slide_anim = true;
- templates['sws-update-header'](to_slide);
- templates['sws-update-footer'](to_slide);
+ SWS.Config['sws-update-header'](to_slide);
+ SWS.Config['sws-update-footer'](to_slide);
for (var i = 0; i < info.callbacks.at_slide.length;i++){
info.callbacks.at_slide[i](to_slide);
};
to_slide.children(".sws-slide").find("*").andSelf().each(function (i){
var frameset = $(this).data("sws-frame-set") || {};
if (frameset[cur])
- templates['sws-object-activate']($(this));
+ SWS.Config['sws-object-activate']($(this));
else
- templates['sws-object-deactivate']($(this));
+ SWS.Config['sws-object-deactivate']($(this));
});
var callbacks;
self.previous = function () {
var i = self.getCurrentFrame();
- if (i == self.firstFrame())
+ if (i == self.firstFrame()){
self.previousSlide();
+ self.setCurrentFrame(self.lastFrame());
+ }
else
self.previousFrame();
};
- self.setTemplate('sws-object-activate', SWS.Utils.objectActivate);
- self.setTemplate('sws-object-deactivate', SWS.Utils.objectDeactivate);
- self.setTemplate('sws-slide-change', SWS.Utils.slideChange);
- self.setTemplate('sws-update-footer', SWS.Utils.updateFooter);
- self.setTemplate('sws-update-header', SWS.Utils.updateHeader);
};