Add lightbox

10 years ago · b1d8557710
14 changed files with 336 additions and 8 deletions
--- a/_drafts/2015-06-24-pebble-time.md
+++ b/_drafts/2015-06-24-pebble-time.md
@ -0,0 +1,38 @@
 ---
 layout: post
 title:  "Pebble Time - Awesome Smartwatch, Many Compromises"
 date:   June 24, 2015
 author:
  display_name: 'sipp11'
 categories: Kickstarter review
 kickstarter:
  url: http://kck.st/1BluaTQ
  widget: https://www.kickstarter.com/projects/597507018/pebble-time-awesome-smartwatch-no-compromises/widget/card.html?v=2
 tags: 
 imgfolder: /media/2015/06-pebble
 images:
  - id: 1
    path: long-live-freedom.jpg
    thumb: long-live-freedom.jpg
    title: Long Live Freedom
  - id: 2
    path: ideal-city.jpg
    thumb: ideal-city.jpg
    title: Ideal City
 ---
 Testing Lightbox
  * will markdown still work in html format
  * I guess not
 <!--more-->
 {% include lightbox_item.html image=2 %}
 Does it work?
--- a/_includes/lightbox_header.html
+++ b/_includes/lightbox_header.html
@ -0,0 +1,3 @@
 <script src="/js/jquery.lightbox.min.js"></script>
 <script src="/js/lightbox.min.js"></script>
 <link href="/css/lightbox.css" rel="stylesheet" />
--- a/_includes/lightbox_item.html
+++ b/_includes/lightbox_item.html
@ -0,0 +1 @@
 {% for image in page.images %}{% if include.image == null or include.image == image.id or include.image == image.path %}<a href="{{ page.imgfolder }}/{{ image.path }}" data-lightbox="image-{{ image.path }}" {% if image.title != null %}data-title="{{ image.title }}" title="{{ image.title }}"{% endif %}><img src="{{ page.imgfolder }}/{{ image.thumb }}" {% if image.title != null %}title="{{ image.text }}"{% endif %}></a>{% endif %}{% endfor %}
--- a/_layouts/default.html
+++ b/_layouts/default.html
@ -2,6 +2,7 @@
 <html>
  {% include head.html %}
  {% include lightbox_header.html %}
  <body>
--- a/_posts/2015-03-22-galaxy-note-4.md
+++ b/_posts/2015-03-22-galaxy-note-4.md
@ -6,13 +6,58 @@ excerpt_separator: <!--more-->
 categories:
 - review
 tags: Samsung Android
 imgfolder: /sites/2015/03/note-4
 images:
  - id: 1
    path: top.jpg
    thumb: top-sm.jpg
    title: Top View
  - id: 2
    path: bottom.jpg
    thumb: bottom-sm.jpg
    title: Bottom View
  - id: 3
    path: left.jpg
    thumb: left-sm.jpg
    title: Left View
  - id: 4
    path: right.jpg
    thumb: right-sm.jpg
    title: Right View
  - id: 5
    path: inking1.jpg
    thumb: inking1.jpg
    title: Inking 1
  - id: 6
    path: inking2.jpg
    thumb: inking2.jpg
    title: Inking 2
  - id: 7
    path: front-cam.jpg
    thumb: front-cam-sm.jpg
    title: Front Camera
  - id: 8
    path: cam.jpg
    thumb: cam-sm.jpg
    title: Back Camera
  - id: 9
    path: finger.jpg
    thumb: finger-sm.jpg
    title: Fingerprint sensor
 ---
-<link rel="stylesheet" href="/sites/2015/03/note-4/twentytwenty.css" type="text/css" media="screen" />
+
 <link rel="stylesheet" href="/sites/2015/03/note-4/twentytwenty.css" type="text/css" media="screen">
 I initially had no intention of writing about this at all since I knew I wouldn't enough time to justify how it really was. However things had changed after few days tinkering with it drastically. I had Galaxy Note 4 for a bit over a week in total.
-[![top](/sites/2015/03/note-4/top-sm.jpg)](/sites/2015/03/note-4/top.jpg) [![bottom](/sites/2015/03/note-4/bottom-sm.jpg)](/sites/2015/03/note-4/bottom.jpg)
+{% include lightbox_item.html image=1 %} {% include lightbox_item.html image=2 %}
 <!--more-->
-[![left](/sites/2015/03/note-4/left-sm.jpg)](/sites/2015/03/note-4/left.jpg) [![right](/sites/2015/03/note-4/right-sm.jpg)](/sites/2015/03/note-4/right.jpg)
+
 {% include lightbox_item.html image=3 %} {% include lightbox_item.html image=4 %}
 ## Impression
@ -22,16 +67,15 @@ I used to love inking with my Windows tablet (pre-iPad era) but since iPad set a
 > Writing was fun again.
-![Inking 1](/sites/2015/03/note-4/inking1.jpg)
+{% include lightbox_item.html image=5 %}
 No inking lag with Note 4; although there was a little of pressure sensitivity, it didn't matter. The whole experience was awesome. I bet Samsung found their mojo. Screen size, pen, and performance were at optimal. Not a single complain. S Note turned into vector based which made things much easier to erase and scale. Lasso was there too. Although it didn't fly as high as OneNote. With this progress, I bet it was only the matter of time.
-
+{% include lightbox_item.html image=6 %}
 ![Inking 2](/sites/2015/03/note-4/inking2.jpg)
 For the rest of thing with Note 4, I didn't think anyone would argue that it belonged in one of the best phones out there.
-[![Front Camera](/sites/2015/03/note-4/front-cam-sm.jpg)](/sites/2015/03/note-4/front-cam.jpg) [![Back Camera](/sites/2015/03/note-4/cam-sm.jpg)](/sites/2015/03/note-4/cam.jpg)
+{% include lightbox_item.html image=7 %} {% include lightbox_item.html image=8 %}
 Things that Note 4 excelled besides its famous pen
@ -47,7 +91,7 @@ Things that Note 4 excelled besides its famous pen
 What if I could change anything I would do as following:
-[![Fingerprint sensor](/sites/2015/03/note-4/finger-sm.jpg)](/sites/2015/03/note-4/finger.jpg)
+{% include lightbox_item.html image=9 %}
 * fingerprint sensor - the sensor was actually quite accurate but the placement wasn't comfortable to do a full finger swipe, instead of just holding for Apple Touch ID, in order to verify your identity.
 * usability; IMHO if this was at the back where heart rate sensor was, this fingerprint sensor could actually be a Touch ID alternative. So far it wasn't.
--- a/css/lightbox.css
+++ b/css/lightbox.css
@ -0,0 +1,210 @@
 /* Preload images */
 body:after {
  content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
  display: none;
 }
 .lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
 }
 .lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
 }
 .lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
 }
 .lightbox a img {
  border: none;
 }
 .lb-outerContainer {
  position: relative;
  background-color: white;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
 }
 .lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
 }
 .lb-container {
  padding: 4px;
 }
 .lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
 }
 .lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../images/loading.gif) no-repeat;
 }
 .lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
 }
 .lb-container > .nav {
  left: 0;
 }
 .lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
 }
 .lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
 }
 .lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(../images/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
 }
 .lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
 }
 .lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(../images/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
 }
 .lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
 }
 .lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
 }
 .lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
 }
 .lb-data {
  padding: 0 4px;
  color: #ccc;
 }
 .lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
 }
 .lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
 }
 .lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
 }
 .lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
 }
 .lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
 }
--- a/images/close.png
+++ b/images/close.png
--- a/images/loading.gif
+++ b/images/loading.gif
--- a/images/next.png
+++ b/images/next.png
--- a/images/prev.png
+++ b/images/prev.png
--- a/js/jquery.lightbox.min.js
+++ b/js/jquery.lightbox.min.js
--- a/js/jquery.lightbox.min.map
+++ b/js/jquery.lightbox.min.map
--- a/js/lightbox.min.js
+++ b/js/lightbox.min.js
--- a/js/lightbox.min.map
+++ b/js/lightbox.min.map
		`@ -0,0 +1 @@`
							`{% for image in page.images %}{% if include.image == null or include.image == image.id or include.image == image.path %}<a href="{{ page.imgfolder }}/{{ image.path }}" data-lightbox="image-{{ image.path }}" {% if image.title != null %}data-title="{{ image.title }}" title="{{ image.title }}"{% endif %}><img src="{{ page.imgfolder }}/{{ image.thumb }}" {% if image.title != null %}title="{{ image.text }}"{% endif %}></a>{% endif %}{% endfor %}`