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
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #2
RE: Xthreads Images and Shadowbox/Lightbox
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?
01-29-2011 02:37 AM
Find all posts by this user Quote this message in a reply
leefish Offline
Hamster
*****
Posts: 1,009
Joined: Apr 2010
Post: #3
RE: Xthreads Images and Shadowbox/Lightbox
Yes RateU, that is exactly what I mean. Can it be done?

[Image: leelink.gif]
MYBB1.6 & XThreads
01-29-2011 03:20 AM
Visit this user's website Find all posts by this user Quote this message in a reply
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #4
RE: Xthreads Images and Shadowbox/Lightbox
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.
01-29-2011 03:25 AM
Find all posts by this user Quote this message in a reply
leefish Offline
Hamster
*****
Posts: 1,009
Joined: Apr 2010
Post: #5
RE: Xthreads Images and Shadowbox/Lightbox
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:
1
2
3
4
5
6
7
8
 
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]


[Image: leelink.gif]
MYBB1.6 & XThreads
(This post was last modified: 01-29-2011 04:39 AM by leefish.)
01-29-2011 03:39 AM
Visit this user's website Find all posts by this user Quote this message in a reply
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #6
RE: Xthreads Images and Shadowbox/Lightbox
(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:
1
2
3
4
5
6
7
8
 
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).
01-29-2011 05:26 AM
Find all posts by this user Quote this message in a reply
leefish Offline
Hamster
*****
Posts: 1,009
Joined: Apr 2010
Post: #7
RE: Xthreads Images and Shadowbox/Lightbox
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


[Image: leelink.gif]
MYBB1.6 & XThreads
(This post was last modified: 01-29-2011 05:57 AM by leefish.)
01-29-2011 05:44 AM
Visit this user's website Find all posts by this user Quote this message in a reply
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #8
RE: Xthreads Images and Shadowbox/Lightbox
(01-29-2011 05:44 AM)leefish Wrote:  Thanks  for listening Smile

Where do you put the code?
01-29-2011 06:46 AM
Find all posts by this user Quote this message in a reply
leefish Offline
Hamster
*****
Posts: 1,009
Joined: Apr 2010
Post: #9
RE: Xthreads Images and Shadowbox/Lightbox
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:
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>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

[Image: leelink.gif]
MYBB1.6 & XThreads
(This post was last modified: 01-29-2011 09:39 AM by leefish.)
01-29-2011 09:35 AM
Visit this user's website Find all posts by this user Quote this message in a reply
ZiNgA BuRgA Offline
Fag
*******
Posts: 3,357
Joined: Jan 2008
Post: #10
RE: Xthreads Images and Shadowbox/Lightbox
(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.
My Blog
01-30-2011 08:06 PM
Find all posts by this user Quote this message in a reply

« Next Oldest | Next Newest »

Threaded Mode | Linear Mode
 Standard Tools
Forum Jump:



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