MyBB Hacks / MyBB Plugins / XThreads / Xthreads Images and Shadowbox/Lightbox

 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
 Xthreads Images and Shadowbox/Lightbox
leefish Offline
Hamster
*****
Posts: 1,009
Joined: Apr 2010
Post: #1
Xthreads Images and Shadowbox/Lightbox
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<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


[Image: leelink.gif]
MYBB1.6 & XThreads
(This post was last modified: 01-28-2011 09:49 AM by leefish.)
01-28-2011 09:45 AM
Visit this user's website Find all posts by this user Quote this message in a reply

« Next Oldest | Next Newest »

Messages In This Thread
Xthreads Images and Shadowbox/Lightbox - leefish - 01-28-2011 09:45 AM

Threaded Mode | Linear Mode
 Standard Tools
Forum Jump:



Contact Us | MyBB Hacks | Return to Top | Return to Content | Lite (Archive) Mode | RSS Syndication