ToDos

[felixhagspiel]

• [x] limit max-width/height of images due to original file-size to prevent bad resolution
• [x] add loading-GIF
• [x] fix too big image size when resizing window to fullscreen https://github.com/felixhagspiel/jsOnlyLightbox#lightboxopensrc-link
• [x] fix prev/next button position on load
• [ ] add HTML support
• [ ] add touch/swipe support
• [x] fix IE8 http://screencast.com/t/20o6pqvXHz
• [x] add caption
• [x] click on image shows next image - option
• [x] only init controls if more than 1 image
• [x] chrome on iOS bug prevents correct display of images
• [x] add pure JS/CSS loading-animation & control-arrows instead of gif/png`s
• [ ] add Slideshow
• [x] add broken link support / fix loading animation
• [x] remove constant modifiers for image size

[0xsven]

Hey Felix. Nice Plugin! It just worked out of the box. Only thing that is missing would be a loading-indicator, so for bigger pictures and slow internet connection people don't think there is a bug.

[felixhagspiel]

Hey Sven, thank you! I added a loading gif as well as an preload-option. I haven`t tested it completely yet, so you have to grab the latest version of the development branch. Let me know if you run into any errors.

[robsonsobral]

Hi! Your plugin looks like what I've looking for.

Do you mind of add custom selectors to your list? I wish I could use something like a[href$=".jpg"].

Thanks!

[felixhagspiel]

Hey Rob,

look here https://github.com/felixhagspiel/jsOnlyLightbox#lightboxopensrc-link Just select the elements yourself and open the lightbox on click and pass the URL to the image. Does this solve your problem?

[robsonsobral]

Thanks, @felixhagspiel ! It does! Thanks!

[lookitstony]

This is awesome man, good job! Seems to do everything I need except include a caption. Using it regardless as caption is not required for what I am doing but it would be nice if the feature appeared one day. Keep up the good work :)

[felixhagspiel]

@lookitstony Hey thank you! Funny, at the weekend I was thinking about adding a caption-option because I also need it on my own website :) I havent found time yet to implement it, but maybe I can do it at the upcoming weekend. I added it to my todo's

[lookitstony]

@felixhagspiel Cool, I am sure we all know how the limited time thing goes lol. No rush on my part it works perfect for now, I will look forward to the future addition though :) Thanks!

[felixhagspiel]

@lookitstony I just added caption support. It is not fully tested yet, so you have to get it from the development branch. And please let me know if you run into troubles!

[felixhagspiel]

@lookitstony I added caption-support to the masterbranch & added some more fixes.

[K4T]

Hi! Any chance to support broken links to images? Now user will see spinner which will never dissapear if link to image is broken..

[felixhagspiel]

hey @K4T I will try to implement it next week. Thanks for the suggestion!

[K4T]

Hi, thank you. I have one more request for you. Can you add ability to modify values of those 0.8 factors, which are here: https://github.com/felixhagspiel/jsOnlyLightbox/blob/master/js/lightbox.js#L649. For my project I would like to use values like 0.9 or 0.95 because I have to use as much space as possible for my images in lightbox. I dont like to modify source code of plugins, it is a bad practice as we all know.

[felixhagspiel]

@K4T I added a maxImgSize modifier and an onloaderror-callback to the options, see here and here. be sure to take the latest version from the dev-branch and not the master. And please report any errors here, so I can fix them before merging into master. Does that fix your problems?

[K4T]

Hi! maxImgSize and onloaderror works like it should. Nice! Thank you.

[felixhagspiel]

@K4T maybe because there is an 'r' in error too much? :)

[K4T]

Yeah, sorry for that stupid mistake.

Here is example which show you how you can display error message for broken images:

onloaderror: function() {
    var $jslghtbx = $('#jslghtbx');
    var errorEle = '<div class="jslghtbx-loading-error">Image not found!</div>';

    $jslghtbx.find('.jslghtbx-loading-animation').remove();
    $jslghtbx.append(errorEle);
}

.jslghtbx-loading-error {
    width: 300px;
    margin-left: -150px;

    position: absolute;
    top: 48%;
    left: 50%;

    color: #fff;
    font-weight: bold;
    text-align: center;
}