Skip to content
This repository has been archived by the owner on May 22, 2020. It is now read-only.

Added Dailymotion videos support #322

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added Dailymotion videos support #322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 19 additions & 4 deletions ekko-lightbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const Lightbox = (($) => {
maxHeight: 9999,
showArrows: true, //display the left / right arrows or not
wrapping: true, //if true, gallery loops infinitely
type: null, //force the lightbox into image / youtube mode. if null, or not image|youtube|vimeo; detect it
type: null, //force the lightbox into image / youtube mode. if null, or not image|youtube|vimeo|dailymotion; detect it
alwaysShowClose: false, //always show the close button, even if there is no title
loadingMessage: '<div class="ekko-lightbox-loader"><div><div></div><div></div></div></div>', // http://tobiasahlin.com/spinkit/
leftArrow: '<span>&#10094;</span>',
Expand Down Expand Up @@ -259,11 +259,13 @@ const Lightbox = (($) => {
type = 'youtube';
if(!type && this._getVimeoId(src))
type = 'vimeo';
if(!type && this._getDailymotionId(src))
type = 'dailymotion';
if(!type && this._getInstagramId(src))
type = 'instagram';
if(type == 'audio' || type == 'video' || (!type && this._isMedia(src)))
if(type === 'audio' || type === 'video' || (!type && this._isMedia(src)))
type = 'media';
if(!type || ['image', 'youtube', 'vimeo', 'instagram', 'media', 'url'].indexOf(type) < 0)
if(!type || ['image', 'youtube', 'vimeo', 'dailymotion', 'instagram', 'media', 'url'].indexOf(type) < 0)
type = 'url';

return type;
Expand Down Expand Up @@ -317,7 +319,7 @@ const Lightbox = (($) => {
let currentRemote = this._$element.attr('data-remote') || this._$element.attr('href')
let currentType = this._detectRemoteType(currentRemote, this._$element.attr('data-type') || false)

if(['image', 'youtube', 'vimeo', 'instagram', 'media', 'url'].indexOf(currentType) < 0)
if(['image', 'youtube', 'vimeo', 'dailymotion', 'instagram', 'media', 'url'].indexOf(currentType) < 0)
return this._error(this._config.strings.type)

switch(currentType) {
Expand All @@ -331,6 +333,9 @@ const Lightbox = (($) => {
case 'vimeo':
this._showVimeoVideo(this._getVimeoId(currentRemote), $toUse);
break;
case 'dailymotion':
this._showDailymotionVideo(this._getDailymotionId(currentRemote), $toUse);
break;
case 'instagram':
this._showInstagramVideo(this._getInstagramId(currentRemote), $toUse);
break;
Expand All @@ -356,6 +361,10 @@ const Lightbox = (($) => {
return string && string.indexOf('vimeo') > 0 ? string : false
}

_getDailymotionId(string) {
return string && string.indexOf('dailymotion') > 0 ? string : false
}

_getInstagramId(string) {
return string && string.indexOf('instagram') > 0 ? string : false
}
Expand Down Expand Up @@ -442,6 +451,12 @@ const Lightbox = (($) => {
return this._showVideoIframe(id + '?autoplay=1', width, height, $containerForElement)
}

_showDailymotionVideo(id, $containerForElement) {
let width = this._$element.data('width') || 500
let height = this._$element.data('height') || width / ( 560/315 )
return this._showVideoIframe(id + '?autoplay=1', width, height, $containerForElement)
}

_showInstagramVideo(id, $containerForElement) {
// instagram load their content into iframe's so this can be put straight into the element
let width = this._$element.data('width') || 612
Expand Down
23 changes: 17 additions & 6 deletions examples/bs3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ <h2>Options</h2>
<tr>
<td>type</td>
<td>Force the lightbox into image/YouTube mode.</td>
<td><code>data-type="(image|youtube|vimeo)"</code></td>
<td><code>data-type="(image|youtube|vimeo|dailymotion)"</code></td>
</tr>
</tbody>
</table>
Expand Down Expand Up @@ -362,24 +362,35 @@ <h4>Vimeo</h4>
<p>You cannot embed Vimeo videos using the standard url (ie http://vimeo.com/80629469); you must link to the embed source (ie player.vimeo.com/video/80629469). This will mean your link url - if the JavaScript fails, will open the full screen player (try opening the first link below in a new tab); the solution to this is to set the lightbox source directly - the second link below does this.</p>
<div data-code="example-3-b">
<p><a href="http://player.vimeo.com/video/80629469" data-toggle="lightbox">City Lights - from Colin Rich (using embed link)</a></p>
<p><a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox">City Lights - from Colin Rich</a> (with reccommended <code>data-remote</code> setting)</p>
<p><a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox">City Lights - from Colin Rich</a> (with recommended <code>data-remote</code> setting)</p>
</div>
<code data-code="example-3-b" data-trim="all"></code>
<h4>Dailymotion</h4>
<p>You cannot embed Dailymotion videos using the standard url (ie https://dai.ly/x6xailo); you must link
to the embed source (ie https://www.dailymotion.com/embed/video/x6xailo). This will mean your link url - if
the JavaScript fails, will open the full screen player (try opening the first link below in a new
tab); the solution to this is to set the lightbox source directly - the second link below does this.</p>
<div data-code="example-3-c">
<p><a href="https://www.dailymotion.com/embed/video/x6xailo" data-toggle="lightbox">Robin des Bois (using embed link)</a></p>
<p><a href="https://dai.ly/x6xailo" data-remote="https://www.dailymotion.com/embed/video/x6xailo" data-toggle="lightbox">Robin des bois</a> (with recommended <code>data-remote</code> setting)
</p>
</div>
<code data-code="example-3-c" data-trim="all"></code>
<h4>Instagram</h4>
<p></p>
<div data-code="example-3-c">
<div data-code="example-3-d">
<p><a href="http://instagram.com/p/pZfG1fPfuX/" data-toggle="lightbox" data-title="Plug for our new service">GOtags.co.uk</a></p>
<p>This also works with photos: <a href="//instagram.com/p/0wbypvPfmQ/" data-toggle="lightbox">GOtags.co.uk</a></p>
</div>
<code data-code="example-3-c" data-trim="all"></code>
<code data-code="example-3-d" data-trim="all"></code>
<h4>Forcing width</h4>
<p>Set the width of the video</p>
<div data-code="example-3-d">
<div data-code="example-3-e">
<p><a href="https://www.youtube.com/watch?v=e-ORhEE9VVg" data-toggle="lightbox">Taylor Swift - Blank Space (standard)</a></p>
<p><a href="https://www.youtube.com/watch?v=e-ORhEE9VVg" data-toggle="lightbox" data-width="640">Taylor Swift - Blank Space (640 x 360)</a></p>
<p><a href="https://www.youtube.com/watch?v=e-ORhEE9VVg" data-toggle="lightbox" data-width="1280">Taylor Swift - Blank Space (1280 x 780)</a></p>
</div>
<code data-code="example-3-d" data-trim="all"></code>
<code data-code="example-3-e" data-trim="all"></code>

<!-- i hope your coworkers think you're listening to some justin and taylor -->

Expand Down
18 changes: 14 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -392,21 +392,31 @@ <h4>Vimeo</h4>
<p><a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox">City Lights - from Colin Rich</a> (with reccommended <code>data-remote</code> setting)</p>
</div>
<code data-code="example-3-b" data-trim="all"></code>
<h4>Dailymotion</h4>
<p>You cannot embed Dailymotion videos using the standard url (ie https://dai.ly/x6xailo); you must link
to the embed source (ie https://www.dailymotion.com/embed/video/x6xailo). This will mean your link url - if
the JavaScript fails, will open the full screen player (try opening the first link below in a new
tab); the solution to this is to set the lightbox source directly - the second link below does this.</p>
<div data-code="example-3-c">
<p><a href="https://www.dailymotion.com/embed/video/x6xailo" data-toggle="lightbox">Robin des Bois (using embed link)</a></p>
<p><a href="https://dai.ly/x6xailo" data-remote="https://www.dailymotion.com/embed/video/x6xailo" data-toggle="lightbox">Robin des bois</a> (with recommended <code>data-remote</code> setting)
</p>
</div>
<h4>Instagram</h4>
<p></p>
<div data-code="example-3-c">
<div data-code="example-3-d">
<p><a href="http://instagram.com/p/BRCYe_wD9pV/" data-toggle="lightbox" data-title="Plug for our new service">Instagram</a></p>
<p>This also works with photos: <a href="//instagram.com/p/BRCdyxnjBsA/" data-toggle="lightbox">Instagram</a></p>
</div>
<code data-code="example-3-c" data-trim="all"></code>
<code data-code="example-3-d" data-trim="all"></code>
<h4>Forcing width</h4>
<p>Set the width of the video</p>
<div data-code="example-3-d">
<div data-code="example-3-e">
<p><a href="https://www.youtube.com/watch?v=e-ORhEE9VVg" data-toggle="lightbox">Taylor Swift - Blank Space (standard)</a></p>
<p><a href="https://www.youtube.com/watch?v=e-ORhEE9VVg" data-toggle="lightbox" data-width="640">Taylor Swift - Blank Space (640 x 360)</a></p>
<p><a href="https://www.youtube.com/watch?v=e-ORhEE9VVg" data-toggle="lightbox" data-width="1280">Taylor Swift - Blank Space (1280 x 780)</a></p>
</div>
<code data-code="example-3-d" data-trim="all"></code>
<code data-code="example-3-e" data-trim="all"></code>

<!-- i hope your coworkers think you're listening to some justin and taylor -->

Expand Down