duncanmcdougall / responsive-lightbox Goto Github PK

View Code? Open in Web Editor NEW

113.0 13.0 48.0 968 KB

Lightweight, image only responsive, jQuery lightbox plugin

Home Page: https://www.belter.io/responsive-lightbox/

JavaScript 59.52% CSS 13.49% Less 13.49% SCSS 13.49%

responsive-lightbox's Introduction

Responsive-Lightbox

by Duncan McDougall | @duncanmcdougall

jQuery responsive lightbox plugin.

Shrinks the image to the width & height of the browser. Only handles images so it's nice and lightweight.

Demonstration

Responsive Lightbox Demo

Dependencies

Requires jQuery >= 1.4 and < 3

Browser Support

IE7+

Usage

<html>
<head>
<link rel="stylesheet" href="lightbox.css" />
</head>
<body>
<!-- Link to the image -->
<div class="gallery">
<a href="photo1.jpg">Image 1</a>
<a href="photo2.jpg">Image 2</a>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="lightbox.min.js"></script>

<script>
 $(function()
 {
    $('.gallery a').lightbox(); 
	
	// If you want seperate galleries on the same page
	// just specify different class names. 
	$('.gallery-2 a').lightbox();
 });
</script>
</body>

Options

    $('.gallery').lightbox({ margin: 20, nav: false, blur: true, minSize: 480 });

margin - int - default 50. Minimum margin around the image
nav - bool - default true. enable navigation
blur - bool - default true. Blur other content when open using css filter
minSize - int - default 0. Min window width or height to open lightbox. Below threshold will open image in a new tab.

Captions

Add your captions as a data attribute to the anchor. e.g.

    <a href="myimage.jpg" data-caption="This is a picture of a cat" >

Installing with Bower

If bower is your thing you can install using the following command

bower install responsive-lightbox

Contributing

First, clone a copy of using the GUI or the main git repo by running:

git clone git://github.com/duncanmcdougall/Responsive-Lightbox.git

I'm using GruntJS to do all the minification and linting as build tasks.

Install the grunt-cli package so that you will have the correct version of grunt available from any project that needs it. This should be done as a global install:

npm install -g grunt-cli

Enter the jquery directory and install the Node dependencies, this time without specifying a global install:

cd Responsive-Lightbox && npm install

Make sure you have grunt installed by testing:

grunt -version

Then, to get a complete, minified (w/ Uglify.js), linted (w/ JSHint) version of the plugin, type the following:

grunt

The built version of the plugin will be saved to .min versions.

Next Steps

Options: { loop }
Faster image switching
Light and dark simple themes

Thanks To

I'd like to thank Matthew Hartman, imiric et all for contributing a number of improvements to the lightbox.

MIT License

This plugin is released under the MIT License. Enjoy.

responsive-lightbox's People

Contributors

Stargazers

Watchers

Forkers

davewoods100 afornell jerecho imiric wpadami-forks graywolf17 samuelhiwale yitanffix mzovadia romarco mantish nookye ukdiaspora alexaldama steelywing rogerrogerroger vegellibert ahmetshen-us jbrunssen notioncollective stevehobbsdev kielczynski theekshanak equatordev ziad tmorehouse backfrontend mariem-07 kashtanoff hroquef carlos1587 piedicosta erik-hage mayachirp almendro hu19891110 cultureos simmbiote psergv72 js-mk hambysedlov thecrazyprogrammer ebrahim-msv antipenko nemixs cvargas dekardkrr finewebdraw

responsive-lightbox's Issues

Multigallery seems not working

Hello and thank you for sharing this beautiful and simple responsive gallery.

I have a problem that I can explain as follow:

I have more than one gallery in the same page:

example:

<!-- 1st photoset -->
<div class="photoset1 gallery">
<a href="images/strutturericettive/myphotos/photo-foto2X.jpg" title="Picture caption"><img src="images/strutturericettive/myphotos/photo-foto2.jpg" alt="Picture caption" /></a>
<a href="images/strutturericettive/myphotos/photo-foto4X.jpg" title="Picture caption"><img src="images/strutturericettive/myphotos/photo-foto4.jpg" alt="Picture caption" /></a>
<a href="images/strutturericettive/myphotos/photo-foto3X.jpg" title="Picture caption"><img src="images/strutturericettive/myphotos/photo-foto3.jpg" alt="Picture caption" /></a>
</div>

<!-- 2nd photoset -->
<div class="photoset2 gallery">
<a href="images/strutturericettive/myphotos/photobbb-foto2X.jpg" title="Picture caption"><img src="images/strutturericettive/myphotos/photobbb-foto2.jpg" alt="Picture caption" /></a>
<a href="images/strutturericettive/myphotos/photobbb-foto4X.jpg" title="Picture caption"><img src="images/strutturericettive/myphotos/photobbb-foto4.jpg" alt="Picture caption" /></a>
<a href="images/strutturericettive/myphotos/photobbb-foto3X.jpg" title="Picture caption"><img src="images/strutturericettive/myphotos/photobbb-foto3.jpg" alt="Picture caption" /></a>
</div>

The problem is that the gallery of the 1st photoset continue on the 2nd photoset and so on.

I have tried to set a rel="photoset1" and rel="photoset2" but without result.

How can I solve this issue?

Thank you for your help!

Mouse navigation with multiple galleries broken

I've noticed that if you have more than one gallery on a page the mouse next / previous functionality is broken - seems to jump between galleries and then display images in the wrong proportions. The keystrokes next / previous are fine, it stays within the gallery without issue. It just seems to be the mouse control. Any help / fix much appreciated, thanks.

Regards, Paul Phillips

Bootstrap lightroom and navbar conflict

I tried to use navbar and lightroom in bootstrap site but only either of them is working. Both of them are not working simultaneously.

z-index conflict with Bootstrap navbar-fixed-top

Thanks for sharing this simple and lightweight plugin.

I implemented this lightbox on a Bootstrap built site and noticed a conflict with the navbar-fixed-top. Though the navbar was fading back, the close button was hidden beneath it, and images that were tall enough were being cut off by it. I added a z-index to the #lightbox and it's fixed.

Otherwise, works perfectly. Again, thanks.

Unbinding all keydown functions.

In the close function, this code unbinds all keydown events:
$(document).off('keydown');

Need to describe a keyDown function:

keyDownEvent: function (e) {
    // Close lightbox with ESC
    if (e.keyCode === 27) {
        plugin.close();
    }
    // Go to next image pressing the right key
    if (e.keyCode === 39) {
        plugin.next();
    }
    // Go to previous image pressing the left key
    if (e.keyCode === 37) {
        plugin.previous();
    }
}

and need to add:
$(document).on('keydown', plugin.keyDownEvent);

and to remove only this function:
$(document).unbind('keydown', plugin.keyDownEvent);

Latest build is broken in Safari

Navigation isn't working correctly
Console returns an error:
8jquery.lightbox.js:72TypeError: 'undefined' is not a function (evaluating 'allItems[$.inArray(self, allItems) + 1].click()')
Previous version appears to work correctly

OS: Windows 7
Safari Version: 5.1.7 (7534.57.2)

Suggestion: Captions?

I'm a big fan of plugin since it's clean and easy-to-use, but I would love the ability to have image captions. I'm still relatively new at Javascript/jQuery, so I haven't been able to figure it out how to add them myself. Any tips?

CSS syntax typo

The css file has an additional "}" that shouldn't be there at the end of the file.

.lightbox__nav--prev {
left: 10px;
background-image: url('previous.png');
}
} <-

Navigation Problem

When navigating between images with the arrow keys on keyboard while there is a horizontal scrollbar on the webpage, it moves that background/webpage also every click. That's a bit annoying. Hopefully this can be fixed 👍

having multiple lightboxes on a single page

how can i add multiple lightboxes on a single page? i have tried different rel values, but when i edit the javascript, the nav buttons somehow disappears.

Edit: Ok for high resolution responsive

Edit: Ok for high resolutions, sorry for my original comment

Inline HTML elements?

I would like to know can it be used to display inline HTML elements?

Cheers.

refresh / destroy

To make this plugin a little more dynamic, simple setup refresh / destroy methods might be usefull.

Usecase: dynamically added DOM elements with new lightbox/gallery images. I haven't tested this, but from what I can ready in the code, adding images to an existing gallery and re-initializing it will cause duplicate event handlers to fire on img click.

swipe option?

Hi Duncan,

First of all - thanks for sharing. Really like the lightweight approach.
However it is not really an issue, I would like to know if there is a simple way to include a swipe option to make it more accessible on mobile?

Thanks,
Eva

Attribution requires leaving author name, author homepage link, and the license info intact

So what exactly does this mean? Is it OK to have author name, author homepage link, and license info in just the JS file? Or do I need to add it elsewhere?

I'm considering integrating your responsive lightbox into an MIT licensed project ( http://www.cascade-framework.com/ ), but I'm not entirely comfortable with your CC Attribution license as this license is notoriously ambiguous and could conflict with my own license of that of people who want to use my framework.

Would you consider replacing your CC Attribution license with an MIT, BSD, Apache, LGPL or similar license? IMO such licenses are far more suitable for code libraries as they're less likely to conflict with other licenses.

Incompatible with jQuery 1.11 in Explorer 9

Dealing with elements loaded with ajax

I was having some trouble using the plugin with links that were loaded by ajax. After a while I found the solution, just wanted to share if anyone has the same problem:

Normal request:

$ ('.lightbox').lightbox();

Requests for items loaded with ajax:

$ (Document) .ajaxComplete (function (event, request, settings) {
      $ ('.lightbox').lightbox ();
});

navigation on phone only works when background is at the top.

I'm using your nice lightbox on a responsive site, and it is working except on the mobile. When the background is not positioned at the top, the arrows don't work.

Your demo does the same thing, when I add enough images so that it will scroll.

Is there a way to fix that?

Version Numbering

Dear McDougall,

Great work, I liked it the moment I saw the blurring effect which I used in the app that I am developing nowadays.

We, you actually, should versionise it. Let me know If I can assits.

On the other hand, is it working with BS3 and jQuery 2?

Doesn't show images in Opera

FWIW: when opening the lightbox in Opera (tested with v12.16 1860 on Mac OS X, on the demo page), the overlay and the next/prev/close buttons are show, but not the images.

Jumps to random group images when clicking next or back

If you have multiple groups on a single page it will jump to random images in all the different groups instead of just browsing images in the group that was clicked.

Opacity using iphone

The image get backgrounds opacity.

The z-index solution is: Set the other items without z-index

Browser compatibility?

Is there a list somewhere? Does the lightbox work with older versons of IE?

Thanks!

SASS and/or LESS files

It's a bit of a pain importing the CSS files, ideally having SASS or LESS available would aid a lot of developers.

ID must be unique

If you check your example: /demo/groups.html
you will see that:

Grouping Galleries

Thanks for a great script. It works great without adding a lot of extra stuff I don't need. However I'm trying to group galleries that are dynamically created within the my template files, this means I only have the gallery class name within each post and so can only run the script when I know the gallery ID.

In your group example the code is:

<script>
$(function() {
    $('.gallery1 a').lightbox();
    $('.gallery2 a').lightbox();
  });
</script>

But since I don't know my gallery class names until the post appears in the loop, I need to be able to do this:

<script>
$(function() {
    $('.gallery1 a').lightbox();
 });
</script>
<ul class="gallery1"><li><a href="image"></a></li></ul>
<script>
$(function() {
    $('.gallery2 a').lightbox();
 });
</script>
<ul class="gallery2"><li><a href="image"></a></li></ul>

If I try do that at the moment I get duplication of all the hidden content and overlap of images between the two galleries. Clicking next/prev sometimes loads from the first gallery and sometimes the second.

Thank you.