Mercurial > public > sg101

changeset 275:2b14840cb882

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Fixing #127; using jquery cycle plugin to power the home page slideshow.
author Brian Neal <bgneal@gmail.com>
date Mon, 27 Sep 2010 03:36:58 +0000
parents 2a3285e32062
children 8a46843c258f
files gpp/templates/home.html media/js/slideshow.js
diffstat 2 files changed, 17 insertions(+), 30 deletions(-) [+]
line wrap: on
line diff
--- a/gpp/templates/home.html	Sun Sep 26 19:18:55 2010 +0000
+++ b/gpp/templates/home.html	Mon Sep 27 03:36:58 2010 +0000
@@ -14,13 +14,27 @@
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/news.css" />
 {% endblock %}
 {% block custom_js %}
-<script type="text/javascript" src="{{ MEDIA_URL }}js/slideshow.js"></script>
+<script type="text/javascript">
+   $(document).ready(function() {
+      $('#home-slideshow img:first').fadeIn(1000, function() {
+         $('#home-slideshow').cycle({
+            fx: 'fade',
+            timeout: 5000,
+            pause: 1,
+            delay: 1000
+         });
+      });
+   });
+</script>
+<style type="text/css">
+#home-slideshow img { display: none }
+</style>
 {% endblock %}
 {% block content %}
 <h2>Welcome to SurfGuitar101!</h2>
 <div class="span-9">
-   <div id="slideshow">
-   <img src="{{ MEDIA_URL }}slideshow/image-1.jpg" alt="Slideshow Image 1" class="active" />
+   <div id="home-slideshow">
+   <img src="{{ MEDIA_URL }}slideshow/image-1.jpg" alt="Slideshow Image 1" />
    <img src="{{ MEDIA_URL }}slideshow/image-2.jpg" alt="Slideshow Image 2" />
    <img src="{{ MEDIA_URL }}slideshow/image-3.jpg" alt="Slideshow Image 3" />
    <img src="{{ MEDIA_URL }}slideshow/image-4.jpg" alt="Slideshow Image 4" />
--- a/media/js/slideshow.js	Sun Sep 26 19:18:55 2010 +0000
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,27 +0,0 @@
-/*** 
-    Simple jQuery Slideshow Script
-    Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.  Please link out to me if you like it :)
-***/
-// Modified by Brian Neal.
-
-function slideSwitch() {
-    var $active = $('#slideshow img.active');
-
-    if ( $active.length == 0 ) $active = $('#slideshow img:last');
-
-    // use this to pull the images in the order they appear in the markup
-    var $next =  $active.next().length ? $active.next()
-        : $('#slideshow img:first');
-
-    $active.addClass('last-active');
-
-    $next.css({opacity: 0.0})
-        .addClass('active')
-        .animate({opacity: 1.0}, 1000, function() {
-            $active.removeClass('active last-active');
-        });
-}
-
-$(function() {
-    setInterval( "slideSwitch()", 5000 );
-});