Image Thumbnail BBCode

[BBCode Bot]

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]

---

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]