Permalink
Browse files

added compatibility with any tag (not just IMG)

  • Loading branch information...
1 parent 2418ec4 commit a29a3da3c00bd741a9af4fe820af8de63b8973bf @cubiq committed Oct 15, 2011
Showing with 139 additions and 52 deletions.
  1. +3 −1 README.md
  2. +48 −18 demo/index.html
  3. +26 −3 demo/style.css
  4. +62 −30 src/swipeview.js
View
@@ -1,8 +1,10 @@
-SwipeView v0.2 - 2011-10-10
+SwipeView v0.3 - 2011-10-15
===========================
Virtually infinite loop-able horizontal carousel for mobile webkit (in 4kb).
+Read more at [cubiq.org](http://cubiq.org/swipeview)
+
Demo: [http://cubiq.org/dropbox/SwipeView/demo/](http://cubiq.org/dropbox/SwipeView/demo/) or [http://j.mp/rpWmdU](http://j.mp/rpWmdU)
Screencast: [http://www.youtube.com/watch?v=Hhes5JHs8jQ](http://www.youtube.com/watch?v=Hhes5JHs8jQ)
View
@@ -19,34 +19,64 @@
var sv = new SwipeView('#wrapper', {
pages: [
{
- source: 'images/pic01.jpg',
- width: 300,
- height: 213
+ img: {
+ src: 'images/pic01.jpg',
+ width: 300,
+ height: 213
+ },
+ span: {
+ innerText: 'Piazza del Duomo, Florence, Italy'
+ }
},
{
- source: 'images/pic02.jpg',
- width: 300,
- height: 164
+ img: {
+ src: 'images/pic02.jpg',
+ width: 300,
+ height: 164
+ },
+ span: {
+ innerText: 'Tuscan Landscape'
+ }
},
{
- source: 'images/pic03.jpg',
- width: 300,
- height: 213
+ img: {
+ src: 'images/pic03.jpg',
+ width: 300,
+ height: 213
+ },
+ span: {
+ innerText: 'Colosseo, Rome, Italy'
+ }
},
{
- source: 'images/pic04.jpg',
- width: 268,
- height: 400
+ img: {
+ src: 'images/pic04.jpg',
+ width: 147,
+ height: 220
+ },
+ span: {
+ innerText: 'Somewhere near Chinatown, San Francisco'
+ }
},
{
- source: 'images/pic05.jpg',
- width: 300,
- height: 213
+ img: {
+ src: 'images/pic05.jpg',
+ width: 300,
+ height: 213
+ },
+ span: {
+ innerText: 'Medieval guard tower, Asciano, Siena, Italy'
+ }
},
{
- source: 'images/pic06.jpg',
- width: 300,
- height: 400
+ img: {
+ src: 'images/pic06.jpg',
+ width: 165,
+ height: 220
+ },
+ span: {
+ innerText: 'Leaning tower, Pisa, Italy'
+ }
}]
});
</script>
View
@@ -7,7 +7,7 @@ body {
-webkit-text-size-adjust:none;
color:#eee;
font-family:helvetica;
- font-size:14px;
+ font-size:12px;
}
#wrapper {
@@ -18,7 +18,7 @@ body {
#wrapper > div > div {
display:-webkit-box;
- -webkit-box-orient:horizontal;
+ -webkit-box-orient:vertical;
-webkit-box-pack:center;
-webkit-box-align:center;
overflow:hidden;
@@ -35,8 +35,26 @@ body {
opacity:1;
}
+#wrapper span {
+ position:relative;
+ display:block;
+ background:#000 -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#000));
+ border:2px solid #777;
+ padding:0 20px;
+ margin-top:10px;
+ height:20px;
+ line-height:20px;
+ -webkit-border-radius:11px;
+ -webkit-background-clip:padding-box;
+ -webkit-box-shadow:0 2px 6px #000;
+ -webkit-transition-duration:.4s;
+ -webkit-transition-property:opacity;
+ opacity:1;
+ text-shadow:0 -1px 0 #000;
+}
+
#wrapper > div > .swipeview-loading {
- background-image:-webkit-gradient(linear, 0 0, 100% 0, from(#444), to(#555)),
+ background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#444), to(#555)),
-webkit-gradient(linear, 0 0, 100% 0, from(#777), to(#777));
background-position:50% 50%, 50% 50%;
background-size:200px 140px, 210px 150px;
@@ -46,4 +64,9 @@ body {
#wrapper > div > .swipeview-loading img {
-webkit-transition-duration:0;
opacity:0;
+}
+
+#wrapper > div > .swipeview-loading span {
+ -webkit-transition-duration:0;
+ opacity:0;
}
View
@@ -1,5 +1,5 @@
/*!
- * SwipeView v0.2 ~ Copyright (c) 2011 Matteo Spinelli, http://cubiq.org
+ * SwipeView v0.3 ~ Copyright (c) 2011 Matteo Spinelli, http://cubiq.org
* Released under MIT license, http://cubiq.org/license
*/
var SwipeView = (function(){
@@ -13,10 +13,11 @@ var SwipeView = (function(){
// isImage = function (value) { return /.(jpg|jpeg|png|gif|svg|pdf)(\?.*)?$/.test(value); },
SwipeView = function (el, options) {
- var i,
- div,
+ var i, l, j,
+ el,
img,
- image;
+ page,
+ count = 0;
this.wrapper = document.querySelector(el);
this.options = {
@@ -39,20 +40,31 @@ var SwipeView = (function(){
this.refreshSize();
- for (i=-1; i<2; i++) {
+ for (i=0, l=this.options.pages.length; i<l; i++) {
+ for (j in this.options.pages[i]) {
+ this.options.pages[i][j].className = this.options.pages[i][j].className ? this.options.pages[i][j].className + ' swipeviewElement' + count : 'swipeviewElement' + count;
+ count++;
+ }
+ count = 0;
+ }
+
+ for (i=0; i<3; i++) {
div = document.createElement('div');
- div.style.cssText = '-webkit-transform:translateZ(0);position:absolute;top:0;height:100%;width:100%;left:' + i*100 + '%';
+ div.style.cssText = '-webkit-transform:translateZ(0);position:absolute;top:0;height:100%;width:100%;left:' + (i-1)*100 + '%';
if (!div.dataset) div.dataset = {};
- div.dataset.pageIndex = i + 1;
+ div.dataset.pageIndex = i;
div.dataset.upcomingPageIndex = div.dataset.pageIndex;
- image = i==-1 ? this.options.pages.length-1 : i;
- img = document.createElement('img');
- img.src = this.options.pages[image].source;
- img.width = this.options.pages[image].width;
- img.height = this.options.pages[image].height;
-
- div.appendChild(img);
+ page = i==0 ? this.options.pages.length-1 : i-1;
+ for (l in this.options.pages[page]) {
+ el = document.createElement(l);
+ for (j in this.options.pages[page][l]) {
+ el[j] = this.options.pages[page][l][j];
+ }
+
+ div.appendChild(el);
+ }
+
this.slider.appendChild(div);
this.masterPages.push(div);
}
@@ -74,6 +86,19 @@ var SwipeView = (function(){
page: 0,
image: 0,
+ destroy: function () {
+ // Remove the event listeners
+ window.removeEventListener(resizeEvent, this, false);
+ this.wrapper.removeEventListener(startEvent, this, false);
+ this.wrapper.removeEventListener(moveEvent, this, false);
+ this.wrapper.removeEventListener(endEvent, this, false);
+ this.slider.removeEventListener('webkitTransitionEnd', this, false);
+
+/* if (!hasTouch) {
+ this.wrapper.removeEventListener('mouseout', this, false);
+ }*/
+ },
+
handleEvent: function (e) {
switch (e.type) {
case startEvent:
@@ -136,6 +161,8 @@ var SwipeView = (function(){
this.x = matrix[4] * 1;*/
this.slider.style.webkitTransitionDuration = '0';
+
+ this.__event('start');
},
__move: function (e) {
@@ -209,36 +236,41 @@ var SwipeView = (function(){
},
__flip: function () {
- var imageEl,
+ var el,
newIndex,
- i, l;
+ i, l,
+ j, k,
+ count;
for (i=0, l=this.masterPages.length; i<l; i++) {
this.masterPages[i].className = '';
newIndex = this.masterPages[i].dataset.upcomingPageIndex;
if (newIndex != this.masterPages[i].dataset.pageIndex) {
this.masterPages[i].dataset.pageIndex = newIndex;
+ count = 0;
+
+ for (j in this.options.pages[newIndex]) { // Parse all page elements
+ el = this.masterPages[i].querySelector('.swipeviewElement' + count);
- imageEl = this.masterPages[i].getElementsByTagName('img')[0];
- imageEl.src = this.options.pages[newIndex].source;
- imageEl.width = this.options.pages[newIndex].width;
- imageEl.height = this.options.pages[newIndex].height;
+ for (k in this.options.pages[newIndex][j]) { // Parse all element attributes
+ el[k] = this.options.pages[newIndex][j][k];
+ }
+ count++
+ }
}
}
},
- destroy: function () {
- // Remove the event listeners
- window.removeEventListener(resizeEvent, this, false);
- this.wrapper.removeEventListener(startEvent, this, false);
- this.wrapper.removeEventListener(moveEvent, this, false);
- this.wrapper.removeEventListener(endEvent, this, false);
- this.slider.removeEventListener('webkitTransitionEnd', this, false);
+ __event: function (type) {
+ var //i,
+ ev = document.createEvent("Event");
+
+ ev.initEvent('swipeview-' + type, true, true);
-/* if (!hasTouch) {
- this.wrapper.removeEventListener('mouseout', this, false);
- }*/
+// for (i in parms) ev[i] = parms[i];
+
+ this.wrapper.dispatchEvent(ev);
}
};

0 comments on commit a29a3da

Please sign in to comment.