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!

[valdet]

This is absolutely a great hack.
*installed*

Can you add some more additional CSS definitions, so the thumbnail would show with rounded corners, kinda giving it a more Web 2.0 look?

Thanks.

[Snider]

Is there anyway to have this NOT touch the img tag in signatures?

[ehsanix]

hi
i edit all file but i can't see pictute in Thread , i should mouse over on link but i see text in table of image : {img}src{/img}
i don't know how to edit bbcode manager please Help me

Thanx

[ehsanix]

please Help

[Zia]

Originally Posted by Snider

Is there anyway to have this NOT touch the img tag in signatures?

what u mean? its effecting images on sig's image?
yet not i install it...

[nix]

Right now it affects all images. I'll have a new one out soon that only resized images that are set by the admin. No javascript.

[keyness]

Nix, so now we have updated version in 1st post or you are still working on it?

[Zia]

Originally Posted by nix

Right now it affects all images. I'll have a new one out soon that only resized images that are set by the admin. No javascript.

No Java ?

can u add the featuer "disable right mouse click" ?

[iHostile]

works a treat, likin this alot.

[Miki_29]

It's working smoothly on my forum, but i'm having a small problem... I'm configuring a new skin and on the tests all images show up duplicated and on the original size...

Any ideas?