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]

What browser are you using? If IE i can put some IE fixes in there. If you click on the picture it will show it full size. O yea, make sure you click install so you can be notified of any fixes.

I really wanted to keep this simple but the more I look into the more ideas I have for it. So it might turn into a couple of template edits to really get it going.

[projectego]

Nice!

[high]* projectego clicks install[/high]

[4x4 Mecca]

I always check for replies to posts that i've posted in. I haven't installed it yet, it's still on a test server.

[nix]

ah got ya.

[8dayssooner]

is there anyway to stop this resizing/creating thumbnails for images smaller than the thumbnail size?

i.e. some users on my site use the img tag to post custom smilies, or img tags in signatures too, all of these have now been resized to the same size as the thumbnail for larger images....

Mike
www.megalolz.com

*edit*

just noticed you already mentioned you were going to fix this.

[gldtn]

Originally Posted by 8dayssooner

is there anyway to stop this resizing/creating thumbnails for images smaller than the thumbnail size?

i.e. some users on my site use the img tag to post custom smilies, or img tags in signatures too, all of these have now been resized to the same size as the thumbnail for larger images....

Mike
www.megalolz.com

*edit*

just noticed you already mentioned you were going to fix this.

Yes, this will be a a plus to this hack I have imagehosting installed which creates thumbs for the images hosted on it already, and I wanted this hack just to create thumbs for the images that are larger than the thumbs size set by me.

Good job btw.. installed!

[nix]

You can modify the BBcode to fit your needs. I'm kind of torn on which way to go from here that will suit the most people.

1. I can have it resize with Java.
2. I can have it resize how it is now. But it actually does two images. So while it looks pretty it doubles the images.
3. I can have it resize and create thumbs and save them to the server for cache.
4. I can just have php resize it in the browser.

I pretty much have a working version of the last 3. Does anyone have any thoughts on this? Maybe combine them all into one package and let the users deiced?

I have a couple of bugs fixed and I'll have the images to be able to line up next to each other. I'm trying to keep this from template/file edits.

[DementedMindz]

nix guess you should really give credit to the author who made this mod here is a demo on there site http://host.sonspring.com/hoverbox/

[nix]

I thought I had it in the xml file. Its not there or do you mean in this thread? I was planing on doing that. Just put this up real quick.

[concepts]

hushed