Can't get LightBox working with Attachments...

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.webp
 
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.
 
You've probably looked into this, but have you checked if you're calling the js files for it?
 
Do you know how to run the Firebug JS debugger to find out what's going wrong?
 
Do you know how to run the Firebug JS debugger to find out what's going wrong?
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
$avatar.find(


setAvatar($container=[])lightb...cd86e19 (line 193)
setImage($image=[img.bbCodeImage data/att...a3ec.jpg], $container=[])lightb...cd86e19 (line 136)
onBeforeLoad(e=Object { type="onBeforeLoad", timeStamp=1301249095913, more...})xenfor...cd86e19 (line 3294)
handle(a=Object { type="onBeforeLoad", timeStamp=1301249095913, more...})jquery....min.js (line 63)
add()jquery....min.js (line 57)
trigger(a=Object { type="onBeforeLoad", timeStamp=1301249095913, more...}, b=[Object { type="onBeforeLoad", timeStamp=1301249095913, more...}], d=Object {}, e=function())jquery....min.js (line 61)
delegate()jquery....min.js (line 74)
nodeName(j=[a.LbTrigger attachme...pg.3410/, Object {}], s=function(), v=Object {})jquery....min.js (line 33)
toArray(j=function(), s=undefined)jquery....min.js (line 26)
delegate(a=Object { type="onBeforeLoad", timeStamp=1301249095913, more...}, b=undefined)jquery....min.js (line 74)
load(e=Object { type="onBeforeLoad", timeStamp=1301249095913, more...})jquery...cd86e19 (line 46)
show()xenfor...cd86e19 (line 3424)
createOverlay($overlay=Object { templateHtml="\n\n\n<div class="formOver...->\n\n</div>\n\n\n\n\n\n\n\n\n\n\n\n\n", css={...}, js=})xenfor...cd86e19 (line 3409)
(?)()xenfor...cd86e19 (line 86)
callSuccess()xenfor...cd86e19 (line 1955)
successCount(e=undefined)xenfor...cd86e19 (line 1996)
(?)()xenfor...cd86e19 (line 86)
loadCss(css=["lightbox"], urlTemplate="css.php?css=__sentinel__&style=3&d=1301248708", success=function(), failure=function())xenfor...cd86e19 (line 1876)
__construct(data=Object { templateHtml="\n\n\n<div class="formOver...->\n\n</div>\n\n\n\n\n\n\n\n\n\n\n\n\n", css={...}, js=}, success=function(), failure=undefined)xenfor...cd86e19 (line 1944)
ExtLoader(data=Object { templateHtml="\n\n\n<div class="formOver...->\n\n</div>\n\n\n\n\n\n\n\n\n\n\n\n\n", css={...}, js=}, success=function(), failure=undefined)xenfor...cd86e19 (line 1893)
loadSuccess(ajaxData=Object { templateHtml="\n\n\n<div class="formOver...->\n\n</div>\n\n\n\n\n\n\n\n\n\n\n\n\n", css={...}, js=}, textStatus="success")xenfor...cd86e19 (line 3385)
(?)()xenfor...cd86e19 (line 86)
handleError(a=Object { url="misc/lightbox?&_xfReque...=1&_xfResponseType=json", global=true, more...}, b=XMLHttpRequest { onreadystatechange=[xpconnect wrapped nsIDOMEventListener], readyState=4, more...}, d="success", e=Object { templateHtml="\n\n\n<div class="formOver...->\n\n</div>\n\n\n\n\n\n\n\n\n\n\n\n\n", css={...}, js=})jquery....min.js (line 142)
onreadystatechange(m=readystatechange )jquery....min.js (line 141)
blank.gif
avatarSrc = $avatar.find('span.img...(/^url\(("|'|)([^\1]+)\1\)$/i, '$2');
lightb...cd86e19 (line 193)
 
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.
 
Do you know how to run the Firebug JS debugger to find out what's going wrong?
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.
 
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?
 
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?
[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]
 
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?
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.
 
[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]
I'll look into doing a no-avatar option for the Lightbox for 1.1.
 
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.
The debugtext said it already=>$avatar.find(...

You need also a author avatar on the page;)
 
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.
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>
 
If you look in the xenforo.js and lightbox.js source, you'll see that it looks for the following elements:
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.
 
I'll look into doing a no-avatar option for the Lightbox for 1.1.
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
 
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
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.
 
Top Bottom