Lytebox BBCode

Mod BBCode Database
BBCodes that need some file editing or extra files
There is no support here! Only Read Access!
Locked
User avatar
BBCode Bot
BBCoder IV
BBCoder IV
Posts: 239
Joined: 04 Mar 2010, 15:04
Location: bbcode table

Lytebox BBCode

Post by BBCode Bot »

Lytebox BBCode

Author: Stoker
Description: The Lytebox BBCode gives You the opportunity to insert images in the topics which opens with the lytebox script.
Image
Modifications: Download the Lytebox script here: http://www.dolem.com/lytebox/
Upload lytebox.js to the forum root folder (the same folder where You find config.php
Upload the content of the folder images to root/images and to styles/subsilver2/theme/images
Insert the following code at the bottom (new line) of styles/prosilver/theme/colours.css and styles/subsilver2/theme/stylesheet.css

Code: Select all

#lbOverlay { position: fixed; top: 0; left: 0; z-index: 99998; width: 100%; height: 500px; }
	#lbOverlay.grey { background-color: #000000; }
	#lbOverlay.red { background-color: #330000; }
	#lbOverlay.green { background-color: #003300; }
	#lbOverlay.blue { background-color: #011D50; }
	#lbOverlay.gold { background-color: #666600; }

#lbMain { position: absolute; left: 0; width: 100%; z-index: 99999; text-align: center; line-height: 0; }
#lbMain a img { border: none; }

#lbOuterContainer { position: relative; background-color: #fff; width: 200px; height: 200px; margin: 0 auto; }
	#lbOuterContainer.grey { border: 3px solid #888888; }
	#lbOuterContainer.red { border: 3px solid #DD0000; }
	#lbOuterContainer.green { border: 3px solid #00B000; }
	#lbOuterContainer.blue { border: 3px solid #5F89D8; }
	#lbOuterContainer.gold { border: 3px solid #B0B000; }

#lbDetailsContainer {	font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; width: 100%; line-height: 1.4em;	overflow: auto; margin: 0 auto; }
	#lbDetailsContainer.grey { border: 3px solid #888888; border-top: none; }
	#lbDetailsContainer.red { border: 3px solid #DD0000; border-top: none; }
	#lbDetailsContainer.green { border: 3px solid #00B000; border-top: none; }
	#lbDetailsContainer.blue { border: 3px solid #5F89D8; border-top: none; }
	#lbDetailsContainer.gold { border: 3px solid #B0B000; border-top: none; }

#lbImageContainer, #lbIframeContainer { padding: 10px; }
#lbLoading {
	position: absolute; top: 45%; left: 0%; height: 32px; width: 100%; text-align: center; line-height: 0; background: url(images/loading.gif) center no-repeat;
}

#lbHoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#lbImageContainer>#lbHoverNav { left: 0; }
#lbHoverNav a { outline: none; }

#lbPrev { width: 49%; height: 100%; background: transparent url(images/blank.gif) no-repeat; display: block; left: 0; float: left; }
	#lbPrev.grey:hover, #lbPrev.grey:visited:hover { background: url(images/prev_grey.gif) left 15% no-repeat; }
	#lbPrev.red:hover, #lbPrev.red:visited:hover { background: url(images/prev_red.gif) left 15% no-repeat; }
	#lbPrev.green:hover, #lbPrev.green:visited:hover { background: url(images/prev_green.gif) left 15% no-repeat; }
	#lbPrev.blue:hover, #lbPrev.blue:visited:hover { background: url(images/prev_blue.gif) left 15% no-repeat; }
	#lbPrev.gold:hover, #lbPrev.gold:visited:hover { background: url(images/prev_gold.gif) left 15% no-repeat; }
	
#lbNext { width: 49%; height: 100%; background: transparent url(images/blank.gif) no-repeat; display: block; right: 0; float: right; }
	#lbNext.grey:hover, #lbNext.grey:visited:hover { background: url(images/next_grey.gif) right 15% no-repeat; }
	#lbNext.red:hover, #lbNext.red:visited:hover { background: url(images/next_red.gif) right 15% no-repeat; }
	#lbNext.green:hover, #lbNext.green:visited:hover { background: url(images/next_green.gif) right 15% no-repeat; }
	#lbNext.blue:hover, #lbNext.blue:visited:hover { background: url(images/next_blue.gif) right 15% no-repeat; }
	#lbNext.gold:hover, #lbNext.gold:visited:hover { background: url(images/next_gold.gif) right 15% no-repeat; }

#lbPrev2, #lbNext2 { text-decoration: none; font-weight: bold; }
	#lbPrev2.grey, #lbNext2.grey, #lbSpacer.grey { color: #333333; }
	#lbPrev2.red, #lbNext2.red, #lbSpacer.red { color: #620000; }
	#lbPrev2.green, #lbNext2.green, #lbSpacer.green { color: #003300; }
	#lbPrev2.blue, #lbNext2.blue, #lbSpacer.blue { color: #01379E; }
	#lbPrev2.gold, #lbNext2.gold, #lbSpacer.gold { color: #666600; }
	
#lbPrev2_Off, #lbNext2_Off { font-weight: bold; }
	#lbPrev2_Off.grey, #lbNext2_Off.grey { color: #CCCCCC; }
	#lbPrev2_Off.red, #lbNext2_Off.red { color: #FFCCCC; }
	#lbPrev2_Off.green, #lbNext2_Off.green { color: #82FF82; }
	#lbPrev2_Off.blue, #lbNext2_Off.blue { color: #B7CAEE; }
	#lbPrev2_Off.gold, #lbNext2_Off.gold { color: #E1E100; }
	
#lbDetailsData { padding: 0 10px; }
	#lbDetailsData.grey { color: #333333; }
	#lbDetailsData.red { color: #620000; }
	#lbDetailsData.green { color: #003300; }
	#lbDetailsData.blue { color: #01379E; }
	#lbDetailsData.gold { color: #666600; }

#lbDetails { width: 60%; float: left; text-align: left; }
#lbCaption { display: block; font-weight: bold; }
#lbNumberDisplay { float: left; display: block; padding-bottom: 1.0em; }
#lbNavDisplay { float: left; display: block; padding-bottom: 1.0em; }

#lbClose { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
	#lbClose.grey { background: url(images/close_grey.png) no-repeat; }
	#lbClose.red { background: url(images/close_red.png) no-repeat; }
	#lbClose.green { background: url(images/close_green.png) no-repeat; }
	#lbClose.blue { background: url(images/close_blue.png) no-repeat; }
	#lbClose.gold { background: url(images/close_gold.png) no-repeat; }

#lbPlay { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
	#lbPlay.grey { background: url(images/play_grey.png) no-repeat; }
	#lbPlay.red { background: url(images/play_red.png) no-repeat; }
	#lbPlay.green { background: url(images/play_green.png) no-repeat; }
	#lbPlay.blue { background: url(images/play_blue.png) no-repeat; }
	#lbPlay.gold { background: url(images/play_gold.png) no-repeat; }
	
#lbPause { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
	#lbPause.grey { background: url(images/pause_grey.png) no-repeat; }
	#lbPause.red { background: url(images/pause_red.png) no-repeat; }
	#lbPause.green { background: url(images/pause_green.png) no-repeat; }
	#lbPause.blue { background: url(images/pause_blue.png) no-repeat; }
	#lbPause.gold { background: url(images/pause_gold.png) no-repeat; }
Add the following code rigth before </head> in styles/prosilver/template/overall_header.html and styles/template/overall_header.html

Code: Select all

<script type="text/javascript" src="lytebox.js"></script>
[lytescript][/lytescript]
BBCode:

Code: Select all

[lytebox={URL1}]{URL2}[/lytebox]
HTML:

Code: Select all

<a href="{URL1}" rel="lytebox"><img style="border: 1px solid black;" src="{URL2}" alt="" /></a>
Helpline:

Code: Select all

Lytebox: [lytebox=Url to big pic]Url to thumbnail[/lytebox]
Example:

Code: Select all

[lytebox=http://www.phpbb3bbcodes.com/images/billede8.jpg]http://www.phpbb3bbcodes.com/images/billede8lille.jpg[/lytebox]    [lytebox=http://www.phpbb3bbcodes.com/images/billede1.jpg]http://www.phpbb3bbcodes.com/images/billede1lille.jpg[/lytebox]
Demo:
[lytebox=images/billede8.jpg]images/billede8lille.jpg[/lytebox] [lytebox=images/billede1.jpg]images/billede1lille.jpg[/lytebox]

BBCode:

Code: Select all

[lyteboxgroup={URL1}]{URL2}[/lyteboxgroup]
HTML:

Code: Select all

<a href="{URL1}" rel="lytebox[group]"><img style="border: 1px solid black;" alt="" title="" src="{URL2}" /></a>
Helpline:

Code: Select all

Lyteboxgroup: [lyteboxgroup=Url to big pic]Url to thumbnail[/lyteboxgroup]
Example:

Code: Select all

[lyteboxgroup=http://www.phpbb3bbcodes.com/images/billede16.jpg]http://www.phpbb3bbcodes.com/images/billede16lille.jpg[/lyteboxgroup]    [lyteboxgroup=http://www.phpbb3bbcodes.com/images/billede6.jpg]http://www.phpbb3bbcodes.com/images/billede6lille.jpg[/lyteboxgroup]
[lyteboxgroup=http://www.phpbb3bbcodes.com/images/billede8.jpg]http://www.phpbb3bbcodes.com/images/billede8lille.jpg[/lyteboxgroup]    [lyteboxgroup=http://www.phpbb3bbcodes.com/images/billede1.jpg]http://www.phpbb3bbcodes.com/images/billede1lille.jpg[/lyteboxgroup]
Demo:
[lyteboxgroup=images/billede16.jpg]images/billede16lille.jpg[/lyteboxgroup] [lyteboxgroup=images/billede6.jpg]images/billede6lille.jpg[/lyteboxgroup]
[lyteboxgroup=images/billede8.jpg]images/billede8lille.jpg[/lyteboxgroup] [lyteboxgroup=images/billede1.jpg]images/billede1lille.jpg[/lyteboxgroup]

BBCode:

Code: Select all

[lyteshow={URL1}]{URL2}[/lyteshow]
HTML:

Code: Select all

<a href="{URL1}" rel="lyteshow[group]"><img style="border: 1px solid black;" alt="" title="" src="{URL2}" /></a>
Helpline:

Code: Select all

Lyteshow: [Lyteshow=Url to big pic]Url to thumbnail[/Lyteshow]
Example:

Code: Select all

[lyteshow=http://www.phpbb3bbcodes.com/images/billede16.jpg]http://www.phpbb3bbcodes.com/images/billede16lille.jpg[/lyteshow]    [lyteshow=http://www.phpbb3bbcodes.com/images/billede6.jpg]http://www.phpbb3bbcodes.com/images/billede6lille.jpg[/lyteshow]
[lyteshow=http://www.phpbb3bbcodes.com/images/billede8.jpg]http://www.phpbb3bbcodes.com/images/billede8lille.jpg[/lyteshow]    [lyteshow=http://www.phpbb3bbcodes.com/images/billede1.jpg]http://www.phpbb3bbcodes.com/images/billede1lille.jpg[/lyteshow]
Demo:
[lyteshow=images/billede16.jpg]images/billede16lille.jpg[/lyteshow] [lyteshow=images/billede6.jpg]images/billede6lille.jpg[/lyteshow]
[lyteshow=images/billede8.jpg]images/billede8lille.jpg[/lyteshow] [lyteshow=images/billede1.jpg]images/billede1lille.jpg[/lyteshow]
testas123
BBCoder II
BBCoder II
Posts: 13
Joined: 11 Jun 2010, 18:09

Re: Lytebox BBCode

Post by testas123 »

can we somehow replace the current image bbcode with this, to show all posted images (from urls, like imageshack) with lytebox ?
Locked