r1524 - in branches/paul/suite: . demos demos/carousel demos/carousel/icons demos/coverflow demos...

r1524 - in branches/paul/suite: . demos demos/carousel demos/carousel/icons demos/coverflow demos...


Author: paul.bakaus
Date: Tue Jan 6 05:28:38 2009
New Revision: 1524
Added:
branches/paul/suite/demos/
branches/paul/suite/demos/carousel/
branches/paul/suite/demos/carousel/icons/
branches/paul/suite/demos/carousel/icons/1.png (contents, props
changed)
branches/paul/suite/demos/carousel/icons/10.png (contents, props
changed)
branches/paul/suite/demos/carousel/icons/2.png (contents, props
changed)
branches/paul/suite/demos/carousel/icons/3.png (contents, props
changed)
branches/paul/suite/demos/carousel/icons/4.png (contents, props
changed)
branches/paul/suite/demos/carousel/icons/5.png (contents, props
changed)
branches/paul/suite/demos/carousel/icons/6.png (contents, props
changed)
branches/paul/suite/demos/carousel/icons/7.png (contents, props
changed)
branches/paul/suite/demos/carousel/icons/8.png (contents, props
changed)
branches/paul/suite/demos/carousel/icons/9.png (contents, props
changed)
branches/paul/suite/demos/carousel/index.html
branches/paul/suite/demos/coverflow/
branches/paul/suite/demos/coverflow/handle.png (contents, props
changed)
branches/paul/suite/demos/coverflow/icons/
branches/paul/suite/demos/coverflow/icons/1.png (contents, props
changed)
branches/paul/suite/demos/coverflow/icons/10.png (contents, props
changed)
branches/paul/suite/demos/coverflow/icons/2.png (contents, props
changed)
branches/paul/suite/demos/coverflow/icons/3.png (contents, props
changed)
branches/paul/suite/demos/coverflow/icons/4.png (contents, props
changed)
branches/paul/suite/demos/coverflow/icons/5.png (contents, props
changed)
branches/paul/suite/demos/coverflow/icons/6.png (contents, props
changed)
branches/paul/suite/demos/coverflow/icons/7.png (contents, props
changed)
branches/paul/suite/demos/coverflow/icons/8.png (contents, props
changed)
branches/paul/suite/demos/coverflow/icons/9.png (contents, props
changed)
branches/paul/suite/demos/coverflow/index.html
branches/paul/suite/demos/coverflow/slider.png (contents, props
changed)
branches/paul/suite/demos/magnifier/
branches/paul/suite/demos/magnifier/icons/
branches/paul/suite/demos/magnifier/icons/1.png (contents, props
changed)
branches/paul/suite/demos/magnifier/icons/10.png (contents, props
changed)
branches/paul/suite/demos/magnifier/icons/2.png (contents, props
changed)
branches/paul/suite/demos/magnifier/icons/3.png (contents, props
changed)
branches/paul/suite/demos/magnifier/icons/4.png (contents, props
changed)
branches/paul/suite/demos/magnifier/icons/5.png (contents, props
changed)
branches/paul/suite/demos/magnifier/icons/6.png (contents, props
changed)
branches/paul/suite/demos/magnifier/icons/7.png (contents, props
changed)
branches/paul/suite/demos/magnifier/icons/8.png (contents, props
changed)
branches/paul/suite/demos/magnifier/icons/9.png (contents, props
changed)
branches/paul/suite/demos/magnifier/index.html
branches/paul/suite/jquery-1.2.6.js
branches/paul/suite/jquery.ui-1.6rc4.js
branches/paul/suite/jquery.ui-1.6rc4.min.js
branches/paul/suite/source/
branches/paul/suite/source/pb.carousel.js
branches/paul/suite/source/pb.coverflow.js
branches/paul/suite/source/pb.magnifier.js
branches/paul/suite/tests/
Log:
paul-dev: initial version of PB's personal plugin collection, including
improved versions of magnifier, carousel and coverflow
Added: branches/paul/suite/demos/carousel/icons/1.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/carousel/icons/10.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/carousel/icons/2.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/carousel/icons/3.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/carousel/icons/4.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/carousel/icons/5.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/carousel/icons/6.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/carousel/icons/7.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/carousel/icons/8.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/carousel/icons/9.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/carousel/index.html
==============================================================================
--- (empty file)
+++ branches/paul/suite/demos/carousel/index.html    Tue Jan 6 05:28:38 2009
@@ -0,0 +1,129 @@
+<!doctype html>
+<html>
+    <head>
+        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+        <title>Paul Bakaus' Carousel Demo</title>
+
+        <script src="../../jquery-1.2.6.js" type="text/javascript"></script>
+        <script src="../../jquery.ui-1.6rc4.js" type="text/javascript"></script>
+        <script src="../../source/pb.carousel.js"
type="text/javascript"></script>
+
+        <style type="text/css" media="screen">
+        
+        body,html {
+            margin: 0; padding: 0; background: #000; color: #fff;
+        }
+        
+        .demoflow {
+            position: relative; width: 500px; height: 160px; margin: 20px;;
+            background: #333; border: 1px solid black;
+        }
+        
+        #carousel4 {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            height: 500px;
+            width: 160px;
+        }
+        
+        p {
+            font-family: Arial;
+            font-size: 16px;
+            padding-left: 10px;
+            
+        }
+        
+        .demoflow div { float: left; cursor: pointer; cursor: hand; border: 1px
solid #666; }
+        .demoflow div img { height: 100%; width: 100%; }
+        
+        </style>
+
+    <script type="text/javascript">
+    
+        $(document).ready(function() {
+            
+            //Default carousel with auto animation
+            $("#carousel1").carousel({
+                height: 100,
+                width: 100
+            });
+            
+            //Carousel without auto animation
+            $("#carousel2").carousel({
+                height: 100,
+                width: 100,
+                animate: false
+            });
+            
+            //Carousel without mouse animation
+            $("#carousel3").carousel({
+                height: 100,
+                width: 100,
+                animateByMouse: false,
+                pausable: false
+            });
+            
+            //Vertical carousel
+            $("#carousel4").carousel({
+                height: 100,
+                width: 100,
+                orientation: 'vertical'
+            });    
+            
+        });    
+    
+    </script>
+
+    </head>
+    <body>
+        
+        

Default carousel


+        <div id="carousel1" class="demoflow">
+            <div class="wrapper"><img src="icons/1.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/2.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/3.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/4.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/5.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/6.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/7.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/8.png" alt="" /></div>
+        </div>
+        
+        

Carousel without auto animation


+        <div id="carousel2" class="demoflow">
+            <div class="wrapper"><img src="icons/1.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/2.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/3.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/4.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/5.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/6.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/7.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/8.png" alt="" /></div>
+        </div>
+        
+        

Auto-animated carousel, not controllable by mouse


+        <div id="carousel3" class="demoflow">
+            <div class="wrapper"><img src="icons/1.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/2.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/3.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/4.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/5.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/6.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/7.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/8.png" alt="" /></div>
+        </div>
+        
+        <div id="carousel4" class="demoflow">
+            <div class="wrapper"><img src="icons/1.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/2.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/3.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/4.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/5.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/6.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/7.png" alt="" /></div>        
+            <div class="wrapper"><img src="icons/8.png" alt="" /></div>
+        </div>
+
+    </body>
+</html>
\ No newline at end of file
Added: branches/paul/suite/demos/coverflow/handle.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/coverflow/icons/1.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/coverflow/icons/10.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/coverflow/icons/2.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/coverflow/icons/3.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/coverflow/icons/4.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/coverflow/icons/5.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/coverflow/icons/6.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/coverflow/icons/7.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/coverflow/icons/8.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/coverflow/icons/9.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/coverflow/index.html
==============================================================================
--- (empty file)
+++ branches/paul/suite/demos/coverflow/index.html    Tue Jan 6 05:28:38 2009
@@ -0,0 +1,131 @@
+<html>
+    <head>
+        <title>Coverflow featuring css transitions</title>
+        <style type="text/css" media="screen">
+            body,html { margin: 0; padding: 0; background: #000; height: 100%;
color: #eee; font-family: Arial; font-size: 10px; }
+            
+            #coverflow {
+                height: 80px; width: 2000px; padding: 30px;
+                position: absolute; top: 0px; left: 0px;
+            }
+            
+            #coverflow img {
+                width: 64px; height: 64px; border: 1px solid #999;
+                float: left; position: relative; margin: 5px;
+            }
+            
+            #coverflow2 {
+                width: 80px; height: 2000px; padding: 30px;
+                position: absolute; top: 0px; left: 0px;
+            }
+            
+            #coverflow2 img {
+                width: 64px; height: 64px; border: 1px solid #999;
+                float: left; position: relative; margin: 5px;
+            }
+            
+            div.wrapper {
+                height: 160px; width: 600px; border: 2px solid #999;
+                margin: 20px; overflow: hidden; position: relative;
+            }
+            
+            div.wrapper2 {
+                width: 160px; height: 600px; border: 2px solid #999;
+                margin: 20px; overflow: hidden; position: absolute; top: 0px; right:
0px;
+            }
+            
+            #slider {
+                position: absolute; bottom: 5px; left: 30px;
+                width: 542px; height: 19px; background: url(slider.png) no-repeat;
+            }
+            
+            div.ui-slider-handle {
+                position: absolute; top: 0px; left: 0px;
+                height: 100%; width: 181px;
+     background: url(handle.png) no-repeat; cursor: pointer;
cursor: hand;
+            }
+        
+        </style>
+        <script src="../../jquery-1.2.6.js" type="text/javascript"></script>
+        <script src="../../jquery.ui-1.6rc4.js" type="text/javascript"
charset="utf-8"></script>
+        <script src="../../source/pb.coverflow.js"
type="text/javascript"></script>
+                                
+        <script type="text/javascript">
+            $(document).ready(function() {
+
+                $("#coverflow").coverflow({
+                    //center: false
+                });
+                
+                $("#coverflow2").coverflow({
+                    //center: false
+                });
+                
+                $("#slider").slider({
+                    min: 0,
+                    max: $('#coverflow').length-1,
+                    slide: function(event, ui) {
+                        $('#coverflow').coverflow('select', ui.value);
+                    }
+                });
+
+            });
+            
+        </script>
+    </head>
+    <body>
+        
+    <div class="wrapper">
+        <div id="coverflow">
+            <img src="icons/1.png" />
+            <img src="icons/2.png" />
+            <img src="icons/3.png" />
+            <img src="icons/4.png" />
+            <img src="icons/5.png" />
+            <img src="icons/6.png" />
+            <img src="icons/7.png" />
+            <img src="icons/8.png" />
+            <img src="icons/9.png" />
+            <img src="icons/10.png" />
+            <img src="icons/1.png" />
+            <img src="icons/2.png" />
+            <img src="icons/3.png" />
+            <img src="icons/4.png" />
+            <img src="icons/5.png" />
+            <img src="icons/6.png" />
+            <img src="icons/7.png" />
+            <img src="icons/8.png" />
+            <img src="icons/9.png" />
+            <img src="icons/10.png" />
+        </div>
+        <div id="slider">
+            <div class="ui-slider-handle"></div>
+        </div>
+    </div>
+    
+    <div class="wrapper2">
+        <div id="coverflow2">
+            <img src="icons/1.png" />
+            <img src="icons/2.png" />
+            <img src="icons/3.png" />
+            <img src="icons/4.png" />
+            <img src="icons/5.png" />
+            <img src="icons/6.png" />
+            <img src="icons/7.png" />
+            <img src="icons/8.png" />
+            <img src="icons/9.png" />
+            <img src="icons/10.png" />
+            <img src="icons/1.png" />
+            <img src="icons/2.png" />
+            <img src="icons/3.png" />
+            <img src="icons/4.png" />
+            <img src="icons/5.png" />
+            <img src="icons/6.png" />
+            <img src="icons/7.png" />
+            <img src="icons/8.png" />
+            <img src="icons/9.png" />
+            <img src="icons/10.png" />
+        </div>
+    </div>
+    </body>
+</html>
\ No newline at end of file
Added: branches/paul/suite/demos/coverflow/slider.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/magnifier/icons/1.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/magnifier/icons/10.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/magnifier/icons/2.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/magnifier/icons/3.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/magnifier/icons/4.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/magnifier/icons/5.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/magnifier/icons/6.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/magnifier/icons/7.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/magnifier/icons/8.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/magnifier/icons/9.png
==============================================================================
Binary file. No diff available.
Added: branches/paul/suite/demos/magnifier/index.html
==============================================================================
--- (empty file)
+++ branches/paul/suite/demos/magnifier/index.html    Tue Jan 6 05:28:38 2009
@@ -0,0 +1,109 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta http-equiv="Content-Language" content="en" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Magnifier Demo</title>
+
+<style type="text/css">
+
+body,html {
+    margin: 0;
+    padding: 0;
+