MyBB Hacks

MyBB Hacks > MyBB Plugins > XThreads > Xthreads Images and Shadowbox/Lightbox
Full Version: Xthreads Images and Shadowbox/Lightbox
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2

leefish

01-28-2011, 09:45 AM
I have a lot of images on my site and I got a request from a user to make it that when we click on a picture inline in a thread then we will also see a full size picture in the lightbox. (I just changed over to shadowbox, but it looks the same - they both use rel="lightbox" to fire the gallery).

Now, I have this working no problem in showthread in the gallery - see my template.

HTML Code 
<html>
<head>
<title>{$thread['subject']}</title>
{$headerinclude}

<script type="text/javascript">
<!--
	var quickdelete_confirm = "{$lang->quickdelete_confirm}";
// -->
</script>
<script type="text/javascript" src="jscripts/thread.js?ver=1600"></script>
</head>
<body>
{$header}
{$pollbox}
<div class="float_right">
	{$newreply}
</div>
{$ratethread}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" width="100%" style="clear: both; border-bottom-width: 0;">
	<tr>
		<td width="60%" valign="top">
			<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both; border-bottom-width: 0;">
				<tr>
					<td class="thead" colspan="2">
						<div style="float: right;">

						</div>
						<div>
							<strong>{$thread['subject']}</strong>
						</div>
					</td>
				</tr>
			</table>
			<div id="posts">
				{$first_post}
			</div>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
				<tr>
					<td class="thead">
						<div><strong>{$GLOBALS['threadfields']['pfname']} Pictures</strong></div>
					</td>
				</tr>
				<tr>
					<td class="trow1" align="center">
                        <div>
<a href="{$GLOBALS['threadfields']['pfpic']['url']}" rel="lightbox[find]"><img src="{$GLOBALS['threadfields']['pfpic']['url']}/thumb160x120" alt="{$thread['subject']} Screenshot" title="{$GLOBALS['threadfields']['pfpicdesc']}" style="border: 1px solid #C1C1C1; padding: 3px; margin: 3px;" /></a>
                        {$GLOBALS['threadfields']['pfapic1']['value']}
			{$GLOBALS['threadfields']['pfapic2']['value']}
			{$GLOBALS['threadfields']['pfapic3']['value']}
			{$GLOBALS['threadfields']['pfapic4']['value']}
			{$GLOBALS['threadfields']['pfapic5']['value']}
			{$GLOBALS['threadfields']['pfapic6']['value']}</div>
					</td>

				</tr>

			</table>
			<div align="center">
				<strong>&laquo; <a href="{$next_oldest_link}">{$lang->next_oldest}</a> | <a href="{$next_newest_link}">{$lang->next_newest}</a> &raquo;</strong>
			</div>
		</td>
<td></td>
		<td width="40%" valign="top">
			<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-bottom-width: 0;">
				<tr>
					<td class="thead">
						<div><strong>Comments</strong></div>
					</td>
				</tr>
			</table>
			<div>
				{$posts}
			</div>
{$quickreply}
			<div class="float_right">
				{$multipage}
			</div>
		</td>
	</tr>
</table>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both;">
	<tr>
		<td class="trow1" align="center" colspan="{$colspan}">
			<span><em>Powered by : <a href="http://mybbhacks.zingaburga.com" target="_blank">XThreads</a> &nbsp; Layout by: <a href="http://www.leefish.nl/mybb/user-1.html" target="_blank">leefish</a></em></span>
&nbsp;              </td>
	</tr>
</table>
<br style="clear: both;" />
{$threadexbox}
{$similarthreads}

<br />
<div class="float_left">
	<ul class="thread_tools">
		<li class="printable"><a href="printthread.php?tid={$tid}">{$lang->view_printable}</a></li>
		<li class="sendthread"><a href="sendthread.php?tid={$tid}">{$lang->send_thread}</a></li>
		<li class="subscription_{$add_remove_subscription}"><a href="usercp2.php?action={$add_remove_subscription}subscription&amp;tid={$tid}&amp;my_post_key={$mybb->post_code}">{$add_remove_subscription_text}</a></li>
	</ul>
</div>
<div class="float_right" style="text-align: right;">
	{$moderationoptions}
	{$forumjump}
</div>
<br style="clear: both;" />
{$footer}
</body>
</html>


pfpic1 is different as I wanted to use it as the thread preview pic. It works fine in the gallery though.

I have RateU's neat post preview set up in my custom thread field - this is the display value for the pfapic1

HTML Code 
<if THIS_SCRIPT == 'newthread.php' OR THIS_SCRIPT == 'editpost.php' then>
	<tr>
	<tr><td class="tcat" align="center" colspan="2"><strong>Image 2 Preview &amp; URL</strong></td></tr>
	<tr>
		<td class="trow1" align="center">
			<img src="{$GLOBALS['threadfields']['pfapic1']['url']}/thumb160x120" alt="" title="" />
		</td>
		<td class="trow1" valign="top">
			<div class="float_left" style="width: 50%;">
				<strong>BBCODE - 640 x 480 Thumbnail</strong><br />
				<input name="prev_pfapic1_bbcode" type="text" size="40" value="[IMG]{$mybb->settings['bburl']}/{$GLOBALS['threadfields']['pfapic1']['url']}/thumb640x480[/IMG]" readonly="readonly" />
				<input type="button" class="button" value="Select" onClick="javascript:this.form.prev_pfapic1_bbcode.focus();this.form.prev_pfapic1_bbcode.select();">
			</div>
			<div class="float_left" style="width: 50%;">
				<strong>Direct Link</strong><br />
				<input name="prev_pfapic1_dl" type="text" size="40" value="<func htmlspecialchars_uni><a href="{$mybb->settings['bburl']}/{$GLOBALS['threadfields']['pfapic1']['url']}">{$GLOBALS['threadfields']['pfapic1']['filename']}</a></func>" readonly="readonly" />
				<input type="button" class="button" value="Select" onClick="javascript:this.form.prev_pfapic1_dl.focus();this.form.prev_pfapic1_dl.select();">
			</div>
			<div class="float_left" style="width: 50%;">
				<strong>HTML Code - 160 x 120 Thumbnail</strong><br />
				<input name="prev_pfapic1_html" type="text" size="40" value="<func htmlspecialchars_uni><img src="{$mybb->settings['bburl']}/{$GLOBALS['threadfields']['pfapic1']['url']}/thumb160x120" alt="" title="" /></func>" readonly="readonly" />
				<input type="button" class="button" value="Select" onClick="javascript:this.form.prev_pfapic1_html.focus();this.form.prev_pfapic1_html.select();">
			</div>
			<div class="float_left" style="width: 50%;">
				<strong>Full Size Image URL</strong><br />
				<input name="prev_pfapic1_full" type="text" size="40" value="{$mybb->settings['bburl']}/{$GLOBALS['threadfields']['pfapic1']['url']}" readonly="readonly" />
				<input type="button" class="button" value="Select" onClick="javascript:this.form.prev_pfapic1_full.focus();this.form.prev_pfapic1_full.select();">
			</div>
		</td>
	</tr>
<else>
<a href="{URL}" rel="lightbox[find]"><img src="{URL}/thumb160x120" alt="{$thread['subject']} Screenshot" title="{$GLOBALS['threadfields']['pfapicdesc1']}" style="border: 1px solid #C1C1C1; padding: 3px; margin: 3px;"  /></a>
</if>


What I would like to do is change the HTML Code - 160 x 120 Thumbnail from the Custom ThreadFields display value to add a picture where the lightbox will fire from it, and still keep the gallery function, but I am struggling to find the right codes. When I try and turn it into lightbox enabled thumb I just get the raw HTML in the showthread when we add it via the select button.

I'm stuck!! Please can anyone help?

Example thread for the bewildered:  http://www.leefish.nl/mybb/thread-873.html

RateU

01-29-2011, 02:37 AM
I'm not quite sure what you mean.
So, do you want your user can use the thumbnail of the uploaded image in post body/message via the URL in the textbox at the side of the select button, and get the lightbox effects?

leefish

01-29-2011, 03:20 AM
Yes RateU, that is exactly what I mean. Can it be done?

RateU

01-29-2011, 03:25 AM
The message is parsed by MyBB, depends on what settings we set for that forum.
So, if we set using HTML Code is not allowed for that forum, any HTML code will not work.
I think you need a MyCode/BBCODE for that.

leefish

01-29-2011, 03:39 AM
Darn, I feared that was so. I have looked around for a GOOD mycode/bbcode but I cannot find a working one.

I found this one, but I don't quite see how to integrate it into a MyCode

Code: 
   // Lightbox
    '#\[lightbox=([\w:;&,~%+!=@\/\.\-\#\?]+)\]([\w:;&,~%+!=@\/\.\-\#\?]+)\[\/lightbox\]#si' => '<a href="\\1" rel="lightbox"><img src="\\2" /></a>',


Code: 
[lightbox=%TEXT%]thumbURL[/lightbox]


Like this for example (yes, I know its bad, but its to test) does not work....

Code: 
Regular expression:
\[lightbox=(.*?)\](.*?)\[/lightbox\]

Replacement:
<a href="$1" rel="lightbox"><img src="$2"/></a>

HTML result:
[lightbox=http://www.leefish.nl/mybb/xthreads_attach.php/561_1290377481_8842ed58/6e185e861e4954ce149d737d56fc43d0/cf_SHOESballetflatsthumb.jpg]http://www.leefish.nl/mybb/xthreads_attach.php/561_1290377481_8842ed58/6e185e861e4954ce149d737d56fc43d0/cf_SHOESballetflatsthumb.jpg/thumb640x480[/lightbox]

RateU

01-29-2011, 05:26 AM
(01-29-2011 03:39 AM)leefish Wrote: [ -> ]Like this for example (yes, I know its bad, but its to test) does not work....

Code: 
Regular expression:
\[lightbox=(.*?)\](.*?)\[/lightbox\]

Replacement:
<a href="$1" rel="lightbox"><img src="$2"/></a>

HTML result:
[lightbox=http://www.leefish.nl/mybb/xthreads_attach.php/561_1290377481_8842ed58/6e185e861e4954ce149d737d56fc43d0/cf_SHOESballetflatsthumb.jpg]http://www.leefish.nl/mybb/xthreads_attach.php/561_1290377481_8842ed58/6e185e861e4954ce149d737d56fc43d0/cf_SHOESballetflatsthumb.jpg/thumb640x480[/lightbox]


The image not displayed? Because the image displayed for me? (yeah, I know that it is for test only).

leefish

01-29-2011, 05:44 AM
OK, is solved. I have a copy of ZingaBurga's mycodepack, and I added the bbcode in via that file rather than trying to use the MYBB MYCODE editor. I would appreciate a yes/no on how "safe" this code is, and if unsafe some tips on how to fix.

Code: 
    '#\[lightbox=([\w:;&,~%+!=@\/\.\-\#\?]+)\]([\w:;&,~%+!=@\/\.\-\#\?]+)\[\/lightbox\]#is' => '<a href="\\1" rel="lightbox"><img src="\\2" /></a>',


EDIT: I missed your post RateU - yea, its insane. That scraffly little mycode SHOULD have worked - but no go. This way is working - now I guess I have to add the mycode version into the post preview set up?

LATER EDIT:  Muwhahahaha - it worked!! Yay. Thanks  for listening Smile

RateU

01-29-2011, 06:46 AM
(01-29-2011 05:44 AM)leefish Wrote: [ -> ]Thanks  for listening Smile

Where do you put the code?

leefish

01-29-2011, 09:35 AM
What do you mean RateU?

I put the code INTO the mycodespack. Or do you mean on the post preview? I put the BB Lightbox code in like the BB IMG code.

Code: 
<if THIS_SCRIPT == 'newthread.php' OR THIS_SCRIPT == 'editpost.php' then>
	<tr>
	<tr><td class="tcat" align="center" colspan="2"><strong>Image 2 Preview &amp; URL</strong></td></tr>
	<tr>
		<td class="trow1" align="center">
			<img src="{$GLOBALS['threadfields']['pfapic1']['url']}/thumb160x120" alt="" title="" />
		</td>
		<td class="trow1" valign="top">
			<div class="float_left" style="width: 50%;">
				<strong>BBCODE - 640 x 480 Thumbnail</strong><br />
				<input name="prev_pfapic1_bbcode" type="text" size="40" value="[IMG]{$mybb->settings['bburl']}/{$GLOBALS['threadfields']['pfapic1']['url']}/thumb640x480[/IMG]" readonly="readonly" />
				<input type="button" class="button" value="Select" onClick="javascript:this.form.prev_pfapic1_bbcode.focus();this.form.prev_pfapic1_bbcode.select();">
			</div>
			<div class="float_left" style="width: 50%;">
				<strong>Direct Link</strong><br />
				<input name="prev_pfapic1_dl" type="text" size="40" value="<func htmlspecialchars_uni><a href="{$mybb->settings['bburl']}/{$GLOBALS['threadfields']['pfapic1']['url']}">{$GLOBALS['threadfields']['pfapic1']['filename']}</a></func>" readonly="readonly" />
				<input type="button" class="button" value="Select" onClick="javascript:this.form.prev_pfapic1_dl.focus();this.form.prev_pfapic1_dl.select();">
			</div>
			<div class="float_left" style="width: 50%;">
				<strong>BB Code - Inline Lightbox</strong><br />
				<input name="prev_pfapic1_html" type="text" size="40" value="[LIGHTBOX={$mybb->settings['bburl']}/{$GLOBALS['threadfields']['pfapic1']['url']}]{$mybb->settings['bburl']}/{$GLOBALS['threadfields']['pfapic1']['url']}/thumb640x480[/lightbox]" readonly="readonly" />
				<input type="button" class="button" value="Select" onClick="javascript:this.form.prev_pfapic1_html.focus();this.form.prev_pfapic1_html.select();">
			</div>
			<div class="float_left" style="width: 50%;">
				<strong>Full Size Image URL</strong><br />
				<input name="prev_pfapic1_full" type="text" size="40" value="{$mybb->settings['bburl']}/{$GLOBALS['threadfields']['pfapic1']['url']}" readonly="readonly" />
				<input type="button" class="button" value="Select" onClick="javascript:this.form.prev_pfapic1_full.focus();this.form.prev_pfapic1_full.select();">
			</div>
		</td>
	</tr>
<else>
<a href="{URL}" rel="lightbox[find]"><img src="{URL}/thumb160x120" alt="{$thread['subject']} Screenshot" title="{$GLOBALS['threadfields']['pfapicdesc1']}" style="border: 1px solid #C1C1C1; padding: 3px; margin: 3px;"  /></a>
</if>

If zinga is ok with it I can upload the file with the mycodes in? Its really neat - it has a table tag and anchor tag and all kinds of thingsSmile

ZiNgA BuRgA

01-30-2011, 08:06 PM
(01-29-2011 09:35 AM)leefish Wrote: [ -> ]If zinga is ok with it I can upload the file with the mycodes in? Its really neat - it has a table tag and anchor tag and all kinds of thingsSmile
I haven't read the thread, but if you want to upload the plugin, go ahead.
I don't like it in a number of ways, which is why I haven't done it myself.
Pages: 1 2
MyBB Hacks > MyBB Plugins > XThreads > Xthreads Images and Shadowbox/Lightbox
Reference URL's