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!

[Darkus]

I'd also like to know how to disable the Sig thing. It's making some of my members quite angry

[Drix]

Clicked install on this as well to be ready when it gets done! Great work.

[activa]

installed

[Mavikent42]

when we put on the picture, opening to the same page. What must we do for open the different page.

[Dragons76]

I'd also like to know how to disable the Sig thing. It's making some of my members quite angry

[Stickers]

Originally Posted by Dragons76

I'd also like to know how to disable the Sig thing. It's making some of my members quite angry

count me also in

[Stickers]

Originally Posted by Mavikent42

when we put on the picture, opening to the same page. What must we do for open the different page.

Edite the bbcode and replace

<a href=\"{param}\" >

with

<a href=\"{param}\" target="_blank">

[mrghostno1]

Could you test on Opera and IE7 ?

[Living in music]

Nice, Installed

[nix]

Hey sorry for the lack of replies. Just been busy with other stuff. I added this to this mod https://vborg.vbsupport.ru/showthread.php?t=150491 that I'm also working on. If you use the normal IMG tag it won't touch the image but if you just paste the link it will thumbnail it. I haven't giving up on this so if you still want a css only verion I'll knock one out soon. Again I wouldn't really use this on a live site with out some tweak. If you want a working version check out that link i posted.