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]

Before



After:



Hover:


I know the SS are hard to tell what it does. I'll try and put up a demo in a bit.

[shadowevil]

nice mod ....*installed*

[Aligator21]

does this works also into 3.6.2?

[nix]

Yea should work on all version. Its just bbcode and CSS right now.

[4x4 Mecca]

Any chance of a demo site? I see the pictures, but a real life demo would really help.

[shadowevil]

It's not working.

Demo:


Nix help me (

[4x4 Mecca]

I have mine working on a test site, but why does it show them on seperate lines, anyway to do them inline?

[nix]

Originally Posted by shadowevil

It's not working.

Demo:


Nix help me (

Go into our bbcode manage and click on edit for the bbcode i created. Then just save it. Not sure why its doing this but I'll look to fix it.

Originally Posted by 4x4 Mecca

I have mine working on a test site here http://www.gettin-dirty.com/showthread.php?p=1#post1 but why does it show them on seperate lines, anyway to do them inline?

Yea thats one of the features I would like to make it do. Kind of make them like a gallery. I might have a javascript version also for people who don't mind that.

Also. I noticed it affects sigs also if they are just IMG tags. I'll fix this also.

[4x4 Mecca]

Also, the pictures overlap eachother in thumbnail mode when you mouseover them. This may be because I made my thumbs larger. Is there a CSS variable to make the thumbnail like 50% of the screen res, but let the height be free(not confined?)