IE is more diabolically cruel than waterboarding...

Heh. Turned out that assigning a new src to an existing image object doesn't update the width and height properties in IE9. Fixed it now, anyway (by creating a new image object each time).

That's reet nice is that. I shall use that in future whenever I have to do such things.

Nice work.

If you expand this (I presume you'll want to add fading in and out? People seem to expect that these days) .. try not to go too far and end up being what lightbox is. This should be the "I just want it to work without a lot of fucking around" option. So not too many settings and tasteful defaults.

</telling you to do stuff you probably already knew>

Fading, hmm. Dunno*. Higher priority is stuff like "Next" and "Previous" links, and maybe a close button or something (since it's not immediately obvious how to hide the popup, and in my experience clicking popups tends to make bad things happen).

I would also like to do the thing Lightbox does where you can have more than one gallery per page, although I dunno how useful that'd be. Another thing that might be useful is adding a 'darkener' thing to dim the rest of the page.

edit: I also had an idea to examine the link to see if it contained a thumbnail image, and use that as a placeholder while the full image loads.

I've just updated it btw, so that it actually scales properly (i.e. maintaining aspect ratio).

* but only because I don't know how I'd do it :$ I'll have to look at how jQuery manages it - perhaps with some fiddling with transparency properties and such.

Why not just use jquery? I know you want to keep it minimal but jquery's hardly massive.

I've never seen a close button done elegantly. I agree that it should be there but ... it always just looks ugly.

Separate galleries would be handy, yeah. But please make them easier to manage than lightbox does :((

Maybe have an array in settings where you specify the id you will use in galleries or something? I dunno, needs to be something 'upfront' like that. I can't remember how lightbox does it but I remember it being unintuitive as all fuck.

Lightbox uses rel="lightbox[galleryname]" to mark individual galleries. Doesn't seem all that difficult to me, but then I've not actually tried using it.

Maybe a better way would be to allow the user to specify arbitrary CSS selectors to mark the containers for each gallery or something, like this:

QuickSlideConfig = {
    galleries: ["#main-gallery", ".other-gallery", "ul.gallery-list>li>div"]
}

Could be an issue if any of those selectors returns more than one container element, but document.querySelector() could be used to only get the first of them.

As for jQuery, yeah, it's not huge, but it's still 30K or so after gzip (compared to 1.3K or so for quickslide-min.js gzipped, 2.9K otherwise), and I don't want to force any dependencies - I've been trying to make the code as unobtrusive as possible. On the other hand, I could quite easily add an option to enable the use of jQuery for stuff like animation, so it'd be there if the user wants it. It depends how difficult it'd be to do the animation, really, and what kind of animations should be included.

Oh ok that's fine then. I think it used to work differently. Or I'm thinking of something else. I think either way would be fine then but your way would be preferable to me.

I'd just use jquery. I mean, it's pretty proven and it seems pointless replicating the work they've done. This is going to be used displaying images, each of which is probably 10x as big as including jquery.

Part of the reason I did this without using jQuery was just to get some practice at doing DOM stuff the native way - it's been bothering me slightly for a while that I didn't really know how to do it.

I think converting quickslide to depend on jQuery would save me about 50 lines of code at the moment. I'll investigate animation tomorrow.

Fair enough then.

Also if you do use it, please let me know if it does unexpected things :$

I am going to bed now, wherein I shall ponder whether to make jQuery a requirement for this project :C

So it doesn't autoscale a photo to the size of the popup?

 

Got it set at 800x600 as per the demo and all I get is the 100% zoomed image.

Ah, no, it won't make images bigger, although I can make it do that if you want. Why do you want to do that? They'll look all blurry/pixelly :S

Actually I'd best check if the max size thing actually works :$

edit: works here, although I did notice that I missed a ; off the end of the example config, which might cause some browsers to reject it. It should look something like this:

QuickSlideConfig = {
  loading_spinner_url = "loading-spinner.gif",
  max_width: 800,
  max_height: 600,
  auto_fit: true };

And to clarify, the size of the popup is determined by the the size of the image first, then any max_width/size settings are applied, then if the auto_fit option is set the image is scaled to fit the window, if necessary.

I want to make a large image smaller.

So if I have this at the top of my page...

QuickSlideConfig = {
  loading_spinner_url = "loading-spinner.gif",
  max_width: 320,
  max_height: 240,
  auto_fit: true };

and this at the bottom

<script src="quickslide.js"></script>

With this in the middle

<a rel="quickslide" href="/folder/image.jpg"><img src="/folder/image.jpg" alt="" width="300" /></a>

Where the "image.jpg" is the same file/image for both and is 5MP.

Should the 5MP image show as ~320x240 in the popup?

It should, yes.

It doesn't :(

 

Chrome 11.0.696.71 and FF 4.0.1

 

The popup seems to be working but the image is 100% size and not scaled at all.
I'll see if I can get you any more details.

By 100% size, you mean it's displaying at around 2592 × 1944, i.e.a gigantic popup covering the entire browser window?

I wonder if it's related to the use of full-size images as thumbnails. I shall investigate.

edit: you are putting the config stuff inside <script> tags, aren't you?

Yes, showing as gigantic popup covering entire window, and yes it's inside <script> tags. I should've added the tags on here.

 

The content was being pulled from an MySQL db by PHP but I've just tried it with one of the same image files in a plain HTML file and it still happens.

Here's an example.

Oh, I see the problem. My fault :$

The browser is tripping over the config, because in my example I have

loading_spinner_url = "loading-spinner.gif",

when it should be:

loading_spinner_url: "loading-spinner.gif",

(a : not an = sign)

I've also uploaded a newer version of the code which makes the scaling a bit simpler.