Image Thumbnail BBCode

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

Image Thumbnail BBCode

Post by BBCode Bot » 09 Mar 2010, 19:45

Image Thumbnail BBCode

Image Thumbnail BBCode for phpBB3 is meant for admins only. I use it for reviews of products.
You need to have 2 images: An ordinary image and a thumbnail.
When You click on the thumbnail, the ordinary image pops up centered.
Also there is a link version available. [thumbscript][/thumbscript]
Image

How to do the modifications:
1. Download all files from here, except the CSS:
http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm
2. Upload the thumbnailviewer.js and loading.gif to your forum folder
3.Make these changes in colours.css(prosilver) and stylesheet.css(subsilver2) - Just add following code at the bottom:

Code: Select all

#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 7px;
padding-bottom: 0;
background: #151515; 
visibility: hidden;
z-index: 10;
cursor: pointer;
}

#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
font: bold 16px Tahoma;
letter-spacing: 5px;
line-height: 1.1em;
color: white;
padding: 5px 0;
text-align: right;
}


#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: #151515;
color: #FFFFFF;
text-align: left;
font-weight: bold;
}

#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: #EFEFEF;
padding: 5px;
z-index: 5;
}
4. Add these lines at the last line in overall_header - both Subsilver2 and Prosilver styles:

Code: Select all

<script src="thumbnailviewer.js" type="text/javascript">
/***********************************************
* Image Thumbnail Viewer Script- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

How to create the BBCode for the easy version
Create this BBCode in ACP:

BBCode:

Code: Select all

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

Code: Select all

<a href="{URL2}" rel="thumbnail"><img src="{URL1}" alt="" /></a>
Helpline:

Code: Select all

[thumb1=url to thumbnail]url to full image[/thumb1]
Example:

Code: Select all

[thumb1=http://www.phpbb3bbcodes.com/images/strawberrybig.jpg]http://www.phpbb3bbcodes.com/images/strawberrylittle.jpg[/thumb1]
DEMO:
[thumb1=images/strawberrybig.jpg]images/strawberrylittle.jpg[/thumb1]

How to create the BBCode for the Link version
Create this BBCode in ACP:

BBCode:

Code: Select all

[thumb2={URL}]{TEXT}[/thumb2]
HTML:

Code: Select all

<a href="{URL}" rel="thumbnail">{TEXT}</a>
Helpline:

Code: Select all

[thumb2=url to full image]Link text[/thumb2]
Example:

Code: Select all

[thumb2=http://www.phpbb3bbcodes.com/bbcodes/images/orange.jpg]Link to a picture[/thumb2]
DEMO:
[thumb2=images/orange.jpg]Link to a picture[/thumb2]

You can use external images as well:
[thumb2=http://www.freedigitalphotos.net/images ... illout.jpg]Living[/thumb2]