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

Commit

Permalink
Scale properly
Browse files Browse the repository at this point in the history 
removed scaleHeight option
  • Loading branch information
@ashleydw
ashleydw committed Aug 22, 2016
1 parent 0bab4bc commit d330202
Show file tree
Hide file tree
Showing 6 changed files with 112 additions and 97 deletions.
71 changes: 41 additions & 30 deletions dist/ekko-lightbox.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/ekko-lightbox.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/ekko-lightbox.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/ekko-lightbox.min.js.map
View file

Large diffs are not rendered by default.

83 changes: 48 additions & 35 deletions ekko-lightbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ const Lightbox = (($) => {
showArrows: true, //display the left / right arrows or not
type: null, //force the lightbox into image / youtube mode. if null, or not image|youtube|vimeo; detect it
alwaysShowClose: false, //always show the close button, even if there is no title
scaleHeight: true, //scales height and width if the image is taller than window size
loadingMessage: '<div class="ekko-lightbox-loader"><div><div></div><div></div></div></div>', // http://tobiasahlin.com/spinkit/
leftArrow: '<span>&#10094;</span>',
rightArrow: '<span>&#10095;</span>',
Expand Down Expand Up @@ -66,6 +65,8 @@ const Lightbox = (($) => {
this._border = null
this._titleIsShown = false
this._footerIsShown = false
this._wantedWidth = 0
this._wantedHeight = 0
this._modalId = `ekkoLightbox-${Math.floor((Math.random() * 1000) + 1)}`;
this._$element = $element instanceof jQuery ? $element : $($element)

Expand Down Expand Up @@ -119,12 +120,18 @@ const Lightbox = (($) => {
})
.on('hide.bs.modal', this._config.onHide.bind(this))
.on('hidden.bs.modal', () => {
if (this._galleryName)
if (this._galleryName) {
$(document).off('keydown.ekkoLightbox')
$(window).off('resize.ekkoLightbox')
}
this._$modal.remove()
return this._config.onHidden.call(this)
})
.modal(this._config)

$(window).on('resize.ekkoLightbox', () => {
this._resize(this._wantedWidth, this._wantedHeight)
})
}

element() {
Expand Down Expand Up @@ -319,7 +326,9 @@ const Lightbox = (($) => {
}

_totalCssByAttribute(attribute) {
return parseFloat(this._$modalDialog.css(attribute)) + parseFloat(this._$modalContent.css(attribute)) + parseFloat(this._$modalBody.css(attribute))
return parseInt(this._$modalDialog.css(attribute), 10) +
parseInt(this._$modalContent.css(attribute), 10) +
parseInt(this._$modalBody.css(attribute), 10)
}

_updateTitleAndFooter() {
Expand All @@ -346,9 +355,9 @@ const Lightbox = (($) => {
}

_showYoutubeVideo(remote, $containerForElement) {
let id = this._getYoutubeId(remote);
let query = remote.indexOf('&') > 0 ? remote.substr(remote.indexOf('&')) : '';
let width = this._checkDimensions( this._$element.data('width') || 560 );
let id = this._getYoutubeId(remote)
let query = remote.indexOf('&') > 0 ? remote.substr(remote.indexOf('&')) : ''
let width = this._$element.data('width') || 560
return this._showVideoIframe(
`//www.youtube.com/embed/${id}?badge=0&autoplay=1&html5=1${query}`,
width,
Expand All @@ -358,14 +367,14 @@ const Lightbox = (($) => {
}

_showVimeoVideo(id, $containerForElement) {
let width = this._checkDimensions( this._$element.data('width') || 560 );
let height = width / ( 500/281 ); // aspect ratio
return this._showVideoIframe(id + '?autoplay=1', width, height, $containerForElement);
let width = 560
let height = width / ( 500/281 ) // aspect ratio
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._checkDimensions(this._$element.data('width') || 612);
let width = this._$element.data('width') || 612
let height = width + 80;
id = id.substr(-1) !== '/' ? id + '/' : id; // ensure id has trailing slash
$containerForElement.html(`<iframe width="${width}" height="${height}" src="${id}embed/" frameborder="0" allowfullscreen></iframe>`);
Expand Down Expand Up @@ -491,44 +500,48 @@ const Lightbox = (($) => {

_resize( width, height ) {

if(this._config.scaleHeight) {
//scales the dialog based on height and width, takes all padding, borders, margins into account
let headerHeight = 0,
footerHeight = 0
height = height || width
this._wantedWidth = width
this._wantedHeight = height

// as the resize is performed the modal is show, the calculate might fail
// if so, default to the default sizes
if (this._titleIsShown)
footerHeight = this._$modalFooter.outerHeight(true) || 67
// if width > the available space, scale down the expected width and height
let widthBorderAndPadding = this._padding.left + this._padding.right + this._border.left + this._border.right
let maxWidth = Math.min(width + widthBorderAndPadding, document.body.clientWidth)
if(width > maxWidth) {
height = ((maxWidth - widthBorderAndPadding) / width) * height
width = maxWidth
}

if (this._footerIsShown)
headerHeight = this._$modalHeader.outerHeight(true) || 55
let headerHeight = 0,
footerHeight = 0

let borderPadding = this._border.top + this._border.bottom + this._padding.top + this._padding.bottom;
// as the resize is performed the modal is show, the calculate might fail
// if so, default to the default sizes
if (this._footerIsShown)
footerHeight = this._$modalFooter.outerHeight(true) || 55

//calculated each time as resizing the window can cause them to change due to Bootstraps fluid margins
let margins = parseFloat(this._$modalDialog.css('margin-top')) + parseFloat(this._$modalDialog.css('margin-bottom'));
if (this._titleIsShown)
headerHeight = this._$modalHeader.outerHeight(true) || 67

let maxHeight = Math.min(height, $(window).height() - borderPadding - margins - headerHeight - footerHeight);
let factor = Math.min(maxHeight / height, 1);
width = factor * width;
let borderPadding = this._padding.top + this._padding.bottom + this._border.bottom + this._border.top

this._$lightboxContainer.css('height', maxHeight)
//calculated each time as resizing the window can cause them to change due to Bootstraps fluid margins
let margins = parseFloat(this._$modalDialog.css('margin-top')) + parseFloat(this._$modalDialog.css('margin-bottom'));

let maxHeight = Math.min(height, $(window).height() - borderPadding - margins - headerHeight - footerHeight);
if(height > maxHeight) {
// if height > the available height, scale down the width
let factor = Math.min(maxHeight / height, 1);
width = Math.ceil(factor * width);
}

let width_total = width + this._border.left + this._padding.left + this._padding.right + this._border.right;
this._$modalDialog.css('width', 'auto') .css('maxWidth', width_total);
this._$lightboxContainer.css('height', maxHeight)
this._$modalDialog.css('width', 'auto') .css('maxWidth', width);

this._$modal.modal('_handleUpdate');
return this;
}

_checkDimensions(width) {
//check that the width given can be displayed, if not return the maximum size that can be
let width_total = width + this._border.left + this._padding.left + this._padding.right + this._border.right;
return (width_total > document.body.clientWidth) ? this._$modalBody.width() : width;
}

static _jQueryInterface(config) {
config = config || {}
return this.each(() => {
Expand Down
49 changes: 20 additions & 29 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,46 +178,45 @@ <h2>Options</h2>
</thead>
<tbody>
<tr>
<td>left_arrow_class</td>
<td>string</td>
<td><code>.glyphicon .glyphicon-chevron-left</code></td>
<td>The css classes to give to the left arrow</td>
<td>leftArrow / rightArrow</td>
<td>html</td>
<td><code>&#10094;</code> / <code>&#10095;</code></td>
<td>HTML for the arrows</td>
<td></td>
</tr>
<tr>
<td>right_arrow_class</td>
<td>string</td>
<td><code>.glyphicon .glyphicon-chevron-right</code></td>
<td>The css classes to give to the right arrow</td>
<td></td>
</tr>
<tr>
<td>width (videos only; height is calculated by ratio)</td>
<td>width / height</td>
<td>integer</td>
<td></td>
<td>Force the width</td>
<td><code>data-width="[0-9]+"</code></td>
<td>Force the width / height</td>
<td><code>data-(width|height)="[0-9]+"</code></td>
</tr>
<tr>
<td>always_show_close</td>
<td>alwaysShowClose</td>
<td>boolean</td>
<td><code>true</code></td>
<td><code>false</code></td>
<td>Always show the close button, even if no title is present</td>
<td></td>
</tr>
<tr>
<td>loadingMessage</td>
<td>string</td>
<td><code>Loading...</code></td>
<td>Message injected for loading</td>
<td>html</td>
<td>A fancy loader</td>
<td>HTML injected for loading</td>
<td></td>
</tr>
<tr>
<td>showArrows</td>
<td>bool</td>
<td>true</td>
<td>Disable the navigation overlay</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<code class="block-code">$(this).ekkoLightbox({
left_arrow_class: '.glyphicon .glyphicon-chevron-left',
right_arrow_class: '.glyphicon .glyphicon-chevron-right',
alwaysShowClose: true,
onShown: function() {
console.log('Checking our the events huh?');
},
Expand Down Expand Up @@ -287,14 +286,6 @@ <h2>Events</h2>
</table>
</div>

<h2>Themes</h2>
<p>Some quick themes to show how customisation is possible.</p>
<ul>
<li><a href="dark.html">Dark, full screen</a></li>
<li><a href="nyan.html">Nyan</a></li>
</ul>


<h2>Examples</h2>
<p>Thanks to <a href="https://unsplash.it/">https://unsplash.it/</a> for the images.</p>
<ul>
Expand Down

0 comments on commit d330202

Please sign in to comment.