lokesh / lightbox2 Goto Github PK

To avoid reflows, repaints, faster rendering, warning messages etc.

There is probably more that can be done in this area, but here is a start for our two static images.

lightbox.js

...
}).append($('', {
  src: this.options.fileLoadingImage
}).attr('width', 32).attr('height', 32)
)))), $('
', {
...

...
}).append($('', {
  src: this.options.fileCloseImage
}).attr('width', 27).attr('height', 27)
)))))).appendTo($('body'));
...

Hi,

I use a blob to creat my thumbnail (<img src=...). That works pretty good. Now I would like to build also my target picture from my blob. Unfortunatly "<a src=..." doesn't work (of course). That means:
In the original file, there are the following lines of code:
"

Does somebody has an idea?

Regards,
franz

If the image is larger than the window's viewport it should be scaled. A possible option could be added to exand the image to it's full size. As it is, the lightbox grows too large and one has to scroll to find the "x" to click or the next/prev arrows.

Would save people some time...

Images are not resizing properly on Bootstrap

I am using Lightbox 2.6 to display images for a photographic competition.

The problem I have is that the image and the white background do not line up. The image is relatively a few pixels to the right and down.

How can I get it to be central in the white background?

TIA

B

I there,

I'm not sure, if this problem is exclusive mine or not, but every time i open a lightbox i don't see the loading gif. I only see it in the first time i open a lightbox.

Is this an issue of the lightbox?

The new 'fit images in viewport' functionality is great, however it will only resize if the image is horizontally larger than the viewport, and not if it's vertically larger.
Since I have quite a lot of images which are often too large vertically this is a problem for me. Therefore I've written a quick patch to resize based on both viewport sides.

--- /Users/heleen/Downloads/lightbox.js 2013-07-04 16:20:21.000000000 +0200
+++ js/lightbox.js  2013-07-04 16:23:40.000000000 +0200
@@ -200,16 +200,30 @@
         $preloader = $(preloader);
         if (_this.options.fitImagesInViewport) {
           windowWidth = $(window).width();
+          windowHeight = $(window).height();
           maxImageWidth = windowWidth - _this.containerLeftPadding - _this.containerRightPadding - 20;
-          if (preloader.width > maxImageWidth) {
-            imageWidth = maxImageWidth;
-            imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
-            $image.width(imageWidth);
-            $image.height(imageHeight);
+          maxImageHeight = windowHeight - _this.containerTopPadding - _this.containerBottomPadding - 200;
+          if ((preloader.width - maxImageWidth) > (preloader.height - maxImageHeight)){
+              if (preloader.width > maxImageWidth) {
+                imageWidth = maxImageWidth;
+                imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
+                $image.width(imageWidth);
+                $image.height(imageHeight);
+              } else {
+                $image.width(preloader.width);
+                $image.height(preloader.height);
+              }
           } else {
-            $image.width(preloader.width);
-            $image.height(preloader.height);
-          }
+              if (preloader.height > maxImageHeight) {
+                imageHeight = maxImageHeight;
+                imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
+                $image.width(imageWidth);
+                $image.height(imageHeight);
+              } else {
+                $image.width(preloader.width);
+                $image.height(preloader.height);
+              }
+           }
         } else {
           $image.width(preloader.width);
           $image.height(preloader.height);

I've written this fairly quickly, so it's not refactored, but it does work for me. I've tested it in Firefox 22 (Mac OS X 10.7.5) and Internet Explorer 8 (Win XP).

Note that it substracts 200 from the maxImageHeight to compensate for the metadata at the bottom. This is a quick and dirty fix, but if you have a better way of calculating the bottom metadata border properly and adjusting accordingly, please do tell.

Please, feel free to include it in the code (or not if it needs improving).

P.s. Sorry, I just realised that the javascript was generated from coffeescript. I've never done coffeescript, so I've just edited the javascript. The coffeescript doesn't look too hard though, so I might have a go at that if I have time.

Hi,

I'm using the lightbox-2.6 library and I have a problem with the size of the image in the popup.

The image is of a 4:3 ratio but it is displayed in the wrong ratio.

Here is the generated html for the popup preview:

<div id="lightbox" class="lightbox" style="display: block; top: 122px; left: 0px;">
    <div class="lb-outerContainer" style="width: 266px; height: 490px;">
        <div class="lb-container">
            <img class="lb-image" src="/LD/Photos/ylmcjjxq.jpg" style="display: block; width: 642px; height: 482px;">
            <div class="lb-nav" style="display: block;">
                <a class="lb-prev" href="" style="display: block;"></a>
            <a class="lb-next" href="" style="display: block;"></a>
        </div>
        <div class="lb-loader" style="display: none;">
            <a class="lb-cancel"></a>
        </div>
    </div>
</div>
<div class="lb-dataContainer" style="display: block; width: 266px;">
    <div class="lb-data">
        <div class="lb-details">
            <span class="lb-caption" style="display: none;"></span>
            <span class="lb-number">Image 7 of 10</span>
        </div>
        <div class="lb-closeContainer">
            <a class="lb-close"></a>
        </div>
    </div>
</div>

The lb-outerContainer seems to be the problem

<div class="lb-outerContainer" style="width: 266px; height: 490px;">

because the size of the img tag has the correct ratio

<img class="lb-image" src="/LD/Photos/ylmcjjxq.jpg" style="display: block; width: 642px; height: 482px;">

Thanks for your work and help.

I had a problem and I found a solution. So the problem: images don't scale down when their dimensions are bigger then display resolution, and because I'm planning on using lightbox to display high resolution images... so modification was needed. The solution: add few lines for image scaling in preload.onload function:
preloader.onload = function() {
$image.attr('src', _this.album[imageNumber].link);
$image.width = preloader.width;
$image.height = preloader.height;
//must scale
if($image.height > window.innerHeight){
$scale = $image.width / $image.height;
$image.height = 0.9_window.innerHeight;
preloader.height = 0.9_window.innerHeight;
$image.width = $scale * $image.height;
preloader.width = $scale * $image.height;
} else if($image.width > window.innerWidth){
$scale = $image.width / $image.height;
$image.width = 0.9_window.innerWidth;
preloader.width = 0.9_window.innerWidth;
$image.height = $image.width / $scale;
preloader.height = $image.width / $scale;
}
//must scale
return _this.sizeContainer(preloader.width, preloader.height);
};

And a two line addition in showImage function:
Lightbox.prototype.showImage = function() {
var $lightbox;
$lightbox = $('#lightbox');
$lightbox.find('.lb-loader').hide();
$lightbox.find('.lb-image').fadeIn('slow');
//fill all container
$lightbox.find('.lb-image').css('width', '100%');
$lightbox.find('.lb-image').css('height', '100%');
//fill all container
this.updateNav();
this.updateDetails();
this.preloadNeighboringImages();
this.enableKeyboardNav();
};

Probably it might be written in more elegant way... but it works.
Please be gentle. It's my first time... on GitHub

Hi Lokesh
Can you add the responsive feature to your plugin?
Now it is very important with mobile devices

thanks

Hi, i tried to use lightbox2 with jQuery 1.9.0 and it not show images, just create the overlayBackgound..

I changed some lines and make it work.

jQuery.fn.attr() is deprecated and not exists in jQuery 1.9.0. But the solution is simple, just change any

$obj.attr('...')

for

$obj.prop('...')

The second and last change is the way you create de DOM Elements.
In build function just change:

$("<div>", {
        id: 'lightboxOverlay'
      }).after($('<div/>', {
        id: 'lightbox'
      }).append($('<div/>', {
        "class": 'lb-outerContainer'
      }).append($('<div/>', {
        "class": 'lb-container'
      }).append($('<img/>', {
        "class": 'lb-image'
      }), $('<div/>', {
        "class": 'lb-nav'
      }).append($('<a/>', {
        "class": 'lb-prev'
      }), $('<a/>', {
        "class": 'lb-next'
      })), $('<div/>', {
        "class": 'lb-loader'
      }).append($('<a/>', {
        "class": 'lb-cancel'
      }).append($('<img/>', {
        src: this.options.fileLoadingImage
      }))))), $('<div/>', {
        "class": 'lb-dataContainer'
      }).append($('<div/>', {
        "class": 'lb-data'
      }).append($('<div/>', {
        "class": 'lb-details'
      }).append($('<span/>', {
        "class": 'lb-caption'
      }), $('<span/>', {
        "class": 'lb-number'
      })), $('<div/>', {
        "class": 'lb-closeContainer'
      }).append($('<a/>', {
        "class": 'lb-close'
      }).append($('<img/>', {
        src: this.options.fileCloseImage
      }))))))).appendTo($('body'));

for:

$("<div id='lightboxOverlay'></div><div id='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' ><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'><img src='" + this.options.fileLoadingImage + "'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'><img src='" + this.options.fileCloseImage + "'></a></div></div></div></div>").appendTo($('body'));

I forked your project but don't know coffeescript and don't want to mess up your project..
I Hope it help you someway..
Thanks

When I went to IE10, LightBox pages stopped working on my browser. I upgraded to LB 2.6, and recoded a few pages, but IE10 could not render the pages properly.

Just built a simple page for testing purposes
http://www.confectionarydesigns.com/TestLB.htm
but still get same results....

When I look at the files on my desktop using IE10, they render perfectly, but they do not when I retrieve them from my hosting server (goDaddy)

If someone could look at the code (it's not very sophisticated), I'd appreciate it.

Thanks,

vince g

I remember you used to have a lot of docs for config...

Hi. I've been twaeking your GREAT lightbox for a site I'm putting together for a photographer. Everything is working except that the arrows are missing on the iPad.

What am I doing wrong?

Kirk

Is there a way to display SWF files through Lightbox2? I've been searching everywhere but have yet to find an answer.

This isn't an issue but I was just going to ask have you ever tried making the images a sprite.

I want to use lightbox to open and play a video, anybody know how to do this?
Thanks
John

Hello, I would like to ask you how to add a snippet of html into the lightbox.
When user clicks a link, I would like the browser to open a lightbox frame with an image and text.

Could you help me, please?

Hi,
I've recently implemented lightbox 2.6 on my wife's website orsodesign.pl (section "Portfolio"). It works ok. on Firefox, Chrome and Opera, but not on IE 10 and on mobile browsers (I tested it on Samsung Galaxy Tab 2 and its standard browser).
IE not always see the next/previous buttons (or even links), and on mobile device the expended picture is like behind the background.
Do any of you had similar problems and help me?
Thx :)

hi, how do I add a slideshow effect to lightbox2
thanks

Hello.

Is there a way to display HTML content with Lightbox?

Thank you.

Thanks to several posts to my original IE10 problem, that issue is closed. But now the pages no longer render correctly in IE9.

Attached is a screen shot of the page that renders when I click an image on
http://www.confectionarydesigns.com/Testimonials.htm

I hope I don't need to add code to differentiate IE9 from IE10.... Any help is much appreciated......

.

vinceg

Hi,

Thanks for lightbox. I have made following changes to support minimum size for container. I have also changed container background to black and loading.gif.

function LightboxOptions() {
  this.minWidth = 640; // or 0 to disable
  this.minHeight = 480; // or 0 to disable

Lightbox.prototype.sizeContainer = function(image) {
  imageWidth = Math.max(this.options.minWidth,image.width);
  imageHeight = Math.max(this.options.minHeight,image.height);
  image.css("margin-top", (imageHeight-image.height) / 2 + "px");

The body tag in index.html gets opened [body] but never closes [/body]

I needed to hide the "Image x of y" label and make images loop around, i.e. pressing next on the last image goes to the first image, and pressing previous on the first image goes to the last image. So I made the code.

But I also found this: http://www.justinbarkhuff.com/lab/lightbox_slideshow/#configurations
Which is a mod of an older version of LightBox2 with more options. You might consider adding these options too.

I want to put a link in the description of my picture. I do this :

And the link is visible but not working (no redirection).

Is there any other possibilities ?

BTW, thanks a lot for your very good work !

I had a strange issue with chrome, when my mouse went from prev to next (see

)

The solution was to escape the background-image line 95 in the css (/* line 65, ../sass/lightbox.sass */) with the IE hack :
*background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");

Assuming I did understand the comment after this line it's only used by IE ?

The script directly uses $, so including it on a page where jQuery.noConflict() has been called makes bad things happen.

A (function($) { ... })(jQuery) wrapper would make it work on both "normal" and noConflict-ized pages.

With this.wrapAround = false; behaviour is exactly the same as it is currently, you can scroll to the end of the album then back to the beginning.

However by setting this.wrapAround = true; now when you reach the end of the album the "next" arrow does not disappear and clicking it will take you straight back to the first image in the album. Conversely when you are viewing the first image in the album the "previous" arrow remains visible and will jump you immediately to the end of the album when clicked.

diff --git "a/lightbox.js" "b/lightbox.js"
index 97cb2fe..391c448 100644
--- "a/lightbox.js"
+++ "b/lightbox.js"
@@ -54,6 +54,7 @@ lightbox = new Lightbox options
       this.fadeDuration = 500;
       this.labelImage = "Image";
       this.labelOf = "of";
+      this.wrapAround = false;
     }
 
     return LightboxOptions;
@@ -138,11 +139,21 @@ lightbox = new Lightbox options
         return false;
       });
       $lightbox.find('.lb-prev').on('click', function(e) {
-        _this.changeImage(_this.currentImageIndex - 1);
+        if (_this.currentImageIndex > 0) {
+          _this.changeImage(_this.currentImageIndex - 1);
+        }
+        else {
+          _this.changeImage(_this.album.length - 1);
+        }
         return false;
       });
       $lightbox.find('.lb-next').on('click', function(e) {
-        _this.changeImage(_this.currentImageIndex + 1);
+        if (_this.currentImageIndex < _this.album.length - 1) {
+          _this.changeImage(_this.currentImageIndex + 1);
+        }
+        else {
+          _this.changeImage(0);
+        }
         return false;
       });
       $lightbox.find('.lb-loader, .lb-close').on('click', function(e) {
@@ -264,8 +275,8 @@ lightbox = new Lightbox options
       var $lightbox;
       $lightbox = $('#lightbox');
       $lightbox.find('.lb-nav').show();
-      if (this.currentImageIndex > 0) $lightbox.find('.lb-prev').show();
-      if (this.currentImageIndex < this.album.length - 1) {
+      if (this.options.wrapAround || this.currentImageIndex > 0) $lightbox.find('.lb-prev').show();
+      if (this.options.wrapAround || this.currentImageIndex < this.album.length - 1) {
         $lightbox.find('.lb-next').show();
       }
     };

https://github.com/lokesh/lightbox2/blob/master/coffee/lightbox.coffee#L192

Hi,

I use a blob to creat my thumbnail (<img src=...). That works pretty good. Now I would like to build also my target picture from my blob. Unfortunatly "<a src=..." doesn't work (of course). That means:
In the original file, there are the following lines of code:

<div class="image-row"/>
<a class="example-image-link" href="img/demopage/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="img/demopage/thumb-1.jpg" alt="thumb-1" width="150" height="150"/></a>
</div>

and I would like to change them to these:

<div class="image-row"/>
<a class="example-image-link" src=my-blob-ascii-data data-lightbox="example-1"><img class="example-image" src=my-blob-ascii-data alt="thumb-1" width="150" height="150"/></a>
</div>

Does somebody has an idea?

Regards,
franz

suggest:you can use IE filter to come true ie opacity.
for example:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#80ffffff'); /* IE6,IE7 /
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#80ffffff')"; / IE8 */

Can we please have a semantic alternative for the rel attribute on the link?
I think simply adding a class will do, the rel attribute is to describe the link's relation to the current document.

I'm using lightbox 2.51 with jquery 1.7.2 in a ruby-on-rails app.
Testing in chromium 19.0.1084.46 (0) on archlinux.

When clicking on the 'next', 'prev' or 'close' links, after executing the click event in javascript, a blank tab opens. The browser, apparently, opens a new tab when clicking on a link without href="#" attribute.

Therefore, I was able to fix this, using this script:

# app/assets/fix-lightbox.js.coffee
jQuery ->
  selector = ".lb-next,.lb-prev,.lb-close"
  $( selector ).live( "mouseenter", ->
    $( selector ).attr( "href", "#" ) # otherwise click will open new tab                                                             
  )

Has anyone else experienced this issue?
Or maybe I'm doing something wrong?

As the subject says, the overlay in Internet Explorer 8 is not transparent.

I have tried some of the examples on http://lokeshdhakar.com/projects/lightbox2/ in IE8 in IE8 mode and on a native IE8 and the results are the same: - a solid coloured background.

In "lightbox.js" what is the point of the following code, it looks awful when random elements on the page disappear as the lightbox appears and visa versa.

Lightbox.prototype.start = function($link) {
  ...
  $('select, object, embed').css({
    visibility: "hidden"
  });
  ...
}

I don't know why or did deep debugging.
The displaying height/width proportion is wrong, compared to the original image.
See http://blog.flowl.info/2013/cooling-raspberrypi-heatsinks/

When using an imageset the left and right navigation arrows don't show in IE8/9/10 unless you move the mouse over the thin border around the lightbox first. You can see the behavior using the examples on your site. Pick an image from the imageset then quickly move the mouse into the lightbox. If you move it quick enough the navigation won't appear. If you move it slow enough over the border they will appear. If it appears and you move the mouse over to opposite side, that navigation won't appear and both are gone now and won't re-appear unless you hover over the lightbox border.

Firefox and Chrome work as expected.

I'd like to be able to display other content inside of a lightbox. It doesn't look like this is an option now. Am I wrong? I have content I'd like to display when clicked but it's not enough to justify an entire page. If this is not an option, can you recommend a free tool that does this?

Hi, I got a problem.

On my web site, when I load a tab I've already opened before (even when I didn't use Lightbox the first time I was on the tab), Lightbox loads. As soon as I'm on the tab, even if I haven't touched anything, it load in a strange way, and the only way to close it is to touch the arrows.

I've joined a screenshot of my problem. Thanks by advance !

Hello.
I recently updated from lightbox 2.51 to lightbox 2.6 and my problem left as is.

Here is a screenshot for demonstration:

My platform is ubuntu 12.04 / FF 22 (opera, chromium behave similarly).

As you can see on a screenshot, problem is a wrong container width calculation.

So, I still need to replace your code

preloader.onload = function() {
        var $preloader, imageHeight, imageWidth, maxImageHeight, maxImageWidth, windowHeight, windowWidth;
        $image.attr('src', _this.album[imageNumber].link);
        $preloader = $(preloader);
        $image.width(preloader.width);
        $image.height(preloader.height);
        if (_this.options.fitImagesInViewport) {
          windowWidth = $(window).width();
          windowHeight = $(window).height();
          maxImageWidth = windowWidth - _this.containerLeftPadding - _this.containerRightPadding - 20;
          maxImageHeight = windowHeight - _this.containerTopPadding - _this.containerBottomPadding - 110;
          if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
            if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
              imageWidth = maxImageWidth;
              imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
              $image.width(imageWidth);
              $image.height(imageHeight);
            } else {
              imageHeight = maxImageHeight;
              imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
              $image.width(imageWidth);
              $image.height(imageHeight);
            }
          }
        }
        return _this.sizeContainer($image.width(), $image.height());
      };

with mine

preloader.onload = function() {
        var $preloader, imageHeight, imageWidth, maxImageHeight, maxImageWidth, windowHeight, windowWidth;
        $image.attr('src', _this.album[imageNumber].link);
        //FE-INJECTION
        var sf1 = ($(window).height() - 200) / preloader.height;
        var sf2 = $(window).width() / preloader.width;
        var sf = (sf1 > sf2) ? sf2 : sf1;
        var nw = (sf >= 1) ? preloader.width : preloader.width * sf;
        var nh = (sf >= 1) ? preloader.height : preloader.height * sf;
        //
        return _this.sizeContainer(nw, nh);
      };

I know that i forgot about 'fitImagesInViewport' option here, but this is a reason for not pull-requesting this change - you better know what to do with it.

Is there anyway to invoke the set of lightbox pictures with a trigger of button?

http://lokeshdhakar.com/projects/lightbox2/

On that page, the area that you actually have to click to download the lightbox script perhaps isn't as clear as it could be. The image and "download" text look more like a header than an actual clickable element.

Not a big deal, of course, but I figured I'd mention it.

I used lightbox2 ot my web site and when is offline is work perfectly but when i upload on my host... stop work, i upload everything but .. fon is silver , but cannot load my photos. You can see on www.nesebur.eu

Any body now how to fix?

image becomes the center of the screen in iPad, then sizeOverlay looks like this

Lightbox.prototype.sizeOverlay = function() {
  if ( /iPhone|iPad/.test( navigator.platform ) )
           $('#lightbox').width($(document).width()).height($(document).height());
  return $('#lightboxOverlay').width($(document).width()).height($(document).height());
};

sorry for my english

If you use Twitter Bootstrap CSS Framework and add lightbox2 all pictures are displayed very height.
It's because of bootstrap.css has a rule for img with max-width:100%
I fixed it by a line of css code to lightbox.css
add a "max-width: none;" to the rule .lightbox .lb-image to set the max-width value back to default for lightbox

hi,
How do you get a tag index.

this.index(this) ?

Hi Guys,

Actually, I like to use LIghtbox2 on my web-site, however, after following all instructions and adding the code - it works perfectly well with Firefox 22 and Chrome, and all is wrong with IE 8. I have Win XP PRO. Please help http://www.kima.ca/CCTV.html.

Thanks