1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

What code is needed to call the Lightbox?

Discussion in 'XenForo Development Discussions' started by James, Jul 28, 2011.

  1. James

    James Well-Known Member

    I'm using this code:
    Code:
    <div class="section" data-author="&nsbp;">
    <div class="secondaryContent">
    <h3>Random Images</h3>
    [COLOR=#000000][SIZE=12px][FONT=Consolas]<a href="attachments/igfgmage-jpg.9/" target="_blank" class="LbTrigger" data-href="misc/lightbox" style="display:block; text-align: center;"> <img src="attachment.jpg" alt="Igfgmage.jpg" class="bbCodeImage LbImage" data-src="attachments/igfgmage-jpg.9/?embedded=1"> </a>[/FONT][/SIZE][/COLOR]
    </div>
    </div>
    
    This doesn't want to load the lightbox though. Upon checking the JS console I get this:
    Code:
    Opening LightBox for [
    <div class="section" data-author="&?nsbp;">…</div>]
    Num images: 3
    setImage to attachments/idfdfmage-jpg.8/?embedded=1 from [<img id="LbImage" alt>]
    Uncaught TypeError: Cannot call method 'replace' of undefined
    XenForo.LightBox.setAvatar - /upload/:193
    XenForo.LightBox.setImage - /upload/:136
    XenForo.LightBoxTrigger.XenForo.OverlayTrigger.onBeforeLoad - xenforo.js:3318
    c.event.handle - jquery-1.4.4.min.js:63
    c.event.add.h.handle.o - jquery-1.4.4.min.js:56
    c.event.trigger - jquery-1.4.4.min.js:61
    c.fn.extend.trigger - jquery-1.4.4.min.js:74
    c.b.extend.each - jquery-1.4.4.min.js:33
    c.b.fn.b.each - jquery-1.4.4.min.js:26
    c.fn.extend.trigger - jquery-1.4.4.min.js:74
    a.extend.load - jquery.xenforo.rollup.js:46
    XenForo.OverlayLoader.show - xenforo.js:3455
    XenForo.OverlayLoader.createOverlay - xenforo.js:3440
    jQuery.extend.context - xenforo.js:87
    XenForo.ExtLoader.callSuccess - xenforo.js:1979
    XenForo.ExtLoader.successCount - xenforo.js:2020
    jQuery.extend.context - xenforo.js:87
    $.extend.scriptLoader.loadCss.$.ajax.success - xenforo.js:1894
    c.extend.handleSuccess - jquery-1.4.4.min.js:142
    c.extend.ajax.L.w.onreadystatechange - jquery-1.4.4.min.js:141
    
     
    iTuN3r likes this.
  2. iTuN3r

    iTuN3r Well-Known Member

    *bump* Anyone ?
     
  3. Jaxel

    Jaxel Well-Known Member

    You need a valid data-author I believe...
     
  4. James

    James Well-Known Member

    Putting in a valid data-author doesn't work. I've looked at the LightBoxTrigger function and I can't work out what's needed other than data-author.
     
  5. ragtek

    ragtek Guest

    Do you show also a avatar?
    ATM you need to have a valid xf avatar also in the container (see http://xenforo.com/community/threads/lightbox-for-own-pages.12391/ and http://xenforo.com/community/threads/cant-get-lightbox-working-with-attachments.14256/ )

    i had the same problem ( Uncaught TypeError: Cannot call method 'replace' of undefined ) and that was because the xf lightbox tried to find a avatar in the container

    that's because of
    avatarSrc = $avatar.find('span.img').css('background-image').replace(/^url\(("|'|)
    in
    Code:
    
    /**
    * Sets the avatar of the lightbox to the poster of the shown image
    *
    * @param jQuery $container
    *
    * @returns {XenForo.LightBox}
    */
    setAvatar: function($container)
    {
    var $avatar = $container.find('a.avatar'),
    $avatarImg = $avatar.find('img'),
    avatarSrc;
    
    if ($avatarImg.length)
    {
    avatarSrc = $avatarImg.attr('src');
    }
    else
    {
    avatarSrc = $avatar.find('span.img').css('background-image').replace(/^url\(("|'|)([^\1]+)\1\)$/i, '$2');
    }
    
    $('#LbAvatar img').attr('src', avatarSrc);
    
    return this;
    },
    
     
    James likes this.
  6. James

    James Well-Known Member

    OK my code now contains:
    Code:
    <div class="section" data-author="{$xenOptions.boardTitle}">
    <div class="secondaryContent">
    <h3>Random Images</h3>
    <a class="avatar" href="{$logoLink}"></a>
    {xen:raw $filebits}
    <span class="DateTime" style="display: none;">lol</span>
    </div>
    </div>
    
    It has a data-author, a hyperlink with an avatar class and a datetime class and yet it's still not working :(
     
  7. ragtek

    ragtek Guest

    once again:
    check what the js code is doing (trying to do)

    avatarSrc = $avatar.find('span.img').css('background-image').replace(/^url\(("|'|)([^\1]+)\1\)$/i, '$2');

    example how it should look like:
    Code:
    <a href="members/james.908/" class="avatar Av908m" data-avatarhtml="true"><span class="img m" style="background-image: url('data/avatars/m/0/908.jpg?1280965423')"></span></a>
    where's your span with class img??
     
  8. dmnkhhn

    dmnkhhn Active Member

    Has a solution been found?

    I have this in my template:

    It is using the original template and the small thumbnail shows up correctly but I can't get the lightbox working.
    The error I keep getting (in the console) when I click the thumbnail is:
    Something tells me I need a wrapper element because the lightbox can't find the image.

    Edit:
    I created a wrapper with
    hoping that it would help but it still doesn't work.


    Edit:
    Problem solved. XenForo 1.1.0 beta 5 still needs an avatar. :cautious:
     

Share This Page