Ideas for Upgrades

[UnaOmnia]

See at:

http://davidgallo.com/category/concerts-and-events/
http://davidgallo.com/category/press/

1. Option to remove all styling?

Basically, can we make it have an option to make there be nothing showing on the modal EXCEPT the image or video embed.

2. Ability to move next, previous, and close buttons to body like modal-backdrop, but have them site above everything.

This way they can be styled to the window and not the modal window. Many people are likely going to want to drop the modal header, footer, and white padding around the modal content.

At that point they would have buttons just outside the content (A). Think it is easier to style with it can be absolutely or fixed position with an element that matches or the window's width and height (B).

3. Loading Icon

A loading icon positioned dead center of the modal backdrop would be nice for when videos are loading. I know images are preloaded but there still is sometimes a little time in between, especially the larger the images I THINK. Either way, if the load icon was on the modal backdrop the content would cover it when loaded. I know you have the loading text, but what if I want HTML there? I didn't try that, you can disregard if that works I guess. But ultimately that would lead to:

4. Had to do a lot of work on vertical centering and horizontal centering.

When I checked out the issues section here for a solution I saw your answer was based on Bootstrap, i.e. find a solution for centering the Bootstrap modal and you should be good here. I guess I wish it was more intuitive on its own. That sort of goes back to #1-3 of removing the styling and adding loading icon over the modal backdrop, but having it vertically and horizontally centered. So #1-4 are sort of all related a bit.

if(!$(".ekko-lightbox .modal-dialog").hasClass('vertical-align-center')){
$(".ekko-lightbox .modal-dialog").addClass('vertical-align-center').wrap( "

" );
}

.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
}

5. Auto detect incorrect Vimeo URL

Add to ekkoLightbox() a process that checks data-toggle="lightbox" for "http://vimeo.com/" in href attribute and swaps it for "http://player.vimeo.com/video/" and same for "https". Similar to the Youtube regex.

6. Swipe out of the box

Swipe to trigger next and previous triggers for galleries.

7. Videos in galleries having arrows out of the box.

8. Youtube to maintain 16.9 aspect ratio instead of full width and height (on load and window resize)

I have logic for this but you could potentially improve on it:

YOUTUBE ONLY

IF video taller and wider than window
THEN match video width to width of window and check video height

      IF now video taller than window
      THEN match video height to window height and make video width equal to the height x 16/9

ELSE IF video taller but width equal to or thinner than window
THEN match video height to window height and make video width equal to the height x 16/9

ELSE IF video wider and height equal to or shorter than window
THEN match video width to window width and make video height equal to the width x 9/16

ELSE (or ELSE IF video short and thinner than window)
THEN match video width to window width and make video height equal to the width x 9/16

      IF now video taller than window
      THEN match video height to window height and make video width equal to window width 
       (and just say screw it - this is tough and let YouTube finish it with black edging in the video frame)

VIMEO & IMAGES

I believe when the screen is wide enough the video embed becomes taller than the screen. So a simple check on load to see if it is taller that matches it to the height of the window if it is, would be all you would need.

Did the same thing for images - only if they are taller they shrink down to match the height of the window, and I didn't have to do anything for the aspect ratio to be fine as is.

RESIZE FOR YOUTUBE

I couldn't make that work, so my solution was to make the gallery opacity 0 while the backdrop still showed and click next and previous arrows on gallery to reset it. For non-galleries, the lightbox link is marked when it is clicked and when the screen resizes it closes the lightbox and reclicks the link that opened it. Again, this just resets and resizes what was in the lightbox.

The first load functions just were working on resize well. Waiting for resize to be completely over and recreating it and sizing it, as if it just loaded, worked better.

That maintained the above logic. I could also limit that to Youtube alone because the images and Vimeo seem to do fine on resize.