Added colorbox
This commit is contained in:
parent
26381ccbfb
commit
5fb63895a1
50
static/css/colorbox.css
Normal file
50
static/css/colorbox.css
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
/*
|
||||
Colorbox Core Style:
|
||||
The following CSS is consistent between example themes and should not be altered.
|
||||
*/
|
||||
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
|
||||
#cboxWrapper {max-width:none;}
|
||||
#cboxOverlay{position:fixed; width:100%; height:100%;}
|
||||
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
|
||||
#cboxContent{position:relative;}
|
||||
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
|
||||
#cboxTitle{margin:0;}
|
||||
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
|
||||
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
|
||||
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
|
||||
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
|
||||
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
|
||||
|
||||
/*
|
||||
User Style:
|
||||
Change the following styles to modify the appearance of Colorbox. They are
|
||||
ordered & tabbed in a way that represents the nesting of the generated HTML.
|
||||
*/
|
||||
#cboxOverlay{background:#fff; opacity: 0.9; filter: alpha(opacity = 90);}
|
||||
#colorbox{outline:0;}
|
||||
#cboxContent{margin-top:32px; overflow:visible; background:#000;}
|
||||
.cboxIframe{background:#fff;}
|
||||
#cboxError{padding:50px; border:1px solid #ccc;}
|
||||
#cboxLoadedContent{background:#000; padding:1px;}
|
||||
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
|
||||
#cboxLoadingOverlay{background:#000;}
|
||||
#cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
|
||||
#cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
|
||||
|
||||
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
|
||||
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(images/controls.png) no-repeat 0 0;}
|
||||
|
||||
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
|
||||
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
|
||||
|
||||
#cboxPrevious{background-position:0px 0px; right:44px;}
|
||||
#cboxPrevious:hover{background-position:0px -25px;}
|
||||
#cboxNext{background-position:-25px 0px; right:22px;}
|
||||
#cboxNext:hover{background-position:-25px -25px;}
|
||||
#cboxClose{background-position:-50px 0px; right:0;}
|
||||
#cboxClose:hover{background-position:-50px -25px;}
|
||||
.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
|
||||
.cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
|
||||
.cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
|
||||
.cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
|
||||
.cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}
|
||||
BIN
static/css/images/controls.png
Normal file
BIN
static/css/images/controls.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 503 B |
BIN
static/css/images/loading.gif
Normal file
BIN
static/css/images/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
102
static/css/justifiedGallery.min.css
vendored
Normal file
102
static/css/justifiedGallery.min.css
vendored
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
/*!
|
||||
* justifiedGallery - v3.7.0
|
||||
* http://miromannino.github.io/Justified-Gallery/
|
||||
* Copyright (c) 2018 Miro Mannino
|
||||
* Licensed under the MIT license.
|
||||
*/
|
||||
.justified-gallery {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.justified-gallery > a,
|
||||
.justified-gallery > div,
|
||||
.justified-gallery > figure {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
/* background: #888888; To have gray placeholders while the gallery is loading with waitThumbnailsLoad = false */
|
||||
filter: "alpha(opacity=10)";
|
||||
opacity: 0.1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.justified-gallery > a > img,
|
||||
.justified-gallery > div > img,
|
||||
.justified-gallery > figure > img,
|
||||
.justified-gallery > a > a > img,
|
||||
.justified-gallery > div > a > img,
|
||||
.justified-gallery > figure > a > img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
filter: "alpha(opacity=0)";
|
||||
opacity: 0;
|
||||
}
|
||||
.justified-gallery > a > .caption,
|
||||
.justified-gallery > div > .caption,
|
||||
.justified-gallery > figure > .caption {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding: 5px;
|
||||
background-color: #000000;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
.justified-gallery > a > .caption.caption-visible,
|
||||
.justified-gallery > div > .caption.caption-visible,
|
||||
.justified-gallery > figure > .caption.caption-visible {
|
||||
display: initial;
|
||||
filter: "alpha(opacity=70)";
|
||||
opacity: 0.7;
|
||||
-webkit-transition: opacity 500ms ease-in;
|
||||
-moz-transition: opacity 500ms ease-in;
|
||||
-o-transition: opacity 500ms ease-in;
|
||||
transition: opacity 500ms ease-in;
|
||||
}
|
||||
.justified-gallery > .entry-visible {
|
||||
filter: "alpha(opacity=100)";
|
||||
opacity: 1;
|
||||
background: none;
|
||||
}
|
||||
.justified-gallery > .entry-visible > img,
|
||||
.justified-gallery > .entry-visible > a > img {
|
||||
filter: "alpha(opacity=100)";
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 500ms ease-in;
|
||||
-moz-transition: opacity 500ms ease-in;
|
||||
-o-transition: opacity 500ms ease-in;
|
||||
transition: opacity 500ms ease-in;
|
||||
}
|
||||
.justified-gallery > .jg-filtered {
|
||||
display: none;
|
||||
}
|
||||
.justified-gallery > .spinner {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin-left: -24px;
|
||||
padding: 10px 0 10px 0;
|
||||
left: 50%;
|
||||
filter: "alpha(opacity=100)";
|
||||
opacity: 1;
|
||||
overflow: initial;
|
||||
}
|
||||
.justified-gallery > .spinner > span {
|
||||
display: inline-block;
|
||||
filter: "alpha(opacity=0)";
|
||||
opacity: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin: 0 4px 0 4px;
|
||||
background-color: #000;
|
||||
border-radius: 6px;
|
||||
}
|
||||
6
static/js/jquery.colorbox-min.js
vendored
Normal file
6
static/js/jquery.colorbox-min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
8
static/js/jquery.justifiedGallery.min.js
vendored
Normal file
8
static/js/jquery.justifiedGallery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
static/js/jquery.min.js
vendored
Normal file
2
static/js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
7
static/js/load-colorbox.js
Normal file
7
static/js/load-colorbox.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
jQuery('a.mybox').colorbox({
|
||||
maxWidth:"90%",
|
||||
maxHeight:"90%",
|
||||
transition:"elastic",
|
||||
opacity:"0.9",
|
||||
rel:"group1",
|
||||
scrolling: false });
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<title>{% block title %}{{ SITENAME }}{%endblock%}</title>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="/theme/css/colorbox.css">
|
||||
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/{{ CSS_FILE }}" type="text/css" />
|
||||
<link href="{{ SITEURL }}/{{ FEED_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} ATOM Feed" />
|
||||
{% if FEED_RSS %}
|
||||
|
|
@ -72,6 +73,9 @@
|
|||
{% include 'analytics.html' %}
|
||||
{% include 'piwik.html' %}
|
||||
{% include 'disqus_script.html' %}
|
||||
<script src="/theme/js/jquery.min.js"></script>
|
||||
<script src="/theme/js/jquery.colorbox-min.js"></script>
|
||||
<script src="/theme/js/load-colorbox.js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
85
templates/base.html.old
Normal file
85
templates/base.html.old
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{% block title %}{{ SITENAME }}{%endblock%}</title>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/{{ CSS_FILE }}" type="text/css" />
|
||||
<link href="{{ SITEURL }}/{{ FEED_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} ATOM Feed" />
|
||||
{% if FEED_RSS %}
|
||||
<link href="{{ SITEURL }}/{{ FEED_RSS }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} RSS Feed" />
|
||||
{% endif %}
|
||||
|
||||
<!--[if IE]>
|
||||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<!--[if lte IE 7]>
|
||||
<link rel="stylesheet" type="text/css" media="all" href="{{ SITEURL }}/css/ie.css"/>
|
||||
<script src="{{ SITEURL }}/js/IE8.js" type="text/javascript"></script><![endif]-->
|
||||
|
||||
<!--[if lt IE 7]>
|
||||
<link rel="stylesheet" type="text/css" media="all" href="{{ SITEURL }}/css/ie6.css"/><![endif]-->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrap" style="width:100%">
|
||||
<div id="container" style="width:70%">
|
||||
<div class="entry">
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="sidebar" style="width:25%">
|
||||
<h1><a href="{{ SITEURL }} " title="title">{{ SITENAME }}</a></h1>
|
||||
<span class="description">{{ DESCRIPTION }} </span>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="{{ SITEURL }}/index.html">Home</a></li>
|
||||
<li><a href="{{ SITEURL }}/posts.html">Articles</a></li>
|
||||
<li><a href="{{ SITEURL }}/portfolio.html">Photography</a></li>
|
||||
<li><a href="{{ SITEURL }}/about.html">About</a></li>
|
||||
<li><a href="{{ SITEURL }}/recommendations.html">Recommendations</a></li>
|
||||
{% if categories|length > 1 %}
|
||||
<!-- <li><a href="{{ SITEURL }}/categories.html">Categories</a></li>
|
||||
{% endif %}
|
||||
{% if tags|length > 1 %}
|
||||
<li><a href="{{ SITEURL }}/tags.html">Tags</a></li>
|
||||
{% endif %} -->
|
||||
<br />
|
||||
<!--
|
||||
<li>Galleries:</li>
|
||||
{% for page in pages %}
|
||||
{% if page.title != "About" and page.title !="Welcome" %}
|
||||
<li><a href="{{ SITEURL }}/{{ page.url }}">{{ page.title }}</a>{% if not loop.last %}{% endif %}</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<br />
|
||||
-->
|
||||
<li>{{ LINKS_WIDGET_NAME | default('links') }}</li>
|
||||
{% for name, link in LINKS %}
|
||||
<li><a href="{{ link }}">{{ name }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<span class="feed"><a href="{{ SITEURL }}/{{ FEED_RSS }}">RSS</a> | <a href="{{ SITEURL }}/{{ FEED_ATOM }}">Atom</a></span>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
|
||||
<div id="credits">
|
||||
<span>Powered by <a href="https://www.debian.org/" target="_blank">Debian GNU/Linux</a> and <a href="https://blog.getpelican.com/" target="_blank">Pelican</a>.</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{% include 'analytics.html' %}
|
||||
{% include 'piwik.html' %}
|
||||
{% include 'disqus_script.html' %}
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
83
templates/landing.html.old
Normal file
83
templates/landing.html.old
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{% block title %}{{ SITENAME }}{%endblock%}</title>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/{{ CSS_FILE }}" type="text/css" />
|
||||
<link href="{{ SITEURL }}/{{ FEED_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} ATOM Feed" />
|
||||
{% if FEED_RSS %}
|
||||
<link href="{{ SITEURL }}/{{ FEED_RSS }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} RSS Feed" />
|
||||
{% endif %}
|
||||
|
||||
<!--[if IE]>
|
||||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<!--[if lte IE 7]>
|
||||
<link rel="stylesheet" type="text/css" media="all" href="{{ SITEURL }}/css/ie.css"/>
|
||||
<script src="{{ SITEURL }}/js/IE8.js" type="text/javascript"></script><![endif]-->
|
||||
|
||||
<!--[if lt IE 7]>
|
||||
<link rel="stylesheet" type="text/css" media="all" href="{{ SITEURL }}/css/ie6.css"/><![endif]-->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrap" style="width:100%">
|
||||
<div id="container" style="width:70%">
|
||||
<div id="landing" class="entry">
|
||||
{{ page.content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="sidebar" style="width:25%">
|
||||
<h1><a href="{{ SITEURL }} " title="title">{{ SITENAME }}</a></h1>
|
||||
<span class="description">{{ DESCRIPTION }} </span>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="posts.html">Articles</a></li>
|
||||
<li><a href="portfolio.html">Photography</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
{% if categories|length > 1 %}
|
||||
<!-- <li><a href="{{ SITEURL }}/categories.html">Categories</a></li>
|
||||
{% endif %}
|
||||
{% if tags|length > 1 %}
|
||||
<li><a href="{{ SITEURL }}/tags.html">Tags</a></li>
|
||||
{% endif %} -->
|
||||
<br />
|
||||
<!--
|
||||
<li>Galleries:</li>
|
||||
{% for page in pages %}
|
||||
{% if page.title != "About" and page.title !="Welcome" %}
|
||||
<li><a href="{{ SITEURL }}/{{ page.url }}">{{ page.title }}</a>{% if not loop.last %}{% endif %}</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<br />
|
||||
--> <li>{{ LINKS_WIDGET_NAME | default('links') }}</li>
|
||||
{% for name, link in LINKS %}
|
||||
<li><a href="{{ link }}">{{ name }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<span class="feed"><a href="{{ SITEURL }}/{{ FEED_RSS }}">RSS</a> | <a href="{{ SITEURL }}/{{ FEED_ATOM }}">Atom</a></span>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
|
||||
<div id="credits">
|
||||
<span>Powered by <a href="https://www.debian.org/" target="_blank">Debian GNU/Linux</a> and <a href="https://blog.getpelican.com/" target="_blank">Pelican</a>.</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{% include 'analytics.html' %}
|
||||
{% include 'piwik.html' %}
|
||||
{% include 'disqus_script.html' %}
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
84
templates/portfolio.html.old
Normal file
84
templates/portfolio.html.old
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{% block title %}{{ SITENAME }}{%endblock%}</title>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/{{ CSS_FILE }}" type="text/css" />
|
||||
<link href="{{ SITEURL }}/{{ FEED_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} ATOM Feed" />
|
||||
{% if FEED_RSS %}
|
||||
<link href="{{ SITEURL }}/{{ FEED_RSS }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} RSS Feed" />
|
||||
{% endif %}
|
||||
|
||||
<!--[if IE]>
|
||||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<!--[if lte IE 7]>
|
||||
<link rel="stylesheet" type="text/css" media="all" href="{{ SITEURL }}/css/ie.css"/>
|
||||
<script src="{{ SITEURL }}/js/IE8.js" type="text/javascript"></script><![endif]-->
|
||||
|
||||
<!--[if lt IE 7]>
|
||||
<link rel="stylesheet" type="text/css" media="all" href="{{ SITEURL }}/css/ie6.css"/><![endif]-->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrap" style="width:100%">
|
||||
<div id="container" style="width:70%">
|
||||
<div class="portfolio">
|
||||
{{ page.content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="sidebar" style="width:25%">
|
||||
<h1><a href="{{ SITEURL }} " title="title">{{ SITENAME }}</a></h1>
|
||||
<span class="description">{{ DESCRIPTION }} </span>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="posts.html">Articles</a></li>
|
||||
<li><a href="portfolio.html">Photography</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
{% if categories|length > 1 %}
|
||||
<!-- <li><a href="{{ SITEURL }}/categories.html">Categories</a></li>
|
||||
{% endif %}
|
||||
{% if tags|length > 1 %}
|
||||
<li><a href="{{ SITEURL }}/tags.html">Tags</a></li>
|
||||
{% endif %} -->
|
||||
<br />
|
||||
<!--
|
||||
<li>Photo Portfolio:</li>
|
||||
{% for page in pages %}
|
||||
{% if page.title != "About" and page.title !="Welcome" and page.title !="Portfolio" %}
|
||||
<li><a href="{{ SITEURL }}/{{ page.url }}">{{ page.title }}</a>{% if not loop.last %}{% endif %}</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<br />
|
||||
-->
|
||||
<li>{{ LINKS_WIDGET_NAME | default('links') }}</li>
|
||||
{% for name, link in LINKS %}
|
||||
<li><a href="{{ link }}">{{ name }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<span class="feed"><a href="{{ SITEURL }}/{{ FEED_RSS }}">RSS</a> | <a href="{{ SITEURL }}/{{ FEED_ATOM }}">Atom</a></span>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
|
||||
<div id="credits">
|
||||
<span>Powered by <a href="https://www.debian.org/" target="_blank">Debian GNU/Linux</a> and <a href="https://blog.getpelican.com/" target="_blank">Pelican</a>.</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{% include 'analytics.html' %}
|
||||
{% include 'piwik.html' %}
|
||||
{% include 'disqus_script.html' %}
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user