• 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...

Jaxel

Well-known member
#2
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.
 

Jaxel

Well-known member
#6
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)
avatarSrc = $avatar.find('span.img...(/^url\(("|'|)([^\1]+)\1\)$/i, '$2');
lightb...cd86e19 (line 193)
 

Jaxel

Well-known member
#7
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.
 

Jaxel

Well-known member
#9
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.
 

Kier

XenForo Developer
Staff member
#10
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?
 
R

ragtek

Guest
#11
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]
 

Jaxel

Well-known member
#12
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.
 

Kier

XenForo Developer
Staff member
#13
[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.
 
R

ragtek

Guest
#15
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;)
 

Kier

XenForo Developer
Staff member
#16
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>
 

Jaxel

Well-known member
#17
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.
 

Onimua

Well-known member
#20
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.