14 changed files with 336 additions and 8 deletions
@ -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? |
||||
@ -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" /> |
||||
@ -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 %} |
||||
@ -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; |
||||
} |
||||
|
After Width: | Height: | Size: 280 B |
|
After Width: | Height: | Size: 8.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue