Show Thread Enhancements - CSS Image Resize with Preview

Don't forget to click install if you use this!

Nix's CSS Image Resize with Hover Preview

Not Ready for a live site. Next release will address all the issues.

Credits:
Based of this Hoverbox by Nathan Smith
http://sonspring.com/journal/hoverbox-image-gallery

This mod will resize images posted on your forum and create a thumbnail with an hover preview all with CSS.

Tested on Firefox, Safari and IE 6.

So why is this not in the template section? I got some ideas that i'll be adding on to this. This is just to get it out there.


How to install?

1. Import the product
2. Coppy the CSS to your additional CSS section
3. Go into the BBCode manager and find the new bbcode it made. Edit it and just save it. (not sure why its doing that but i'll try and fix this)
4. Post an image!



CSS to add:

.hdiv {
clear:both;
}

.hdclear {
clear:both;
}

.hoverbox {
cursor:default;
list-style:none;
}

.hoverbox a {
cursor:default;
}

.hoverbox a .preview {
display:none;
}

.hoverbox a:hover .preview {
display:block;
position:absolute;
top:-33px;
left:-45px;
z-index:1;
}

.hoverbox img {
background:#fff;
color:inherit;
vertical-align:top;
width:150px;
height:112px;
border-color:#aaa #ccc #ddd #bbb;
border-style:solid;
border-width:1px;
padding:2px;
}

.hoverbox li {
background:#eee;
color:inherit;
display:inline;
float:left;
position:relative;
border-color:#ddd #bbb #aaa #ccc;
border-style:solid;
border-width:1px;
margin:3px;
padding:5px;
}

.hoverbox .preview {
width:350px;
height:263px;
border-color:#000;
}

Versions:

1.0 - First release


Planned Features

- Guest or usergroups the admin picks will get a predetermined message in the hover popup. (option)
- Enable it for attachments (option for on or off)
- Have GD2 create a thumbnail and chache it (option for on or off)

There will also just be the basic version of thats all you want.

Know Bugs
I'm sure they will come!

SS coming!

[nix]

I should have a new version out soon.

Did you put the CSS in the new skin also?

[Miki_29]

Originally Posted by nix

Did you put the CSS in the new skin also?

It's working now, thanks.

I'll be waiting for the new version, in order to resize only the large images :up:

[MetalORock]

it work for image signature too, and how to fix it?

[princeedward]

hi nix...

actually its workin good to my vb3.6.7. PL1

...but how can i put it center to every post...i tried but its not workin...you can just insert photos 1 line downward at left side of every post...but not one line sideways and...how is this possible to work on vBadvanced cmps portal???

thanks and best regards...

[princeedward]

*bump!*

[princeedward]

Originally Posted by princeedward

hi nix...

actually its workin good to my vb3.6.7. PL1

...but how can i put it center to every post...i tried but its not workin...you can just insert photos 1 line downward at left side of every post...but not one line sideways and...how is this possible to work on vBadvanced cmps portal???

thanks and best regards...

BUMP!

[ForYou]

Hello ,

This is really agood mod for resize image ,

my note is , resize the big image that have for example W : 600 h : 400 to W : 400 h : 200 that is fo example ,

but do any thing with image alrady small , like icons or small sig ,

I hope you understand me ,

Regards

[Hammond]

* clicks install

[Lea Verou]

I clicked install to be notified of updates. I hope this is ready soon, it looks very nice

[Manhkhi]

work for 3.6.8