1 (edited by YonasH 2009-01-27 23:32)

Topic: [release] Display posts images in Slimbox

Hello

I was fighting with this extension for few evenings wink All the time there was some issue with javascript's image processing. Finally I did it, and on my machine it's working perfectly.
Extension adds slimbox script to your forum. See how slimbox is working here.
What is it doing:
1. It resize all images to fit on your screen (always, even vertically!)
2. If resized image is smaller than original one for more than 10% - sets a slimbox.
3. Slimbox images have "move" cursor and showing original resolution in title (hover).
4. Extension is removing links to common image hosting sites too. Only default links (like "http://imageshack.us/")***. Links to larger files stays untouched and slimbox is not set up then.

***(currently there is only 2 of them: imageshack.us and fotosik.pl. You can edit this list yourself in slimbox2.js file; please report here other common links - I will add them in next version)

It requires jQuery library! Use this extension: jquery_y_1.3.zip
(I will use it in many of my extensions in future)

===========================================================

Version 1.0
postimg_slimbox_1.0.zip





edit:
omg! big_smile I wrote horizontally, instead of vertically wink fixed, sorry wink

YonasH's repository + Extensions Directory = PunBB Extensions Online Library (in progress....)

Away. I will be back soon.

Re: [release] Display posts images in Slimbox

An option to add those common image hosting sites would be helpful, no?

Re: [release] Display posts images in Slimbox

I'll do this in next version

YonasH's repository + Extensions Directory = PunBB Extensions Online Library (in progress....)

Away. I will be back soon.

4 (edited by KeyDog 2009-01-28 01:08)

Re: [release] Display posts images in Slimbox

VERY cool! Like it

DEMO here: http://punbb-c.keydogbb.info/viewtopic.php?id=3

click on the image and you see it expand to full screen smile

thanks yonas. added to database smile


now all we need is possibility for people to upload to the actual forum - then we're talking an even sexier feature! I like those kind of effects big_smile sucker for them haha smile

5 (edited by KeyDog 2009-01-28 09:14)

Re: [release] Display posts images in Slimbox

btw:

a very usefull feature would be to able change default slimbox size

something in admin section letting you set
width
height
for the images in your forum

and maybe also
having image surrounded by black borders
(or being able to choose color border so people realize it's a link)

unless I missed that

that way assuming I'm uploading 6 screenshots in a post they'd all neatly appear next to each other like a mini gallery... just a thought...

Re: [release] Display posts images in Slimbox

BUG (I think)
I cannot see any way to close the image apart from presing ESC but many users will not think to press escape and so they'll be stuck. I guess there is a little cross in the top-right of the image (?) but my browser doesn't let me scroll across to see it. That's with google chrome AND firefox.

Re: [release] Display posts images in Slimbox

KeyDog wrote:

a very usefull feature would be to able change default slimbox size
something in admin section letting you set width & height for the images in your forum

what you mean? settings for images or slimbox?

KeyDog wrote:

and maybe also having image surrounded by black borders

image or slimbox background?

KeyDog wrote:

that way assuming I'm uploading 6 screenshots in a post they'd all neatly appear next to each other like a mini gallery... just a thought...

yeah smile that would be nice. the problem is, that sometimes img should be bigger (like party posters on my forum). maybe new tag in bbcode? like [slim] wink

YonasH's repository + Extensions Directory = PunBB Extensions Online Library (in progress....)

Away. I will be back soon.

8 (edited by KeyDog 2009-01-28 11:17)

Re: [release] Display posts images in Slimbox

YonasH wrote:

what you mean? settings for images or slimbox?

I meant: If someone's uploading / adding images into their post I'd - as admin - be able to choose what size it will be showing as. You saw on that http://www.digitalia.be/software/slimbox2 site they have the images as little boxes. Well I'd like to be able to choose my image box size

YonasH wrote:

image or slimbox background?

on that demo forum I was testing I couldn't easily tell that if I click on it, it will get bigger... My question is: How can I set it so that it has something (again) like that http://www.digitalia.be/software/slimbox2 site with a black border box around the resized image smile


YonasH wrote:

the problem is, that sometimes img should be bigger (like party posters on my forum). maybe new tag in bbcode? like [slim]

hm - see your point big_smile will have to think about that

EDIT: thought about - you could copy paste your code and create a "default resize images  slimbox" - so a different version and add those above features big_smile then check out which gets more downloads smile - but as you made it for your site and that need is covered I understand you not being to keen to do that aswell immediately smile

Re: [release] Display posts images in Slimbox

Oh and your extension could get some great coverage like this:
on this forum the devs or style makers could then post a topic "style screenshots" - and you'd see all the styles next to/under each other - like that people quickly can choose their favorite style based on colors and "small view" - then see it fullscreen. would be very cool!

I'd immediately add it to keydogbb.info for sure big_smile

10

Re: [release] Display posts images in Slimbox

It get bigger than my screen:
http://arch.kimag.es/share/35962870.jpg

11

Re: [release] Display posts images in Slimbox

hm well that was a silly quick screenshot i did of only part of my monitor - what your are showing is actually the entire gif smile it wasn't a print screen - but just portion of my monitor...

12

Re: [release] Display posts images in Slimbox

KeyDog wrote:

with a black border box around the resized image

this is quite easy wink I will do this in next version

@default image size
I think that there is no universal size which you can use everywhere on your forum (even set by you). There will be always some exception. I will try to add new bbcode tag "[slim]" and then let admins to set its start size. Then standard [img.] will be always big, and [slim] will be smaller. Of course I can add option to always display smaller image in [img.] tag (and then turn off [slim] one).
Generally it should look like:

Slimbox settings
post's images width   [ 200 ]
post's images height  [ 150 ]
        use [slim] tag   [x] - use those values only with new [slim] images tag, and leave [img.] image size untouched


@slimbox size
By default slimbox showing image in original size. I will dig for some "fit to screen" solution, or "drag and move" solution.
Maybe I'll even use different script. It's very easy now to switch.

YonasH's repository + Extensions Directory = PunBB Extensions Online Library (in progress....)

Away. I will be back soon.

13

Re: [release] Display posts images in Slimbox

esupergood wrote:

BUG (I think)
I cannot see any way to close the image apart from presing ESC but many users will not think to press escape and so they'll be stuck. I guess there is a little cross in the top-right of the image (?) but my browser doesn't let me scroll across to see it. That's with google chrome AND firefox.

You can click anywhere outside the slimbox. I will do all slimbox clickable in next release.

YonasH's repository + Extensions Directory = PunBB Extensions Online Library (in progress....)

Away. I will be back soon.

Re: [release] Display posts images in Slimbox

yes, a "click anywhere to close" function would be good
smile

15

Re: [release] Display posts images in Slimbox

YonasH wrote:
KeyDog wrote:

with a black border box around the resized image

this is quite easy  I will do this in next version

Ok just make sure that it's an option? Because maybe someone has black bg then wants white border - vice versa etc.
smile


YonasH wrote:

Then standard [img.] will be always big, and [slim] will be smaller. Of course I can add option to always display smaller image in [img.] tag (and then turn off [slim] one).

That would be perfect.

esupergood wrote:

yes, a "click anywhere to close" function would be good

I also imagine people using their pc to watch vids (example: youtube) are getting familiar with ESC button? (VLC and Divx Web Player both seem to assume people know or will try that when fullscreen) - Anyone stuck is either going to click mouse or press escape? But a discreet little X on hover probably would be good idea. Or just click makes it go away...

16

Re: [release] Display posts images in Slimbox

don't forget this yonash big_smile i'm really looking forward to this "improved" one smile (with slimboxes)

17

Re: [release] Display posts images in Slimbox

KeyDog wrote:

don't forget this yonash big_smile i'm really looking forward to this "improved" one smile (with slimboxes)

I will not wink I was doing couple other things. Now I need to improve Online Plus, Favorite Topic, Hide Online, and this one. Maybe in different order.

YonasH's repository + Extensions Directory = PunBB Extensions Online Library (in progress....)

Away. I will be back soon.

18

Re: [release] Display posts images in Slimbox

big_smile true. loads of good stuff been coming from you. no worries smile thx!

Re: [release] Display posts images in Slimbox

I wrote my own script to do the same thing: http://forums.programming-designs.com/t … op-thread/ (2nd post for example). But there's an issue with getting the light box to overlay the entire page in Opera (tried using a bunch of diff. methods to get full scroll height but it only gets viewport height).

The JS code is here: http://forums.programming-designs.com/i … gResize.js

If you could add the ability to display all post images in slimbox and also set a max width/height limit that would be great.

Programming Designs - Tech, programming, and web design blog
PD Forums - Using the latest and greatest PunBB 1.3 =)

20

Re: [release] Display posts images in Slimbox

I was looking for such a lightbox feature to include on my forum, this extension seems to be really great, thanks! smile

As it has already been told, something like a "click anywhere to close" would be perfect because when pictures are too big they fit the screen and the users won't understand how to get back to the post.

@ Programming-Designs, I viewed your example, but it doen't load the picture like it does in the KeyDog Demo, the image is displayed directly without the lightbox animation effect, is there a way to fix it?

Re: [release] Display posts images in Slimbox

Etoile wrote:

@ Programming-Designs, I viewed your example, but it doen't load the picture like it does in the KeyDog Demo, the image is displayed directly without the lightbox animation effect, is there a way to fix it?

Yea the animation is pretty easy. Might add it later.

Programming Designs - Tech, programming, and web design blog
PD Forums - Using the latest and greatest PunBB 1.3 =)

Re: [release] Display posts images in Slimbox

Programming-Designs wrote:

I wrote my own script to do the same thing: http://forums.programming-designs.com/t … op-thread/ (2nd post for example). But there's an issue with getting the light box to overlay the entire page in Opera (tried using a bunch of diff. methods to get full scroll height but it only gets viewport height).

The JS code is here: http://forums.programming-designs.com/i … gResize.js

If you could add the ability to display all post images in slimbox and also set a max width/height limit that would be great.

Hy

How can I use this script like your site (]http://forums.programming-designs.com/t … p-thread):
I copy this script link to /include/template/main.tpl

<div id="imgOverlay" style="width: 100%; height: 100%; cursor: pointer; background-color: #000; text-align: center; display: none; visibility: hidden; z-index: 999; position: absolute;"></div><div id="theImg" style="visibility: hidden; cursor: pointer; display: none; position: absolute; z-index: 1000;"></div>
<script type="text/javascript" src="/include/js/imgResize.js"></script>

But not working sad

What is the problem?

Sorry, I don't speek English very well.

Re: [release] Display posts images in Slimbox

it is very cool  extension !
thanks for  share  smile

24

Re: [release] Display posts images in Slimbox

This version by dimkalinux will work with fancy jquery:


http://www.mediafire.com/file/9vqdo65ej … 0.1.tar.gz

http://punbb.informer.com/wiki/_media/p … 0.1.tar.gz