diff options
Diffstat (limited to 'site')
| -rw-r--r-- | site/db.json | 10 | ||||
| -rw-r--r-- | site/index.js | 3 | ||||
| -rw-r--r-- | site/public/assets/javascripts/_env.js | 8 | ||||
| -rw-r--r-- | site/public/assets/style.css | 29 | ||||
| -rw-r--r-- | site/templates/page.liquid | 4 | ||||
| -rw-r--r-- | site/templates/project.liquid | 16 |
6 files changed, 53 insertions, 17 deletions
diff --git a/site/db.json b/site/db.json index 1ada83f..591706f 100644 --- a/site/db.json +++ b/site/db.json @@ -16,7 +16,13 @@ "title": "", "thumb": "" }, - "images": [ + "media": [ + { + "type": "vimeo", + "token": "112498725", + "title": "FW14-2H-VIDEO-V4 2", + "thumb": "http://i.vimeocdn.com/video/497493142_640.jpg" + }, { "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fe22fd077-ca52-42a1-ab9c-e0508bf4408e.jpg", "caption": "" @@ -68,7 +74,7 @@ "title": "", "thumb": "" }, - "images": [ + "media": [ { "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F38ea6ad0-f689-491f-857a-12d4fa0d4748.jpg", "caption": "" diff --git a/site/index.js b/site/index.js index 8bb4b4d..3434742 100644 --- a/site/index.js +++ b/site/index.js @@ -5,8 +5,7 @@ var projectSchema = { title: {type: 'string'}, menu: {type: 'string'}, description: {type: 'text'}, - video: {type: 'video'}, - images: {type: 'captioned-image-list'}, + media: {type: 'media-list'}, thumbnail: {type: 'image'}, } diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js index 8c1270f..aae60b9 100644 --- a/site/public/assets/javascripts/_env.js +++ b/site/public/assets/javascripts/_env.js @@ -446,16 +446,14 @@ function build_gallery () { // load_video($el) } else { - next() + gallery.next() } }) - // $next.on("click", next) - function next(){ - gallery.next() - } gallery.loader.on("progress", function(imagesLoaded, loadingImage){ $(loadingImage.img).addClass('loaded') }) + $(".nextbutton").click(function(){ gallery.next() }) + $(".prevbutton").click(function(){ gallery.previous() }) } function resize_gallery () { if (! gallery) return; diff --git a/site/public/assets/style.css b/site/public/assets/style.css index f018d8d..8c7594d 100644 --- a/site/public/assets/style.css +++ b/site/public/assets/style.css @@ -405,7 +405,7 @@ nav .sub.active a { height:auto; position:relative; width:100%; - max-height:40px; + max-height:50px; padding: 3px 0 5px 20px; opacity:1; -webkit-transform:translateY(0)scale(1)skew(0deg); @@ -444,10 +444,35 @@ nav .sub.active a { .postname { border-bottom: 1px solid #999; padding: 20px 0px 0.6em 2px; - margin-bottom: 1em; + margin-bottom: 0.7em; font-size: 1em; + text-transform: uppercase; +} + + +.galnav { + display: inline-block; + width: 100%; + float: left; + clear: both; } +.galnav span{ + width: 50%; + background: #999; + color: white; + padding: 2px; + font-size: 11px; + transition:0.2s background; +} +.galnav .nextbutton{ + text-align: right; + background: #888; + cursor:pointer; +} +.galnav span:hover { + background:black; +} .credit { margin: 4em 0px 0px 0px; diff --git a/site/templates/page.liquid b/site/templates/page.liquid index 63f71f2..5c3cabe 100644 --- a/site/templates/page.liquid +++ b/site/templates/page.liquid @@ -2,6 +2,10 @@ <span> {% if page.image %} <span class="postname">{{page.title}}</span> + <div class="galnav"> + <span class="prevbutton">PREVIOUS ASSET</span> + <span class="nextbutton">NEXT ASSET</span> + </div> <img class="mainimg" src="{{page.image}}"> <div class="content"> {{page.body | newline_to_br}} diff --git a/site/templates/project.liquid b/site/templates/project.liquid index b54722d..0dc828c 100644 --- a/site/templates/project.liquid +++ b/site/templates/project.liquid @@ -1,13 +1,17 @@ <div class="entry"> <span> <span class="postname">{{project.title}}</span> - + <div class="galnav"> + <span class="prevbutton">PREVIOUS ASSET</span> + <span class="nextbutton">NEXT ASSET</span> + </div> <div class="gallery" id="okgallery"> - {% if project.video.token %} - <div class="cell video" style="background-image:url({{ project.video.thumb }})" data-video="https://player.vimeo.com/video/{{ project.video.token }}" data-caption="{{ project.video.title }}"></div> - {% endif %} - {% for image in project.images %} - <div class="cell" data-caption="{{ image.caption }}"><img src="{{ image.uri }}"></div> + {% for media in project.media %} + {% if media.token %} + <div class="cell video" style="background-image:url({{ media.thumb }})" data-video="https://player.vimeo.com/video/{{ media.token }}" data-caption="{{ media.title }}"></div> + {% else %} + <div class="cell" data-caption="{{ media.caption }}"><img src="{{ media.uri }}"></div> + {% endif %} {% endfor %} </div> <div class="caption"></div> |