Adds support for image zoom (#296)
* Add image zoom * Minor improvements
This commit is contained in:
Maruan
GitHub
parent
016a01b08f
commit
1318c805fe
@ -177,6 +177,7 @@ enable_navbar_social: false # enables displaying social links in the
|
||||
# navbar on the about page
|
||||
enable_project_categories: true # enables categorization of projects into
|
||||
# multiple categories
|
||||
enable_medium_zoom: true # enables image zoom feature (as on medium.com)
|
||||
|
||||
# -----------------------------------------------------------------------------
|
||||
# Library versions
|
||||
@ -209,3 +210,6 @@ mdb:
|
||||
popper:
|
||||
version: "2.4.4"
|
||||
integrity: "sha512-eUQ9hGdLjBjY3F41CScH3UX+4JDSI9zXeroz7hJ+RteoCaY+GP/LDoM8AO+Pt+DRFw3nXqsjh9Zsts8hnYv8/A=="
|
||||
medium_zoom:
|
||||
version: "1.0.6"
|
||||
integrity: "sha256-EdPgYcPk/IIrw7FYeuJQexva49pVRZNmt3LculEr7zM="
|
||||
|
||||
@ -32,7 +32,6 @@
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>{{ site.icon }}</text></svg>">
|
||||
{% endif %}
|
||||
<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
|
||||
|
||||
<link rel="canonical" href="{{ page.url | replace:'index.html','' | relative_url }}">
|
||||
|
||||
<!-- JQuery -->
|
||||
@ -40,21 +39,20 @@
|
||||
|
||||
<!-- Theming-->
|
||||
{% if site.enable_darkmode %}
|
||||
<script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
|
||||
<!-- Load DarkMode JS -->
|
||||
<script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
|
||||
<script src="{{ '/assets/js/dark_mode.js' | relative_url }}"></script>
|
||||
{% endif %}
|
||||
|
||||
{% if site.enable_google_analytics %}
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() { dataLayer.push(arguments); }
|
||||
gtag('js', new Date());
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() { dataLayer.push(arguments); }
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', '{{ site.google_analytics }}');
|
||||
</script>
|
||||
gtag('config', '{{ site.google_analytics }}');
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{% if site.enable_panelbear_analytics %}
|
||||
|
||||
@ -5,6 +5,11 @@ $(function () {$('[data-toggle="tooltip"]').tooltip()})
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{% if site.enable_medium_zoom %}
|
||||
<!-- Medium Zoom JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/medium-zoom@{{ site.medium_zoom.version }}/dist/medium-zoom.min.js" integrity="{{ site.medium_zoom.integrity }}" crossorigin="anonymous"></script>
|
||||
<script src="{{ '/assets/js/zoom.js' | relative_url }}"></script>
|
||||
{% endif %}
|
||||
|
||||
<!-- Load Common JS -->
|
||||
<script src="{{ '/assets/js/common.js' | relative_url }}"></script>
|
||||
|
||||
@ -4,14 +4,12 @@ title: a post with images
|
||||
date: 2015-05-15 21:01:00
|
||||
description: this is what included images could look like
|
||||
---
|
||||
Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptown vinyl kitsch. Fingerstache four loko meh 8-bit, tousled banh mi tilde forage Schlitz dreamcatcher twee 3 wolf moon. Chambray asymmetrical paleo salvia, sartorial umami four loko master cleanse drinking vinegar brunch.
|
||||
This is an example post with image galleries.
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/9.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/7.jpg">
|
||||
</div>
|
||||
@ -19,25 +17,30 @@ Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptow
|
||||
<div class="caption">
|
||||
A simple, elegant caption looks good between image rows, after each row, or doesn't have to be there at all.
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/8.jpg">
|
||||
</div>
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/10.jpg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Slow-carb four dollar toast Helvetica pop-up. Kale chips next level literally trust fund Pitchfork. Jean shorts Pinterest beard, farm-to-table irony craft beer swag tofu 8-bit Banksy. Quinoa forage fanny pack, pug hashtag Echo Park heirloom Schlitz tote bag artisan Neutra mumblecore 90's shabby chic raw denim.
|
||||
Images can be made zoomable.
|
||||
Simply add `data-zoomable` to `<img>` tags that you want to make zoomable.
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/11.jpg">
|
||||
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/8.jpg" data-zoomable>
|
||||
</div>
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/12.jpg">
|
||||
</div>
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/7.jpg">
|
||||
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/10.jpg" data-zoomable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
The rest of the images in this post are all zoomable, arranged into different mini-galleries.
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/11.jpg" data-zoomable>
|
||||
</div>
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/12.jpg" data-zoomable>
|
||||
</div>
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
<img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/7.jpg" data-zoomable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -6,21 +6,13 @@ description: an example of a blog post with twitter
|
||||
---
|
||||
A sample blog page that demonstrates the inclusion of Tweets/Timelines/etc.
|
||||
|
||||
<br />
|
||||
|
||||
# Tweet
|
||||
An example of displaying a tweet :
|
||||
An example of displaying a tweet:
|
||||
{% twitter https://twitter.com/rubygems/status/518821243320287232 %}
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
# Timeline
|
||||
An example of pulling from a timeline :
|
||||
An example of pulling from a timeline:
|
||||
{% twitter https://twitter.com/jekyllrb maxwidth=500 limit=3 %}
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
# Additional Details
|
||||
For more details on using the plugin visit : https://github.com/red-data-tools/jekyll-jupyter-notebook
|
||||
For more details on using the plugin visit: [jekyll-twitter-plugin](https://github.com/rob-murray/jekyll-twitter-plugin){:target="\_blank"}
|
||||
|
||||
@ -8,6 +8,10 @@ p, h1, h2, h3, h4, h5, h6, em, div, span, strong {
|
||||
color: var(--global-text-color);
|
||||
}
|
||||
|
||||
article div {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
a, table.table a {
|
||||
color: var(--global-theme-color);
|
||||
&:hover {
|
||||
|
||||
8
assets/js/zoom.js
Normal file
8
assets/js/zoom.js
Normal file
@ -0,0 +1,8 @@
|
||||
|
||||
$(document).ready(function() {
|
||||
mediumZoom('[data-zoomable]', {
|
||||
margin: 100,
|
||||
background: getComputedStyle(document.documentElement)
|
||||
.getPropertyValue('--global-bg-color') + 'ee',
|
||||
})
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user