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]

eh?

[DementedMindz]

Originally Posted by concepts

not exactly... the author did not make THIS MOD.. CSS is as vast and open as html, to pinpoint a script such as this, being a simple hoverbox utilizing css to any one site, author, person, etc... is just your way of bashing his attempt at actually providing to this site.
If you had any issues or concerns how about addressing it to him via a PM., instead of a ridiculous attempt at discrediting a pretty useful addition. If not, your argument is irrelevant.

so his css is not the same? its not the same html code? no one is bashing him nor do I know the author of the original. Its just nice to show where it came from as there is other ways you can do it posted on his site that may help others also.

[RedGTiVR6]

I think this mod might be a good solution for a problem we're having but I want to make sure.

I do not want to necessarially prevent users from posting large images (as in 3+ megs). We are a technical web site and detailed pictures are necessary many times.

If a thread has say 100 pictures and they are all 3-5MB in size, this causes a BIG problem.

Right now I'm using ncode image resizer, but it doesn't fix the fact that 100s of megs of pictures have to be loaded each and every time someone accesses that page.

I understand that the issue is that you cannot resize images that are remotely hosted...but maybe this would take care of this?

Will this help this issue? I'm guessing it would take the place of the ncode resizer?

Thanks for any info you can provide.

[nix]

Originally Posted by RedGTiVR6

I think this mod might be a good solution for a problem we're having but I want to make sure.

I do not want to necessarially prevent users from posting large images (as in 3+ megs). We are a technical web site and detailed pictures are necessary many times.

If a thread has say 100 pictures and they are all 3-5MB in size, this causes a BIG problem.

Right now I'm using ncode image resizer, but it doesn't fix the fact that 100s of megs of pictures have to be loaded each and every time someone accesses that page.

I understand that the issue is that you cannot resize images that are remotely hosted...but maybe this would take care of this?

Will this help this issue? I'm guessing it would take the place of the ncode resizer?

Thanks for any info you can provide.

Yes that was the same problem I was running into. I think the a version that takes the url and turns it into a thumbnail and stores it on your server would be great for something like that. I plan on making it only do it when an image is over a certain size.

I would really like to get all three versions working and let it be a admin option of which he wants to use.

[rlpartida]

Hello Nix,

I would really like to get all three versions working and let it be a admin option of which he wants to use.

That would be great!!! Look forward for the update.

Regards

[RedGTiVR6]

Originally Posted by nix

Yes that was the same problem I was running into. I think the a version that takes the url and turns it into a thumbnail and stores it on your server would be great for something like that. I plan on making it only do it when an image is over a certain size.

I would really like to get all three versions working and let it be a admin option of which he wants to use.

So is this to say that the current version doesn't do this? I'm a tad bit confused.

[nix]

Right now it takes all urls in [img ] tags and thumbnails it. I'm currently making it so its an option of the size (either width/height, or file size) to start thumb-nailing. Does that clear it up?

[8dayssooner]

one thing i did get rid off in the CSS code, was the height:XX; tag, all you need is to set the width, and the height changes automatically to fit this.
If you have the height tag, as well as the width tag, it changes the shape of the image, and does not constrain the proportions.

[Zia]

nice...would be more nice..if u can add "disable right click" feature on it...

[rlpartida]

Hello Nix,

Any idea when the new upgrade will come out?

I would really love to have a version where it only resizes if above specified Width.

Cheers,