Changes to make lightbox2 work with jQuery 1.9.0

[fernandosavio]

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

[iMattPro]

@fernandosavio $obj.attr('...') is not deprecated in jQuery 1.9

This script is using it correctly, to get the actual values of attributes. What is deprecated is using attr() to get property values (of form elements, for example) in which case prop() and val() are required now.

But to get element titles, ids, href and rel attributes, as this MOD does, $obj.attr('...') is still the correct way to do it.

Reference: https://github.com/jquery/jquery-migrate/blob/master/warnings.md#jqmigrate-property-based-jqueryfnattrvalue-is-deprecated

http://api.jquery.com/attr/

[fernandosavio]

@VSEphpbb You're right, 'tagName' is the only propertie that the script access.. the others are attributes..

Sorry..

[kamicoder]

So we just need to change "the way you create de DOM Elements" ?

[fernandosavio]

@haiecapique Yes, I did it, and it works on 1.9.0...

[kamicoder]

Thanks, it's work. But I don't know coffeescript too...

[dmethvin]

The specific problem with the original code is the use of .after() on disconnected elements:

http://jquery.com/upgrade-guide/1.9/#after-before-and-replacewith-with-disconnected-nodes

Using an HTML string is definitely a cleaner way to create that much markup.

[careilly]

I've done a fork (https://github.com/careilly/lightbox2) that incorporates those changes.

Pull request sent.

[dorthrithil]

thanks bro! works fine now.

[careilly]

Great!

Colman

On 21 Feb 2013, at 05:16, dorthrithil notifications@github.com wrote:

thanks bro! works fine now.

— Reply to this email directly or view it on GitHub.

[lemingos]

Thanks a lot!

[StevenEWright]

+1

[Abijeet]

Thank you! This helped. For folks still confused just copy "the way you create the DOM Elements" part!

[dominicbartl]

It to me a day to figure this out :/ Thanks

[Nymoda]

All i made to make it work is... On line 44, deleted '$, ' so the line look like :

var Lightbox, LightboxOptions;

Cleared line 46 :

$ = jQuery;

Line 344, changed to:

$(document).ready(function(){

And apply the part two of the main post as fernandosavio greatfully shared with us! and it worked for me!

Thanks!

[anais1477]

Thank you very much ! Finally I had to change the DOM as fernandosavio adviced. Then i did what Nymoda said. And it works fine with jQuery 1.9- now =)

[eflorit]

Only the second part of fernandosavio's post is needed to make it work. Thank you.

[ryabenko-pro]

Thank you! My brain is saved.

[gongiskhan]

Hey, just wanna say thanks. Had a deadline tomorrow and your post will allow me to actually deliver on time!

[lokesh]

I made some edits and merged a few PRs. The script should now work with with the latest versions of jQuery.

I tested the latest lightbox.js code with jQuery 1.10.1 and 2.0.2 successfully. Grab the latest from this github repo. I will be updating the demo page download links tomorrow.

Please reopen this issue if the problem persists. Thanks!

[joe44850]

THANK YOU. Worked like a charm.