Lightbox 2.51 tweaks

**Mystic6** · 12-17-2012, 08:28 PM

Hi John,

I don't mean to hijack her thread, but I found it because I was searching for a solution to a similar issue. I am not a coder per se, but I dabble.

I am using lightbox 2.51, slightly tweaked from solutions found on various sites. I have it now where I can include a link in a caption, and have it open that link in a new window. This is how I want it, but I have two issues.

1)The entire title appears on hover. I'd like to just have the text before the link. Is that possible? If not, can I hide the entire thing on hover?

2)Where can I adjust the opacity of the background? Most of what I have found in searches is for old versions of lightbox.

My test site: http://mmyerkes.com/Test_Vegas03.html The photo on the top left is what I am testing with.

Thanks,
Mark

**jscheuer1** · 12-17-2012, 09:01 PM

About in the middle of the script where it has:

Code:

    Lightbox.prototype.start = function($link) {
      var $lightbox, $window, a, i, imageNumber, left, top, _len, _ref;
      $(window).on("resize", this.sizeOverlay);
      $('select, object, embed').css({
        visibility: "hidden"
      });
      $('#lightboxOverlay').width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration);
      this.album = [];
      imageNumber = 0;
      if ($link.attr('rel') === 'lightbox') {
        this.album.push({
          link: $link.attr('href'),
          title: $link.attr('title')
        });
      } else {
        _ref = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
        for (i = 0, _len = _ref.length; i < _len; i++) {
          a = _ref[i];
          this.album.push({
            link: $(a).attr('href'),
            title: $(a).attr('title')
          });
          if ($(a).attr('href') === $link.

Change both of those highlighted lines to use the rev attribute:

Code:

    Lightbox.prototype.start = function($link) {
      var $lightbox, $window, a, i, imageNumber, left, top, _len, _ref;
      $(window).on("resize", this.sizeOverlay);
      $('select, object, embed').css({
        visibility: "hidden"
      });
      $('#lightboxOverlay').width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration);
      this.album = [];
      imageNumber = 0;
      if ($link.attr('rel') === 'lightbox') {
        this.album.push({
          link: $link.attr('href'),
          title: $link.attr('rev')
        });
      } else {
        _ref = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
        for (i = 0, _len = _ref.length; i < _len; i++) {
          a = _ref[i];
          this.album.push({
            link: $(a).attr('href'),
            title: $(a).attr('rev')
          });
          if ($(a).attr('href') === $link.

Then, in your markup change title to rev so that:

Code:

<a href="Vegas03_P6020003m.JPG" rel="lightbox[Vegas03]" title="Mom happy to be back in Vegas! &lt;br&gt &lt;a target=”_blank” href='http://mmyerkes.com/Vegas03_P6020003.JPG'&gt;Full Size&lt;/a&gt;">

Becomes:

Code:

<a href="Vegas03_P6020003m.JPG" rel="lightbox[Vegas03]" rev="Mom happy to be back in Vegas! &lt;br&gt &lt;a target=”_blank” href='http://mmyerkes.com/Vegas03_P6020003.JPG'&gt;Full Size&lt;/a&gt;">

If you still want a title on hover, you can add one back to the link. It can be whatever you like. It will not be used by lightbox. Like for the above it could be:

Code:

 title="Mom happy to be back in Vegas!"

So then you would have:

Code:

<a href="Vegas03_P6020003m.JPG" rel="lightbox[Vegas03]" title="Mom happy to be back in Vegas!" rev="Mom happy to be back in Vegas! &lt;br&gt &lt;a target=”_blank” href='http://mmyerkes.com/Vegas03_P6020003.JPG'&gt;Full Size&lt;/a&gt;">

**Mystic6** · 12-18-2012, 07:35 PM

Thanks, John! That worked perfectly! And thanks for moving this into the appropriate place and starting it as a thread! Now I just need to figure out the opacity. I thought I had that but no changes worked.

**jscheuer1** · 12-18-2012, 10:22 PM

Well, the test page is no longer available.

And oddly I'm getting a malware warning for the site in Chrome.

Anyways, the opacity of the overlay I believe is set in style in lightbox.css:

Code:

/* line 6, ../sass/lightbox.sass */
#lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
  opacity: 0.85;
  display: none;
}

/* line 15, ../sass/lightbox.sass */
#lightbox {
  position: absolute;
  left: 0;
  width: 10 . . .

Yes, that's where it is. I recall now from working on it before. However, that means that in IE 8 and less, it has no effect.

Is that's what's bothering you?

If so there are a couple of ways to approach it. I think you can add an alpha opacity filter right there in the css, other browser should ignore it:

Code:

/* line 6, ../sass/lightbox.sass */
#lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
  opacity: 0.85;
  filter:alpha(opacity=85);
  display: none;
}

/* line 15, ../sass/lightbox.sass */
#lightbox {
  position: absolute;
  left: 0;
  width: 10 . . .

**Mystic6** · 12-19-2012, 02:40 PM

That explains it. I had tried adjusting that number with no results. I've only been testing in IE8. The alpha opacity filter didn't work for IE8, but I'm not really worried about it. The opacity does work in Safari and Firefox.

After I put your suggestions in and got it working I took the test page down. The real one is http://mmyerkes.com/Vegas03.html.

Sorry about the malware warning. My site got hacked in November. After I cleaned it up I decided to update it which led me to add the lightbox. I got a warning in Firefox too. So I've submitted the site to be reviewed. I didn't realize there were warnings, my family (the only ones who ever visit the site) is using IE and Safari.

Thanks again for all your help!

**jscheuer1** · 12-19-2012, 06:00 PM

Yes, get a review. I had a problem with one of my sites. Not malware, more a case of mistaken identity. But the result was the same. One of the browsers was flagging it as malware/fraud. I asked for and got a review from the rating agency involved, and the flag was removed. It took about 2 weeks from the time I first contacted them. About 1 week to hear back from them that they received my request, about 1 week for the review and status change. The review and change were a little faster, I'm counting to when they notified me that the change had been made. I only really needed to send the one message though, the request for the review. But I also responded with a thank you when it was removed. So, although the length of time was 2 weeks. The work on my part was minimal. Try to be polite in your communications with them, can't hurt. If you want more advice/help on that, let me know.

And oh yeah, that's right. The overlay opacity in IE 8 and less requires changing the script. Where it has:

Code:

$('#lightboxOverlay').width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration);

and later where it has:

Code:

$('#lightboxOverlay').fadeIn(this.options.fadeDuration);

Both of those fadeIn(this.options.fadeDuration) commands need to be:

Code:

fadeTo(this.options.fadeDuration, this.options.overlayOpacity)

And then you need to add the overlayOpacity option near the top:

Code:

  LightboxOptions = (function() {

    function LightboxOptions() {
      this.fileLoadingImage = 'images/loading.gif';
      this.fileCloseImage = 'images/close.png';
      this.resizeDuration = 700;
      this.fadeDuration = 500;
      this.overlayOpacity = 0.85;
      this.labelImage = "Image";
      this.labelOf = "of";
    }

    return LightboxOptions;

  })();

I think that's all you need for that. It was part of a much more extensive rewrite I did for someone elae. Not even a rewrite actually, rather I changed the lightbox.js file slightly so that its functions and properties could be altered by code from outside of it. But those are the essential changes for that one thing, the overlay opacity.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If there's a problem, let me see a demo of it.

**Mystic6** · 12-20-2012, 02:06 AM

That worked perfectly! Thanks! If you want to flag this as resolved, that's fine.

And thanks for the advice on the review thing. In my case, it was malware js code that was inserted into every html page I had on the site. My report was with StopBadware.org. I got an immediate email from them stating they received my request. The website said it could take a couple weeks. I may also have to do the Google one, but since my pages are simple family photo stuff I've never done anything that would show in a search. But the Firefox warning talked about the Google thing.