ashleydw / lightbox Goto Github PK

When an image doesn't have a title, the title bar (which includes the close button) does not show. It's set to display none.

Attached here are 2 images showing the DOM in Chrome inspector - first where the image has a title, and second where there is no title. You can see the inline "display:none" in the .modal-header line in the second image.

When tested your example i noticed that left/right arrows are positioned too low almost outside image boundaries when image height isn't enough.

http://ashleydw.github.io/lightbox/#different-sizes

Seems to be some debate about the best way to detect the window width.
See this project for an explanation: https://github.com/tysonmatanich/viewportSize
Might need to explore more.

It's an awesome plugin, I think it would be better when you implement the responsiveness to it.

Current gallery markup requires the BS column class to be within the "a tag" to get gallery detection working. This makes it extremely complicated to use it with a CMS, which typically will try to separate markup from content by wrapping each linked image into it's own column div. It even might additionally wrap it in semantic tags, like figure:

<div class="row">
     <div class="col-sm-6">
        <a href="image1lg.jpg" title="Title 1" data-toggle="lightbox" data-gallery="C254" data-title="Title 1" data-footer="The description of the 1st  image">
            <img src="image1sm.jpg"  class="img-responsive" alt="Alt 1" title="Title 1">
        </a>
    </div>
     <div class="col-sm-4">
        <a href="image2lg.jpg" title="Title 2" data-toggle="lightbox" data-gallery="C254" data-title="Title 2" data-footer="The description of the 2nd  image">
            <img src="image2sm.jpg"  class="img-responsive" alt="Alt 2" title="Title 2">
        </a>
    </div>
</div>

With or without “figure”, current gallery detection will fail, since it is glued to a static markup. Maybe it is possible to use a more abstract way to detect galleries? For me this is the only missing link to replace all those bloated non-BS-based Lightboxes. Keep up the good work!

Does not appear to work in IE8.

Hello,

In Firefox v26, Youtube vídeos don't play.

Thanks,

Paulo

Hi there,

when I tried to use ekko-lightbox.js I have :

1. Uncaught TypeError: Cannot read property 'fn' of undefined : It seems you forgot to reference jQuery...
2. Click on prev/next do nothing...

My piece of code :

<div class="row">
    <div class="col-sm-4">
        <a class="thumbnail" href="http://dummy.com/wp-content/uploads/2014/01/Vestiaire.jpg" data-toggle="lightbox" data-gallery="photos" data-type="image">
            <img src="http://dummy.com/wp-content/uploads/2014/01/Vestiaire-300x199.jpg" alt="" />
        </a>
    </div>
    <div class="col-sm-4">
        <a class="thumbnail" href="http://dummy.com/wp-content/uploads/2014/02/D1000586.jpg" data-toggle="lightbox" data-gallery="photos" data-type="image">
            <img src="http://dummy.com/wp-content/uploads/2014/02/D1000586-300x199.jpg" alt="" />
        </a>
    </div>
    <div class="col-sm-4">
        <a class="thumbnail" href="http://dummy.com/wp-content/uploads/2014/01/G02_1842.jpg" data-toggle="lightbox" data-gallery="photos" data-type="image">
            <img src="http://dummy.com/wp-content/uploads/2014/01/G02_1842-300x199.jpg" alt="" />
        </a>
    </div>
</div>

I did not understand where I mess up...

Hi there,

I've implemented the lightbox. It works fine on desktop, but not on mobile safari.
I get an error "TypeError: Result of expression 'this.options.onShow.bind' [undefined] is not a function." Have encountered this problem before?

The demo with the youtube video is not working.

The left and the right arrow are not positioned correct when using Safari (not the mobile version). Right now, the arrows are positioned in the top left / right corner. This is also true for all the examples in the documentation.

I checked the code and narrowed it down to line 273 where the top-padding is calculated:
273: return $(this).parent().height() / 2;
Seems like "$(this).parent().height()" is always returning 0 when using Safari (checked with console.log).

I'm using Safari 7.0.4. It's working in Chrome.

Is that possible to hide left arrow on first gallery item and right arrow on last gallery item?

Thanks!

I've ready your script and it seems that it's able to resize the image
So how can I do to when the user opens the lightbox the image is not too big ?

Sorry about my english

I found this error using IE-8:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3)
Timestamp: Thu, 10 Jul 2014 16:52:09 UTC


Message: Object doesn't support this property or method
Line: 7
Char: 76
Code: 0
URI: **********/js/ekko-lightbox.min.js

bower install ekko-lightbox

resulted in:

bower ekko-lightbox#* not-cached git://github.com/ashleydw/lightbox.git#*
bower ekko-lightbox#* resolve git://github.com/ashleydw/lightbox.git#*
bower ekko-lightbox#* download https://github.com/ashleydw/lightbox/archive/v3.1.1.tar.gz
bower ekko-lightbox#* extract archive.tar.gz
bower ekko-lightbox#* error Invalid Version: 3.0.3a

Stack trace:
TypeError: Invalid Version: 3.0.3a
at new SemVer (/usr/local/lib/node_modules/bower/node_modules/semver/semver.js:271:11)
at compare (/usr/local/lib/node_modules/bower/node_modules/semver/semver.js:424:10)
at Object.neq (/usr/local/lib/node_modules/bower/node_modules/semver/semver.js:468:10)
at GitHubResolver.GitResolver._savePkgMeta (/usr/local/lib/node_modules/bower/lib/core/resolvers/GitResolver.js:210:56)
at GitHubResolver._savePkgMeta (/usr/local/lib/node_modules/bower/lib/core/resolvers/GitHubResolver.js:128:53)
at _fulfilled (/usr/local/lib/node_modules/bower/node_modules/q/q.js:798:54)
at self.promiseDispatch.done (/usr/local/lib/node_modules/bower/node_modules/q/q.js:827:30)
at Promise.promise.promiseDispatch (/usr/local/lib/node_modules/bower/node_modules/q/q.js:760:13)
at /usr/local/lib/node_modules/bower/node_modules/q/q.js:821:14
at flush (/usr/local/lib/node_modules/bower/node_modules/q/q.js:108:17)

Console trace:
Trace
at StandardRenderer.error (/usr/local/lib/node_modules/bower/lib/renderers/StandardRenderer.js:74:17)
at Logger.updateNotifier.packageName (/usr/local/lib/node_modules/bower/bin/bower:109:18)
at Logger.EventEmitter.emit (events.js:95:17)
at Logger.emit (/usr/local/lib/node_modules/bower/node_modules/bower-logger/lib/Logger.js:29:39)
at /usr/local/lib/node_modules/bower/lib/commands/install.js:28:16
at _rejected (/usr/local/lib/node_modules/bower/node_modules/q/q.js:808:24)
at /usr/local/lib/node_modules/bower/node_modules/q/q.js:834:30
at Promise.when (/usr/local/lib/node_modules/bower/node_modules/q/q.js:1079:31)
at Promise.promise.promiseDispatch (/usr/local/lib/node_modules/bower/node_modules/q/q.js:752:41)
at /usr/local/lib/node_modules/bower/node_modules/q/q.js:574:44

System info:
Bower version: 1.2.6
Node version: 0.10.19
OS: Darwin 12.5.0 x64

A few of us are still on 2.x. I tried implementing this but I'm getting no method 'lightbox'.

Pretty please?

Need add the button (or link) for redirect to link with original image.

As far as I can see there is no way to get the close button without having a title.

Hi

When you create a gallery with just one image in it (using the data-gallery tag), open the picture and press left or right, the image vanishes and nothing is being displayed.

The fix is pretty simple, in navigate_right and navigate_left perform the showLoading() after the gallery_items.length == 1 check.

I get a big red error on http://ashleydw.github.io/lightbox/ with the following message:

This site or app is sending too much traffic to rawgit.com. Please contact its owner and ask them to use cdn.rawgit.com instead, which has no traffic limit.

Here is a screenshot:

Resize your browser down to a mobile phone size and take a look at the demo. Notice how the modal window is wider than the screen and causes a horizontal scrollbar (bad).

It looks like the widths on the div with class=modal-dialog and the div with class=modal-content are both being hardset by javascript. Not sure what the purpose of this was. If I comment the width out, everything looks fine. It also causes the modal to not be responsive when resizing the screen since it is hardcoded in the markup now.

What was the design reason to hardcode the width of the modal? Consider taking it out?

add left/right arrows (key press is not intuitive enough for the majority of users and doesn't work on mobile).

When using Firefox and the lightbox opens, the left and right navigation can be triggered when clicking the left or right side of the image.

Hower, in IE this is only possible when clicking the arrows them selves.

Many thanks!

Hi, is it possible to disable Ekko Lightbox on mobile?
Or on window width < ?

Hello,
tried to modify ekko-lightbox.js to get the content of a div instead of the arribute data-title.
I tryed to modify the method (or private function ?) updateTitleAndFooter line 204:

title = this.$element.data('title') || " ";
//title = this.$element.find('.gcontent').children();//.html();//
It dœs not work.
I maybe wrong with the way of doing this.
Is there a(nother) way to do this ?
I'm using your script in my new web site.
Thanks for your work.
http://ha-lala.com

First of all thanks for this great widget, I like the simplicity of it.
But I found a bit weird bug. When I create a gallery of mixed contents (youtube and images) and I set data-type attribute accordingly, switching from an image to a youtube video using the arrows or left/right keys the video seems to be missing. If I click directly to a video item the popup shows the correct video and it could be played.

Here I make a little example to demonstrate the issue:
https://gist.github.com/nyuwec/b05b0e87e8f794a78b63

If you remove the data-type attributes it works as expected:
https://gist.github.com/nyuwec/33b3752eb75edc2fc95d

Image is opening in the wrong place.
Image background width is incorrect.

When you open the first image of a gallery and you click on it displays the last image of the gallery. It is equivalent to clicking to the left arrow. But a click on the image should take the next image (right-arrow) to preseve the order.
EDIT: I just realized that when it goes right when you click on the right half. I use Font Awesome and had no Glyphicons displays.

Feature request: Make it possible to not only define the class of the arrows but what's inside them. E.g. with jQuery's append().

Sorry to bother again. Tried to add title and caption/footer to examples 10-12. Both are rendered properly for the first image, but after moving to the next/previous one by right/left key they stick to title/caption of the image which was opened first.

Just a “cosmetical” one.

Currently a caption can be rendered via data-footer into BS's modal-footer. The modal-footer is pre-styled to align everything on the right, which looks kind of ugly if you have a long (breaking) caption. Could be solved easily by pure CSS, but I think that the main purpose of the modal-footer is “button-hosting” (would be the ideal place for the next/prev button or some social gimmicks :-).

So for my personal version I added two attributes (data-boxtitle, data-caption) and render both, if available, into the modal header, leaving the data-footer untouched for future use. This way no additional styling is needed, we get a title and a caption preceding the image. Second change is to even render the closing button (x) if neither boxtitle nor caption is available. I've seen too many users who really can't close a modal without a button. Even I couldn't find a way to switch to the next image by right-arrow key without reading the issue tracker :-)

Regards,

Thomas

p.s. I would recommend to rename the data-title to data-boxtitle and data-footer to data-caption, to distinguish the title (which might be available too) from the modal-box title, and the footer (which might be more than a pure caption) from the caption.

I think You made the decision to disable left/right arrows when youtube/vimeo video is shown. Probably because of the nature of the good-bad flashplayer.
I'm considering to hack your code, creating a pull request to add this feature to video players.
My idea is to add extra padding around the videoplayer and place the arrows there. It is based on my prediction that nobody would open a window-wide videoplayer.
Are you planning such feature?

The overlay is on top of the image preventing right-click save image behavior. I think the overlay element could probably be eliminated and the nav elements placed directly relative to the lightbox container without needing the overlay component.

Of course, there is a use case for preventing right-click save so perhaps this should be an option.

In any case, currently, it is inconsistent if the image is in a gallery vs not in a gallery.

I get the following error:

Uncaught TypeError: Cannot read property 'fn' of undefined ekko-lightbox.js.
I'm using jQuery v1.10.2

Help.

or link to git repo in some very visible place.

i like knowing how many stars a project has, and how many open issues etc. your demo page doesnt give me that info.

I'm a little confused by the code needed to get the left and right arrows positioned like in the demo for the multi image gallery. Right now, the arrows are positioned in the top left corner. They both work, however, I would like them to not be like the demo where when you mouse over to the left or right of the image, they appear.

I'm still a bit of a newbie with jquery so any help is appreciated.

Thanks

I've tested this nice plugin using some very large images and noticed that the loading dialog never shows. Tested in Chrome, Safari and Firefox (latest stable release each)

The placement of the left and right Glyphicon chevrons in the modal body of a Lightbox is incorrect. The chevrons appear at the very top on either side on mobile devices. The current code to calculate padding-top and use .css() in the JavaScript doesn't place the chevrons correctly on mobile devices, such as smartphones and tablets. I verified this using my iPhone 5s and iPad Air. This issue can be fixed by a simple change to the JavaScript.

In the resize function replace the following code

this.lightbox_container.find('a').css('padding-top', function() {
     return $(this).parent().height() / 2;
});

with this one line of code instead.

this.lightbox_container.find('a').css('vertical-align', 'middle');

With this change, the left and right chevrons will appear on each side, slightly toward the bottom (i.e. not exactly in the middle vertically.) However, on mobile devices, this fixes the placement, moving the chevrons from the very top downward to slightly below the middle. The chevron placement with this change is uniform across all devices, from portable devices to laptops and desktops. The chevrons appear in the same place no matter what device you are using.

Perhaps a better solution would be to remove the use of JavaScript .css() and instead place the CSS in the actual CSS file, (e.g. vertical-align: middle;) for the Glyphicon chevrons.

Hi,
I apologize in advance if this isn't the appropriate place to post this (I just created my account).

I am trying to set up the gallery_parent_selector within the lightbox options, can anyone tell me is this is right?

$('.open-image').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox({
gallery_parent_selector : '#parent-element'
});
});

In IE11 and Firefox 28 (Windows 7), flash content overlaps the gallery view.

If you have some flash content (e.g. a YouTube video), when you open the gallery, the flash content still showing over the gallery view.

Would it be possible to close the lightbox on single image by clicking/touching the lightbox large image?

I think adding an event when changing the image/video would be great.
The first event fired immediately after "next/previous" button clicked, the second event fired when the new image is displayed, just like show and shown.

I am using this Lightbox for a DNN CMS based website I am working on.

I have it integrated into the page well, but I am having an issue making the large blow up image responsive.

The window is sizing property but the image is not.

I tried to add in img-responsive in the class="col-sm-3" and that is not working for me.

Any ideas?

As a user its really annoying having to close/re-open the lightbox each time I want to view a group of images. Imagine I had to do this 10 times, I would definitely get annoyed and leave the website. If there was a next/prvious to group images together and kept the lightbox open this would be much more user friendly.

I am using this for a DNN driven CMS website I am working on.

I have it implanted and everything seems to be working well except the large version of the image is not responsive. The modal sizes perfectly.

I tried adding in img-responsive to the class beside the col-3-sm in the class for the image and nothing seems to work.

Hey,

What a nice one!

From your view, do you think this modal plugin (https://github.com/nakupanda/bootstrap3-dialog) is possible to be an understructure plugin for modal creation for your lightbox?

Just was wondering...

:)

Hi I will like to know if it's possible to have InnerHtml instead of images, and if I can use the next and back options with InnerHtml

I´m testing your godly Lightbox for a local files (some htmls distribuible via CD).

With images works perfect, but with YouTube videos this is the iframe code generated:

As you can see in the src, before the www appears the chars "//". With them the video don´t load.

Hi! This is a great script, thanks! I found one issue and I'm wondering if you have any advice?

Navigation Works:

<div>
<a href="#.jpg" data-toggle="lightbox" data-gallery="multiimages" data-title="People walking down stairs" class="col-sm-4"><img src="#.jpg" class="img-responsive"></a>
<a href="#2.jpg" data-toggle="lightbox" data-gallery="multiimages" data-title="People walking down stairs" class="col-sm-4"><img src="#2.jpg" class="img-responsive"></a>
</div>

Not working:

<div>
 <a href="#.jpg" data-toggle="lightbox" data-gallery="multiimages" data-title="People walking down stairs" class="col-sm-4"><img src="#.jpg" class="img-responsive"></a>
</div>
<div>
<a href="#2.jpg" data-toggle="lightbox" data-gallery="multiimages" data-title="People walking down stairs" class="col-sm-4"><img src="#2.jpg" class="img-responsive"></a>
</div>

Hello. Thank you for this Bootstrap friendly version of Lightbox! I have however run into a problem. When displaying on my iPad the images don't enlarge (Lightbox doesn't come into display). Any known fixes? Thank you in advance!