BBcode Image Resizer with CSS

[friend01]

BBcode Image Resizer with CSS. Enlarged image onMouseover.
This code is very simple and will not affect page load speed.

DEMO (http://phim-film.com/diendan/test-forums/13324-bbcode-image-resizer-css.html#post20280)

Step 1:
Go to--->ACP--->Custom BB Codes--->Add new BBcode.
Title: BBcode Image Resizer with CSS
BB Code Tag Name: imgr
Replacement: <a class="thumbnail" href="#thumb"><img src="{param}" width="320px" height="240px" border="0" /><span><img src="{param}" /><br />Image</span></a>
Example: You Image link
Description: Image Resizer with CSS. Enlarged image onMouseover.
Use {option}: No

Click SAVE BBcode.

Step 2:
Go to--->ACP--->Styles & Templates--->Style Manager--->You Styles--->Main CSS--->Additional CSS Definitions
add this Code on the bottom of the window last



.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}



it is completed :)

[rob01]

this dosnt work with the image re-sizer right?

and it kinda makes vb edit option to stop working :S

[eTiKeT?]

Thanks
İnstalled ...

[maxie]

not work for me.

[Phantasmagoric]

It doesn't work for me either, shame as there isn't an IMG resize mod' for 3.8.1, not that I can find.

[trickfly]

I haven't installed because it looks like its not working, which is a real shame, because this would of been great!

[Phantasmagoric]

This one works with 3.8.1,
https://vborg.vbsupport.ru/showthread.php?t=172024
just installed it and it's working perfectly.

[djXpire2]

works good with Version 3.8.2, just installed it. Thanks! :)

[UncleGrundle]

This is fantastic! Works great.

One thing that I would like to be able to do though, would be to disable the full size image on mouseover. Is there anyway to modify the code so that it only shows the thumbnail?

[Mr Morningstarr]

This works for me on 3.8.1 but the resized images get quite squashed up, it doesn't seem to keep the proportions.

[eroyka]

Thanks! Installed on www.energeticambiente.it on 3.8.2

[tspaetten]

Installed and thanks but is there anyway, that my usere can use this as my default image hack. Right now i can´t see how.

[StrKral]

thanks