CSS Image Resize with Preview

[nix]

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

http://www.dev-nix.com/cssresize/css1.gif

After:

http://www.dev-nix.com/cssresize/Picture%205.png

Hover:
http://www.dev-nix.com/cssresize/Picture%206.png

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:
https://vborg.vbsupport.ru/

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]

It's not working.

Demo:
http://img408.imageshack.us/img408/3295/errorrk8.png

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.

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?)

[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! :D

* projectego clicks install

[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]

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

[nix]

eh?

[DementedMindz]

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]

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]

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,

[nix]

I'm working on it now. Some time in the next couple of days I would guess.

[Gooner]

Well, nice idea but this script has just totally messed my site up, i installed it and i didnt like it, so i uninstalled the mod and removed the css code i added, and now no images will work at all... every image on my forums says...

https://vborg.vbsupport.ru/ [x] <---- and a box with a red X

Ive undone everything i did and its messed up.

[nix]

go back into ur bbcode manager and see if the bbcode for it is still there. If it is delete it. If its not, go into another bbcode and just edit it and hit save without making changes. Sorry for the trouble. The next version will be better.

[Gooner]

thanks, fixed

[nix]

Np. I'll have a version out tomorrow or Sat that will fix most of the problems. I think you'll like it.

[Seiyaboy]

Does this mod only work on [img] tag'd images? I hope it also works for attachments as well.

[nix]

right now it only works in IMG tags. I'll be adding attachments after the next release.

[GrendelKhan{TSU]

yikes. installed then had to uninstall.

gunna wait for the new version... REALLY need the only affects images bigger that certain setting. (makes things crazy if people have bbcode img signatures !) ;))

[nix]

Yea. Thats why I moved it to beta. Right now its not ready for a live site.

[daystorm]

Hello,

I installed this and am testing it on IE6. When I input an image, sometimes it does the hover and sometimes it does not. I have to refresh the page for the hover to work, unfortunately, when it does work it does not go back to normal size, it stays large until I refresh the page again. Any suggestions as to why this is happening?

[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]

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]

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?

[nix]

I should have a new version out soon.

Did you put the CSS in the new skin also?

[Miki_29]

Did you put the CSS in the new skin also?

:o
It's working now, thanks.

I'll be waiting for the new version, in order to resize only the large images :up:

[MetalORock]

it work for image signature too, and how to fix it?

[princeedward]

hi nix...;)

actually its workin good to my vb3.6.7. PL1

...but how can i put it center to every post...i tried but its not workin...you can just insert photos 1 line downward at left side of every post...but not one line sideways and...how is this possible to work on vBadvanced cmps portal???

thanks and best regards...

[princeedward]

*bump!*

[princeedward]

hi nix...;)

actually its workin good to my vb3.6.7. PL1

...but how can i put it center to every post...i tried but its not workin...you can just insert photos 1 line downward at left side of every post...but not one line sideways and...how is this possible to work on vBadvanced cmps portal???

thanks and best regards...BUMP!

[ForYou]

Hello ,

This is really agood mod for resize image ,

my note is , resize the big image that have for example W : 600 h : 400 to W : 400 h : 200 that is fo example ,

but do any thing with image alrady small , like icons or small sig ,

I hope you understand me ,

Regards

[Hammond]

* clicks install

[Lea Verou]

I clicked install to be notified of updates. I hope this is ready soon, it looks very nice :)

[Manhkhi]

work for 3.6.8

[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 :confused:

[Stickers]

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

count me also in

[Stickers]

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 :p

[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.

[GrendelKhan{TSU]

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.

cool. no worries... real life first. :)

I think it'd be much better if you just had it not affect anything in a signature. I actually want it for [ img ] tags. :(

[SaTaNaSsO]

hey men... i installed the add-on just 5 mins ago but the resized images are even in the signature...!!!!
how can i let the resize ONLY in the post and not in the signature???
thanx
:)

[Shinji Ikari]

this mod no work in my site :( and i need remove i cant see any imagen now.

this is the error :


https://vborg.vbsupport.ru/

[Smiry Kin's]

to fix the signature issue, i think you just do a little edit to postbit.

[ciprianrpp]

works like a charm :D.. thx

[chrisbeau]

SIGNATURE Fix ??????????

[chrisbeau]

The popup image is coming out behind the thumbnail image, any idea why ??

71539

[obrax]

SIGNATURE Fix ??????????

Yo Signature Fix would be very very nice!

[cajunboy2208]

Can we get an update on this?
Would love to have it

[smooth-c]

Update?