LightBox

AlexL · August 2007

LightBox

HoTWire · August 2007

Thanks for doing that,.. I had previously hacked it into my Vanilla install my editing the php for the header .. I'm trying to get together an add-in that will resize images down to a certain size when displaying them on comments, create a lightbox link that will display the full image. I'm having issues with getting surrounding images with a href= . But then again I'm no php programmer.

Stash · August 2007

Best way to do what you want HoTWire would be to extend the Inline Images extension. Currently you can use Thickbox, but I'm sure it wouldn't be too difficult to add LightBox in there as an option as well.

AlexL · August 2007

I've already extended lightbox with ajax and iframe capabilities and filesize is also much smaller. gonna release it soon @HoTWire for resizing images you should use gd2 or imagemagic (with cache). allthough for an extension gd2 is better I believe since more people have it

HoTWire · August 2007

I don't want to actually resize the images onto the server, I want to just visual resize them with height and width settings. I've managed to do this (muddling my way though php, I'm a .NET programmer by trade (sorry :) )).. My problem is that I want to take the < img src="image.jpg" width="400" > tag and wrap it in an anchor tag so it'll read < a href="image.jpg" rel="lightbox" >< img src="image.jpg" width="400" >< /a > that way the image will appear shrunk on the page, but open instantly in lightbox when clicked. I've seen some phpBB based boards doing this already. I can't work out the best/easiest way to do this.

Stash · August 2007

I take it this 400 width image is really something like 800px wide? If so, it's going to look horrible. I can't help you with the code to do what you want to do, but I can tell you that it will look pretty nasty, since in browser image resizing — for want of a better word — sucks. It will also potentially make image heavy pages/discussions/posts very slow to download for people on slower connections and potentially waste a lot of your bandwidth.

Is there any particular reason you don't want thumbnails created from images?

AlexL · August 2007

see LightGallery extension! it does pretty much what you are talking about (resizing in php, creating thumbnail... change this to 400px width) maybe you can use it or at least some code // edit: or if you *really* *need* to have it without thumbnails you can wrap img tags with for example class=lightbox_image in <a> tags by using js / prototype. tell me if you want the code

HoTWire · August 2007

@[-Stash-] "Is there any particular reason you don't want thumbnails created from images?" : Server space, my forum has many many image posts (its for modified classic cars) and the load would cripple my server.

@AxelL : I *really* do *need* to have it without thumbnails

If you can pass on the code that would be great

The lightbox extension is one of my favourites so far.

You can see it in action here* ignore the website name it is SFW

Just a forum for wheels. It looks so much neater

AlexL · August 2007

it took the page 24.160 seconds to load on my 3 mbit connection.
so once again: you realize this will stay the same and images will look like crap if you use width and height tags in

?

btw. try using rel=lightbox[postid] or something. or at least rel="lightbox[cars]". just try it and you will see what it does

//edit: add this to the bottom of your page. after all the <img> tags!
now all you have to do is insert your images with <img src="whatever" class="lightbox">

<script>

var a = $$('img.lightbox');

a.each(function (s) {
	Event.observe(s, 'load', function() {
		// damn bug!? this results in crap
		// new Insertion.Before(s, "<a href='" + this.src + "' rel='lightbox[cars]'>");
		// new Insertion.After(s, "he</a>lalala ");
		
		// alright, let's do it this way:
		s.hide();
		new Insertion.After(s,  "<a href='" + this.src + "' rel='lightbox[cars]'>" +
					"<img src='" + this.src + "' width=" + (this.width / 10) + " height=" + (this.height / 10) + ">" +
					"</a>");
	});
});
		
</script>

HoTWire · August 2007

@AlexL Thanks, you are my hero. The thing is the page would take the same time to load anyway because people will post up the images regardless of their size, with the resizing it will now look neater.. and with adding the lightbox[cars] as the rel value it actually turns every picture thread into a gallery. Very cool. From my point of view :)

Minisweeper · August 2007

You cite server resource as a reason for not thumbnailing - do you realise that by not thumbnailing you are increasing your bandwidth useage significantly? In my experience that's a more costly resource than storage..

Stash · August 2007

Reading #10, I honestly think he doesn't understand the mechanics of it...

AlexL · August 2007

is the bug I mentioned really a bug or some strange feature?

new Insertion.Before(s, "<a href='" + this.src + "' rel='lightbox[cars]'>");
new Insertion.After(s, "he</a>lalala ");

with s being the <img> tag, it generates: <a href="..." rel="..."></a><img ...>helalala

HoTWire · August 2007

@#11 and #12 : Here is an example post from my current proboards hosted forum :

The images are all hotlinked from other sites. I'd need a script that would copy all the hotlinked images onto my server and then thumbnail them, which would use up both server resources in processing and space on my file system, which I tend to like to use for my own galleries and videos (which other people hotlink on their forums). The resizing is only to make for visual neatness, not to eliminate the bandwidth used to grab the picture. This images are going to get posted regardless of original size in extreme cases as badly as this...

Hotlinking works within our community also as other web site owners check their logs and see who is linking images and occasionally pop in and say hi, so for me that is reason enough not to re-host the images on my server.

With the best part of 400,000 posts and over 3,000 members combined with over 10 years of professional web development experience (albeit in asp and .NET not php) I'd like to think I understand the issues at hand.

But this has gone violently off track.

AlexL : It looks like unexpected behaviour to me. Prototypes documentation would imply that it should work how you are expecting it to. Is 's' the id of the object you are passing or a reference to the object itself?

I wonder if it is possible to calculate the "size" of a thread and stick that on the discussions page so people know if a thread is large or not. I know I could do it in Asp.net, but not how to do it php

Stash · August 2007

OK, my apologies. I think it was because this functionality was requested for this extension, which I believe it is not the job of to handle.

I think this is really the job for an entirely new extension that could then tie into the fancy effects of Lightbox and Thickbox as InlineImages does (for Thickbox only currently). Perhaps it would be worth putting the reasons for wanting it in a new thread requesting a new extension? As far as I know there isn't an extension which currently does wha tyou're asking for, but it would certainly be nice to have one

Could be called Hotlinked Image Resizer or something similar

Again, sorry for misunderstanding your intent.

AlexL · August 2007

s is an object reference, but this sort of doesn't matter as prototype accepts id or reference in all function calls
btw, I'm using s.hide() so it hardly can be just the id ;-)

HoTWire · August 2007

doh! didn't spot the s.hide()

I've read that the Prototype Insertion routines aren't as efficient as they could be, maybe they are a little buggy too .. as [-Stash-] says, this is probably best discussed in another extension as your Lightbox one works a treat

LightBox

Comments