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

Can't get LightBox working with Attachments...

Discussion in 'XenForo Development Discussions' started by Jaxel, Mar 27, 2011.

  1. Jaxel

    Jaxel Well-Known Member

    So I finally got my attachment handler working... but now I'm having issues with the lightbox.

    You can see the attachments here: http://www.8wayrun.com/wiki/abyss/

    When you click on the attachment, instead of opening up the lightbox, it results in errors on the console:

    1.png
     
  2. Jaxel

    Jaxel Well-Known Member

    Anyone able to help me with this? I can't release the next version of XenCarta without out it...

    Note that I have not added ANYTHING to my pages to try to get lightboxes working. All I'm doing is parsing bbcode. Its the bbcode [ATTACH] which is calling for the lightbox. I need to know what I have to add to my page container in order to get lightboxes working outside of the thread areas.
     
  3. Nasr

    Nasr Well-Known Member

    You've probably looked into this, but have you checked if you're calling the js files for it?
     
  4. Jaxel

    Jaxel Well-Known Member

    I've tried calling in the JS, it hasn't made a difference.
     
  5. Kier

    Kier XenForo Developer Staff Member

    Do you know how to run the Firebug JS debugger to find out what's going wrong?
     
  6. Jaxel

    Jaxel Well-Known Member

    Yeah... but there are a TON of errors when I click a thumbnail and I have no idea where to start.

    Code:
    $avatar.find(
    http://www.8wayrun.com/js/xenforo/lightbox.js?_v=3cd86e19
    Line 193
     
  7. Jaxel

    Jaxel Well-Known Member

    I know this is something simple... like all I have to do is include something... I just dont know what it is... I've been trying to figure this out since yesterday and its pissing me off. Normally I figure this stuff out by looking at the existing code; but I'm finding no references to the lightbox in any of the default skins, or the coding... And JS confuses me to all hell, so I can't figure any of that stuff out.
     
  8. Jaxel

    Jaxel Well-Known Member

    This is what Firebug is telling me right now... and I am still completely lost.

    1.png
     
  9. Jaxel

    Jaxel Well-Known Member

    Come on Kier... You got something for me, dont you!

    All my coding is right as far as I can see... I just need to add something to get LightBoxes to work.
     
  10. Kier

    Kier XenForo Developer Staff Member

    That's not actually the debugger I was talking about, but my guess is that your content is not contained within an element that has a data-author attribute?
     
  11. ragtek

    ragtek Guest

    [offtopic]
    Sorry for offtopic but i have to ask again, because i get in http://xenforo.com/community/threads/lightbox-for-own-pages.12391/ no answer:p

    Why do we need an data-author and the avatar for the lightbox?
    This is limiting the usage of the xf framework extreme.
    Users will not be able to use the lightbox on own pages, if they don't include the avatar...
    I had to write my own lightbox script for my shop, because the shopitems doesn't have an public author (and that's why there's no avatar...)
    [/offtopic]
     
  12. Jaxel

    Jaxel Well-Known Member

    No, its not... how do I add a data-author attribute? I tried simply adding 'data-author="Jaxel"' to the container DIV, but it didn't make a difference, I still get the same errors.
     
  13. Kier

    Kier XenForo Developer Staff Member

    I'll look into doing a no-avatar option for the Lightbox for 1.1.
     
    CurveGotti and ragtek like this.
  14. ragtek

    ragtek Guest

    great news:)
    thx
     
  15. ragtek

    ragtek Guest

    The debugtext said it already=>$avatar.find(...

    You need also a author avatar on the page;)
     
  16. Kier

    Kier XenForo Developer Staff Member

    If you look in the xenforo.js and lightbox.js source, you'll see that it looks for the following elements:
    Code:
    var containerSelector = '*[data-author]';
    
    ...
    
    $('#LbUsername').text($container.data('author'));
    
    $('#LbDateTime').text($container.find('.DateTime:first').text());
    
    $('#LbNewWindow').attr('href', imageSource);
    
    ...
    
    var $avatar = $container.find('a.avatar'),
    	$avatarImg = $avatar.find('img'),
    Therefore, your items to be 'lightboxed' should be contained within something that looks rather like this:
    HTML:
    <div data-author="John Doe">
    	<a class="avatar" href="..."><img src="john_doe_avatar.png" /></a>
    	<!-- lightbox items -->
    	<span class="DateTime">{Date of creation}</span>
    </div>
     
  17. Jaxel

    Jaxel Well-Known Member

    Okay, this is essentially what I have:
    Code:
    <div class="sectionMain wikiPage" id="wikiPage" data-author="{$xenOptions.boardTitle}">
    <div class="primaryContent">
    {xen:raw $page.HTML}
    
    <div style="display: none;">
    <a href="{xen:link wiki}" class="avatar"><span class="img" style="background-image: url('@imagePath/xenforo/logo.og.png')"></span></a>
    <xen:datetime time="{$page.page_date}" />
    </div>
    </div>
    
    <xen:if is="{$page.attachments}">
    <xen:include template="attached_files">
    <xen:map from="$page" to="$post" />
    </xen:include>
    </xen:if>
    </div>
    Works well... thank's Kier.
     
    Kier likes this.
  18. ragtek

    ragtek Guest

    This would be great. I hope it will be implemented:) (this should be a small reminder and no unnecessary bump^^)
     
  19. dmnkhhn

    dmnkhhn Active Member

    Hello Kier,

    Has this been implemented in XenForo 1.1.0 beta 5? I could get the lightbox to work but for some reason I still had to include the avatar.


    Thanks,
    Dominik
     
    ragtek likes this.
  20. Onimua

    Onimua Well-Known Member

    I had actually gone through this recently as well but forgot to bring it up. It looks like the JS for it hasn't been updated to do it without the avatar yet.
     

Share This Page