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

James

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

ragtek

Guest
#5
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

Well-known member
#6
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 :(
 
R

ragtek

Guest
#7
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??
 

dmnkhhn

Active member
#8
Has a solution been found?

I have this in my template:

<xen:if is="{$car.attachments}">
<xen:include template="attached_files">
<xen:map from="$car" to="$post" /></xen:include>
</xen:if>
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:
Uncaught TypeError: Cannot call method 'replace' of undefined
Something tells me I need a wrapper element because the lightbox can't find the image.

Edit:
I created a wrapper with
data-author="{$car.username}"
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: