calorie
Active member
Here is how to manually apply the XF Lightbox to thumbnails on the forum homepage. See the screenshot. If you click a thumbnail, the XF Lightbox opens like it does for attachments. If someone works out how to use the forum_list_nodes template hook, this could conceivably be done via said hook instead of manually. But for now, here you go...
First make a directory titled misc-imgs here: /styles/default/xenforo/misc-imgs
Then upload the following images into the newly created misc-imgs directory.
Replace X with a number 1 through 12 (twelve small and twleve large JPG images):
And beforehand add this:
The misc-imgs directory referenced herein is only a suggestion. On one hand you could have different thumbnails per style, but OTOH if you have many styles, you probably only want the same set of thumbnails across styles, so you could edit the addition to the XF forum_list template to change the path. While you are there, you can add or remove HTML depending on whether you want more or less thumbnails to appear.
The three CSS declarations are needed for the layout you see in the screenshot. This CSS was tested in FF3.5 and IE8. Some of the class attributes in the HTML are necessary for the XF Lightbox pop-up to display, such as user information, so for the user 'Admin' is listed with a userID of 1 but you can edit the HTML if you want to change it. Other class attributes in the HTML are not necessary, but no biggie with it as-is.
Gasp, a table is used for the thumbnails. It had been a list, but I didn't find the right combination of CSS to get the container to stay on its side of the page, should someone increase the font in the browser. Personally I didn't like that the list container would, given a larger font, extend into the sidebar, and so I went with a table, for which I got the CSS to keep the container on its side of the page, well, at least in FF3.5 and IE8 that is.
Hmm, that's all I can think of now to say about it... enjoy.
First make a directory titled misc-imgs here: /styles/default/xenforo/misc-imgs
Then upload the following images into the newly created misc-imgs directory.
Replace X with a number 1 through 12 (twelve small and twleve large JPG images):
- Xsmall.jpg (they are 48x48 pixels in the screenshot)
- Xlarge.jpg (whatever size you want for large images)
Code:
<xen:hook name="forum_list_nodes">
<xen:if is="{$renderedNodes}"><xen:include template="node_list" /></xen:if>
</xen:hook>
And beforehand add this:
Code:
<style type="text/css">
.Format-Images-Table
{
-moz-background-clip: border;
-moz-background-inline-policy: continuous;
-moz-background-origin: padding;
margin-bottom: 10px !important;
background: {xen:property primaryLightest} url({xen:property imagePath}/xenforo/gradients/category-23px-light.png) repeat-x scroll center top;
border-bottom: 2px dotted {xen:property primaryLighterStill};
width: 100%;
}
.Format-Images-Td
{
border: none !important;
padding: 5px 0 0 0 !important;
text-align: center;
}
.LbImage
{
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
background-color: {xen:property contentBackground};
border: 1px solid {xen:property primaryLighter};
padding: 2px;
}
</style>
<ol id="messageList" class="messageList">
<li id="post-9876543210" class="message staff" data-author="Admin">
<div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person" style="display: none">
<div class="messageUserBlock">
<div class="avatarHolder">
<a href="members/.1/" class="avatar Av1m" itemprop="photo" data-avatarHtml="true"><span class="img m" style="background-image: url('data/avatars/m/0/1.jpg?9876543210')"></span></a>
</div>
<h3 class="userText">
<a href="members/.1/" class="username" itemprop="name" rich="true">Admin</a>
<em class="userTitle" itemprop="title">Administrator</em>
</h3>
<span class="arrow"><span></span></span>
</div>
</div>
<div class="messageInfo">
<div class="messageContent">
<article>
<blockquote class="messageText ugc baseHtml">
<table class="Format-Images-Table" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/1large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/1large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/1small.jpg"></a></td>
<td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/2large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/2large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/2small.jpg"></a></td>
<td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/3large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/3large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/3small.jpg"></a></td>
<td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/4large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/4large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/4small.jpg"></a></td>
<td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/5large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/5large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/5small.jpg"></a></td>
<td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/6large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/6large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/6small.jpg"></a></td>
<td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/7large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/7large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/7small.jpg"></a></td>
<td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/8large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/8large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/8small.jpg"></a></td>
<td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/9large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/9large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/9small.jpg"></a></td>
<td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/10large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/10large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/10small.jpg"></a></td>
<td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/11large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/11large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/11small.jpg"></a></td>
<td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/12large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/12large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/12small.jpg"></a></td>
</tr>
</table>
</blockquote>
</article>
</div>
</div>
</li>
</ol>
The misc-imgs directory referenced herein is only a suggestion. On one hand you could have different thumbnails per style, but OTOH if you have many styles, you probably only want the same set of thumbnails across styles, so you could edit the addition to the XF forum_list template to change the path. While you are there, you can add or remove HTML depending on whether you want more or less thumbnails to appear.
The three CSS declarations are needed for the layout you see in the screenshot. This CSS was tested in FF3.5 and IE8. Some of the class attributes in the HTML are necessary for the XF Lightbox pop-up to display, such as user information, so for the user 'Admin' is listed with a userID of 1 but you can edit the HTML if you want to change it. Other class attributes in the HTML are not necessary, but no biggie with it as-is.
Gasp, a table is used for the thumbnails. It had been a list, but I didn't find the right combination of CSS to get the container to stay on its side of the page, should someone increase the font in the browser. Personally I didn't like that the list container would, given a larger font, extend into the sidebar, and so I went with a table, for which I got the CSS to keep the container on its side of the page, well, at least in FF3.5 and IE8 that is.
Hmm, that's all I can think of now to say about it... enjoy.