Create a carousel slideshow from Dale's paintings.

nelstrom · May 22, 2011 · 967df66 · 967df66
1 parent a248e77
commit 967df66
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 39 deletions.
diff --git a/public/app/app.js b/public/app/app.js
@@ -3,7 +3,5 @@ var App = new Ext.Application({
 
     launch: function() {
         this.views.viewport = new this.views.Viewport();
-        this.views.hcarousel = this.views.viewport.getComponent('hcarousel');
-        this.views.vcarousel = this.views.viewport.getComponent('vcarousel');
     }
 });
diff --git a/public/app/views/viewport.js b/public/app/views/viewport.js
@@ -1,44 +1,20 @@
-App.views.Viewport = Ext.extend(Ext.TabPanel, {
+App.views.Viewport = Ext.extend(Ext.Carousel, {
     fullscreen: true,
-
+    
     initComponent: function() {
         Ext.apply(this, {
+            cls: 'painting',
+            defaults: { styleHtml: true },
             items: [
-                {
-                    xtype: 'carousel',
-                    id: 'hcarousel',
-                    title: 'horizontal',
-                    direction: 'horizontal',
-                    scroll: 'vertical',
-                    items: [
-                        {
-                            xtype: 'htmlpage',
-                            url: '/horizontal/home.html'
-                        },
-                        {
-                            xtype: 'htmlpage',
-                            url: '/horizontal/detail.html'
-                        }
-                    ]
-                },
-                {
-                    xtype: 'carousel',
-                    id: 'vcarousel',
-                    title: 'vertical',
-                    direction: 'vertical',
-                    scroll: 'horizontal',
-                    items: [
-                        {
-                            xtype: 'htmlpage',
-                            url: '/vertical/home.html'
-                        },
-                        {
-                            xtype: 'htmlpage',
-                            url: '/about.html'
-                        }
-                    ]
-                }
-            ]
+                { cls: 'item-1' },
+                { cls: 'item-2' },
+                { cls: 'item-3' },
+                { cls: 'item-4' },
+                { cls: 'item-5' },
+                { cls: 'item-6' },
+                { cls: 'item-7' },
+                { cls: 'item-8' },
+            ],
         });
         App.views.Viewport.superclass.initComponent.apply(this, arguments);
     }

diff --git a/public/stylesheets/styles.css b/public/stylesheets/styles.css
@@ -1,4 +1,21 @@
+html, .x-fullscreen {
+  background-color: #fff;
+}
 .metadata {
   font-size: 80%;
   color: #999;
 }
+.painting .x-carousel-item {
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: 50% 0;
+}
+.item-1 { background-image: url('http://daleadcock.com/files/gimgs/3_untitledasteroid2010oil.jpg'); }
+.item-2 { background-image: url('http://daleadcock.com/files/gimgs/3_template-i.jpg'); }
+.item-3 { background-image: url('http://daleadcock.com/files/gimgs/3_template-ii.jpg'); }
+.item-4 { background-image: url('http://daleadcock.com/files/gimgs/3_untitledtriangular-head2009-2010oil-on-linen914-x-609-mm.jpg'); }
+.item-5 { background-image: url('http://daleadcock.com/files/gimgs/3_untitledstandingbackwe.jpg'); }
+.item-6 { background-image: url('http://daleadcock.com/files/gimgs/3_untitledsitting2009oilonlinen190x230cm.jpg'); }
+.item-7 { background-image: url('http://daleadcock.com/files/gimgs/3_untitlederect2009oilonlinen190x230cm.jpg'); }
+.item-8 { background-image: url('http://daleadcock.com/files/gimgs/3_green-head2009oilonlinen6096x9144cm.jpg'); }
+