vb.org Archive - Show Thread Enhancements - CSS Image Resize with Preview

Page 1 of 2

Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.6 Add-ons (https://vborg.vbsupport.ru/forumdisplay.php?f=194)

- - Show Thread Enhancements - CSS Image Resize with Preview (https://vborg.vbsupport.ru/showthread.php?t=150675)

nix	06-25-2007 10:00 PM

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:

Code:

.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	06-26-2007 04:11 AM

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

06-26-2007 05:05 AM

nice mod ....*installed*

Aligator21

06-26-2007 05:09 AM

does this works also into 3.6.2?

nix	06-26-2007 05:29 AM

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

4x4 Mecca

06-26-2007 05:36 AM

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

shadowevil

06-26-2007 05:40 AM

It's not working.

Demo:
https://vborg.vbsupport.ru/

Nix help me :((

4x4 Mecca

06-26-2007 05:54 AM

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

nix	06-26-2007 05:56 AM

Quote:

Originally Posted by shadowevil (Post 1276693)

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.

Quote:

Originally Posted by 4x4 Mecca (Post 1276698)

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

06-26-2007 06:01 AM

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	06-26-2007 06:20 AM

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

06-26-2007 06:40 AM

Nice! :D

[high]* projectego clicks install[/high]

4x4 Mecca

06-26-2007 06:45 AM

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	06-26-2007 06:49 AM

ah got ya.

8dayssooner

06-26-2007 09:28 AM

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

06-26-2007 11:20 AM

Quote:

Originally Posted by 8dayssooner (Post 1276805)

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	06-26-2007 11:42 AM

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

06-26-2007 11:49 AM

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	06-26-2007 11:52 AM

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

06-26-2007 11:57 AM

hushed

nix	06-26-2007 12:00 PM

eh?

DementedMindz

06-26-2007 12:35 PM

Quote:

Originally Posted by concepts (Post 1276881)

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

06-26-2007 03:44 PM

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	06-26-2007 06:34 PM

Quote:

Originally Posted by RedGTiVR6 (Post 1277029)

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

06-26-2007 07:15 PM

Hello Nix,

Quote:

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

06-26-2007 07:49 PM

Quote:

Originally Posted by nix (Post 1277146)

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

nix	06-26-2007 07:52 PM

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

06-26-2007 08:10 PM

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	06-28-2007 07:52 AM

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

rlpartida

06-28-2007 01:43 PM

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	06-28-2007 02:51 PM

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

Gooner

06-28-2007 09:01 PM

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	06-29-2007 02:16 AM

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

06-29-2007 04:29 AM

thanks, fixed

nix	06-29-2007 05:31 AM

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

Seiyaboy

06-29-2007 05:47 AM

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

nix	06-29-2007 06:20 AM

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

GrendelKhan{TSU

06-29-2007 11:52 AM

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	06-29-2007 01:08 PM

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

daystorm

06-29-2007 01:38 PM

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?

All times are GMT. The time now is 06:28 AM.

Page 1 of 2

Show 40 post(s) from this thread on one page

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01495 seconds Memory Usage 1,830KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)bbcode_code_printable (7)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: