The Arcive of vBulletin Modifications Site. |
|
BBcode Image Resizer with CSS Details »»
|
|||||||||||||||||||||||||
BBcode Image Resizer with CSS. Enlarged image onMouseover.
This code is very simple and will not affect page load speed. DEMO Step 1: Go to--->ACP--->Custom BB Codes--->Add new BBcode. Title: BBcode Image Resizer with CSS BB Code Tag Name: imgr Replacement: Code:
<a class="thumbnail" href="#thumb"><img src="{param}" width="320px" height="240px" border="0" /><span><img src="{param}" /><br />Image</span></a>
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 Code:
.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 */
}
![]() Show Your Support
|
|||||||||||||||||||||||||
| Comments |
|
#2
|
|||
|
|||
|
this dosnt work with the image re-sizer right?
and it kinda makes vb edit option to stop working :S |
|
#3
|
||||
|
||||
|
Thanks
İnstalled ... |
|
#4
|
|||
|
|||
|
not work for me.
|
|
#5
|
|||
|
|||
|
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.
|
|
#6
|
|||
|
|||
|
I haven't installed because it looks like its not working, which is a real shame, because this would of been great!
|
|
#7
|
|||
|
|||
|
This one works with 3.8.1,
https://vborg.vbsupport.ru/showthread.php?t=172024 just installed it and it's working perfectly. |
|
#8
|
|||
|
|||
|
works good with Version 3.8.2, just installed it. Thanks!
|
|
#9
|
|||
|
|||
|
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? |
|
#10
|
||||
|
||||
|
This works for me on 3.8.1 but the resized images get quite squashed up, it doesn't seem to keep the proportions.
|
![]() |
|
|