diff options
Diffstat (limited to 'StoneIsland/www')
| -rw-r--r-- | StoneIsland/www/css/blogs.css | 8 | ||||
| -rw-r--r-- | StoneIsland/www/css/products.css | 43 | ||||
| -rw-r--r-- | StoneIsland/www/index.html | 2 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/blogs/HubView.js | 20 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/products/GalleryView.js | 8 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/products/ProductView.js | 4 |
6 files changed, 24 insertions, 61 deletions
diff --git a/StoneIsland/www/css/blogs.css b/StoneIsland/www/css/blogs.css index 0b9f8eed..e0fea9f3 100644 --- a/StoneIsland/www/css/blogs.css +++ b/StoneIsland/www/css/blogs.css @@ -105,7 +105,7 @@ /* NOTE: optional arrows */ -.gallery-multiple-images::before { +.gallery-left { border:1px solid black; background:rgba(255,255,255,1); background-image:url(../img/left-arrow.png); @@ -114,7 +114,7 @@ background-position:center; width:15px; height:30px; - top:50%; + top:26vh; content:''; transform:translateY(-50%); transform-origin:top right; @@ -126,7 +126,7 @@ display:block; } -.gallery-multiple-images::after { +.gallery-right { border:1px solid black; background:rgba(255,255,255,1); background-image:url(../img/right-arrow.png); @@ -135,7 +135,7 @@ background-position:center; width:15px; height:30px; - top:50%; + top:26vh; content:''; transform:translateY(-50%); transform-origin:top right; diff --git a/StoneIsland/www/css/products.css b/StoneIsland/www/css/products.css index 78d02811..82c7c36c 100644 --- a/StoneIsland/www/css/products.css +++ b/StoneIsland/www/css/products.css @@ -181,46 +181,9 @@ } -#product #gallery::before { - border:1px solid black; - background:rgba(255,255,255,1); - background-image:url(../img/left-arrow.png); - background-size:5px 10px; - background-repeat:no-repeat; - background-position:center; - width:15px; - height:30px; - top:50%; - content:''; - transform:translateY(-50%); - transform-origin:top right; - left:20px; - font-size:18px; - padding:3px 3px 3px 1px; - z-index:999; - position:absolute; - display:block; -} - -#product #gallery::after { - border:1px solid black; - background:rgba(255,255,255,1); - background-image:url(../img/right-arrow.png); - background-size:5px 10px; - background-repeat:no-repeat; - background-position:center; - width:15px; - height:30px; - top:50%; - content:''; - transform:translateY(-50%); - transform-origin:top right; - right:20px; - font-size:18px; - padding:3px 1px 3px 3px; - z-index:999; - position:absolute; - display:block; +#product .gallery-prev, +#product .gallery-next { + top: 26vh; } #product .content .body { diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html index ad005ced..8fb18b76 100644 --- a/StoneIsland/www/index.html +++ b/StoneIsland/www/index.html @@ -139,7 +139,7 @@ <h1>HUB</h1> <div class="content"> <script type="text/html" class="template"> - <div class="hub_item"> + <div class="hub_item" data-id="{{id}}"> <div class="gallery gallery-{{id}}"></div> <div class="gallery-left"></div> <div class="gallery-right"></div> diff --git a/StoneIsland/www/js/lib/blogs/HubView.js b/StoneIsland/www/js/lib/blogs/HubView.js index 001b8161..87f8127e 100644 --- a/StoneIsland/www/js/lib/blogs/HubView.js +++ b/StoneIsland/www/js/lib/blogs/HubView.js @@ -22,14 +22,16 @@ var HubView = ScrollableView.extend({ document.body.className = "hub" }, + galleries: {}, populate: function(data){ this.data = data this.$loader.hide() this.$content.empty() + this.galleries = {} // id date subtitle body link store image[uri caption] this.data.forEach(function(row){ // console.log(row) - var t = this.template.replace(/{{id}}/, row.id) + var t = this.template.replace(/{{id}}/g, row.id) .replace(/{{date}}/, moment(row.date).format("MM.DD.YYYY")) .replace(/{{title}}/, row.title) .replace(/{{subtitle}}/, row.subtitle) @@ -50,7 +52,7 @@ var HubView = ScrollableView.extend({ el.className = "item" $gallery.append(el) }) - new Flickity( ".gallery-" + row.id, { + this.galleries[row.id] = new Flickity( ".gallery-" + row.id, { selector: '.item', cellAlign: 'center', autoPlay: false, @@ -76,8 +78,8 @@ var HubView = ScrollableView.extend({ play.className = "play" $(".gallery-" + row.id).append(play) } - $t.find("gallery-left").remove() - $t.find("gallery-right").remove() + $t.find(".gallery-left").remove() + $t.find(".gallery-right").remove() } }.bind(this)) @@ -89,11 +91,13 @@ var HubView = ScrollableView.extend({ app.router.go("store") }, - gallery_prev: function(e){ - $(e.currentTarget).closest("hub_item").flickity('prev') + gallery_left: function(e){ + var id = $(e.currentTarget).closest(".hub_item").data('id') + this.galleries[id].previous() }, - gallery_next: function(e){ - $(e.currentTarget).closest("hub_item").flickity('next') + gallery_right: function(e){ + var id = $(e.currentTarget).closest(".hub_item").data('id') + this.galleries[id].next() }, share: function(){ diff --git a/StoneIsland/www/js/lib/products/GalleryView.js b/StoneIsland/www/js/lib/products/GalleryView.js index b36c5df2..02193f14 100644 --- a/StoneIsland/www/js/lib/products/GalleryView.js +++ b/StoneIsland/www/js/lib/products/GalleryView.js @@ -4,8 +4,8 @@ var GalleryView = View.extend({ template: $("#gallery .template").html(), events: { - "click .left": "prev", - "click .right": "next", +// "click .left": "prev", +// "click .right": "next", // "touchstart .gallery": "touchstart", // "touchmove .gallery": "touchmove", // "touchend .gallery": "touchend", @@ -51,10 +51,6 @@ var GalleryView = View.extend({ }) }, - prev: function(){ - }, - next: function(){ - }, touchstart: function(e){ }, touchmove: function(e){ diff --git a/StoneIsland/www/js/lib/products/ProductView.js b/StoneIsland/www/js/lib/products/ProductView.js index 5b7ee6d2..4789850a 100644 --- a/StoneIsland/www/js/lib/products/ProductView.js +++ b/StoneIsland/www/js/lib/products/ProductView.js @@ -47,10 +47,10 @@ var ProductView = ScrollableView.extend({ cache: {}, gallery_prev: function(){ - this.gallery.gallery.flickity('prev') + app.product.gallery.gallery.previous() }, gallery_right: function(){ - this.gallery.gallery.flickity('next') + app.product.gallery.gallery.next() }, find: function(code, cb){ |