implement a first version of video support for photoswipe theme.
CSS position is not perfect. It can be improved. Implementation is based upon this comment : https://github.com/dimsemenov/PhotoSwipe/issues/651#issuecomment-223193536
This commit is contained in:
@@ -26,10 +26,7 @@ Sigal comes with three themes, located in the ``sigal/themes`` folder:
|
||||
|
||||
**photoswipe**:
|
||||
`source <http://photoswipe.com/>`_, `demo
|
||||
<http://saimon.org/sigal-demo/photoswipe/>`_. The photoswipe
|
||||
theme comes with some limitations : It does not support video (see
|
||||
https://github.com/dimsemenov/PhotoSwipe/issues/651 for details). Video
|
||||
support will be added when available.
|
||||
<http://saimon.org/sigal-demo/photoswipe/>`_.
|
||||
|
||||
For developers, a Makefile is available to concatenate and minify the css
|
||||
files, using `cssmin <https://pypi.python.org/pypi/cssmin>`_ (``pip install
|
||||
|
||||
@@ -141,12 +141,14 @@ figcaption {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.video__container iframe {
|
||||
.video__container iframe,
|
||||
.video__container video {
|
||||
position: absolute;
|
||||
top:0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 2% 0 15% 0;
|
||||
}
|
||||
.video-desc {
|
||||
width: 100%;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -81,6 +81,14 @@
|
||||
</figure>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if media.type == "video" %}
|
||||
<figure class="gallery__img--secondary thumbnail" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<a href="{{ media.filename }}" itemprop="contentUrl" data-type="video" data-video='<div class="video"><div class="video__container"><video controls><source src="{{ media.filename }}" type="{{ media.mime }}" /></video></div></div>'>
|
||||
<img src="{{ theme.url }}/echo/blank.gif" data-echo="{{ media.thumbnail }}" alt="{{ media.thumbnail }}" itemprop="thumbnail" title="" />
|
||||
</a>
|
||||
<figcaption itemprop="caption description">{{ media_title }}</figcaption>
|
||||
</figure>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -198,16 +206,19 @@
|
||||
|
||||
linkEl = figureEl.children[0]; // <a> element
|
||||
|
||||
size = linkEl.getAttribute('data-size').split('x');
|
||||
|
||||
// create slide object
|
||||
item = {
|
||||
src: linkEl.getAttribute('href'),
|
||||
w: parseInt(size[0], 10),
|
||||
h: parseInt(size[1], 10)
|
||||
};
|
||||
|
||||
|
||||
if (linkEl.getAttribute('data-type') == 'video') {
|
||||
item = {
|
||||
html: linkEl.getAttribute('data-video')
|
||||
};
|
||||
} else {
|
||||
size = linkEl.getAttribute('data-size').split('x');
|
||||
item = {
|
||||
src: linkEl.getAttribute('href'),
|
||||
w: parseInt(size[0], 10),
|
||||
h: parseInt(size[1], 10)
|
||||
};
|
||||
}
|
||||
|
||||
if(figureEl.children.length > 1) {
|
||||
// <figcaption> content
|
||||
|
||||
Reference in New Issue
Block a user