diff options
| -rw-r--r-- | StoneIsland/www/index.html | 2 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/blogs/HubView.js | 44 |
2 files changed, 43 insertions, 3 deletions
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html index 7bb4f8e4..705ceca2 100644 --- a/StoneIsland/www/index.html +++ b/StoneIsland/www/index.html @@ -99,7 +99,7 @@ <div class="content"> <script type="text/html" class="template"> <div> - <img src="{{image}}"> + <div class="gallery gallery-{{id}}"></div> <span class="title">{{title}}</span> <span class="subtitle">{{subtitle}}</span> <div class="body">{{body}}</div> diff --git a/StoneIsland/www/js/lib/blogs/HubView.js b/StoneIsland/www/js/lib/blogs/HubView.js index d44ce7c8..2f04c5cb 100644 --- a/StoneIsland/www/js/lib/blogs/HubView.js +++ b/StoneIsland/www/js/lib/blogs/HubView.js @@ -1,4 +1,4 @@ -var HubView = View.extend({ +var HubView = ScrollableView.extend({ el: "#hub", template: $("#hub .template").html(), @@ -23,14 +23,54 @@ var HubView = View.extend({ // id date subtitle body link image[uri caption] this.data.forEach(function(row){ console.log(row) - var t = this.template.replace(/{{image}}/, row.image[0].uri) + var t = this.template.replace(/{{id}}/, row.id) .replace(/{{date}}/, row.date) .replace(/{{title}}/, row.title) .replace(/{{subtitle}}/, row.subtitle) .replace(/{{link}}/, row.link) .replace(/{{body}}/, row.body.replace(/\n/g, "<br>")) this.$content.append(t) + + if (row.image.length > 1) { + // image gallery + var $gallery = $(".gallery-" + row.id) + row.image.forEach(function(img){ + var el = document.createElement("div") + el.style.backgroundImage = "url(" + img.uri + ")" + el.className = "item" + $gallery.append(el) + }) + new Flickity( ".gallery-" + row.id, { + selector: '.item', + cellAlign: 'center', + autoPlay: false, + freeScroll: false, + wrapAround: true, + imagesLoaded: true, + prevNextButtons: false, + pageDots: false, + contain: true, + draggable: true, + }) + } + else { + // single image + var el = document.createElement("div") + el.style.backgroundImage = "url(" + img.uri + ")" + el.className = "item" + $(".gallery-" + row.id).append(el) + + // video, append play button + if (row.link.match(/youtube|youtu.be|vimeo/)) { + var play = document.createElement("div") + play.className = "play" + $(".gallery-" + row.id).append(play) + } + } + }.bind(this)) + + this.deferScrollToTop() }, })
\ No newline at end of file |