I am still learning, Peter :(

(no but really, I've only been doing web-based programming since around October last year)

Thank you! :D

Huh?

WTF sort of stuff were you doing before that then?


Whilst I'm generally not opposed to people re-inventing wheels for learning purposes, I'd probably still say it's better to learn from and extend an existing solution.

If more people (both new and experienced) spend more time on improving current stuff, there'd be more half-decent software around, instead of not only everything being crap, but it being even harder to find the slightly less crap stuff amongst all the unfinished experiments. :(


/me stops ranting and goes to find food.

Working in Blockbuster then Jessops, then doing data-entry, then fixing HMRC computers, then attempting to work out what I was supposed to be doing in an understaffed and underexplained repair team fixing Tesco hardware (and by 'hardware' I mean everything from receipt printers to IBM RS/6000s to those 'pay at pump' things they have in petrol stations).

No I meant programming-wise - I thought you'd written lots of stuff?

But since you brought it up... are you the reason the fecking petrol pump never has any bloody receipts available!? :@

Hah, no, I was only dealing with them for a month or so before I left. I don't think we ever did figure out what we were supposed to do with them. They didn't even have a manufacturer label on them. I'm not even sure they were supplied by Fujitsu in the first place.

 

I have done programming in the past, yes, but that was about 10 years ago, and, except for one program, never anything involving a network.

Hello. I added another thing: image captions! They work like this:

<a href="big_img.jpg"
  rel="quickslide"
  title="THIS IS A CAPTION, RIGHT HERE"
>foobar</a>

I also changed the way the loading spinner thing is handled – there's no need to specify it in the options any more; instead you just use CSS:

#quickslide-popup-box.loading {
  background-image: url("loading-spinner.gif");
  background-position: center;
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
}

http://caerphoto.com/quickslide/

I just thought I'd add that it seems to work as I'd expect it to on my Android tablet on the stock browser. So thumbs up!

Heh :D

It also only started working with the 'fixed' thing on iOS since version 5 - before that I think mobile Safari just displayed it as position: absolute instead.

Quick question. Not sure if it's my end (yj). Checked in Chrome 18 and FF 11 on Win7 and if an image used is a transparent PNG you can still see the loading spinner after it is loaded. Is it a case of the image generally hiding the spinner?

 

I've also noticed that FF doesn't resample scalled PNGs like Chrome does, eugh.

The spinner isn't removed once the image is loaded, so as you've noticed, if the image is transparent in the middle you can still see the spinner :$

I'll have a go at fixing it now.

It's not personally a problem. I'll make my PNGs have a background. They'll look better with one. Just something I noticed since the images I've been exporting as PNGs automatically have no background.

Updated. The box gets a 'loaded' class now once the image has fully loaded.

http://www.caerphoto.com/quickslide/quickslide.zip

Have you thought about adding the ability to group images into sets or albums so it's possible to navigate through them? Preferably with direction keys.

 

I guess replicating lightbox abilities but with your better resizing.

I have thought about such a thing, aye, but it complicates things rather a lot, I think. It's been a while since I've looked at the JS code, so I couldn't tell you what it'd involve right now.

That's fair enough.

 

I've looked into similar things in the past for gallery navigation and using direction keys as a way of clicking onto next and previous and it looked messy to me, I could never get anything to work, but then again my coding clevers aren't exactly great!

The main issue is determining what the 'Next' and 'Previous' images are – there's no easy way to figure it out. I might have a look to see how other light box things have done it.

Without having any idea of the context of this, you identify them by checking the class and rel attributes - i.e. [class=nav][rel=next] and [class=nav][rel=prev] - which is perfectly easy to do?

No, I mean how do you determine which image to show when the user clicks Next or Previous? From what I remember, one implementation had an option to specify list of 'containers', which would be one way to group images/links.

:? You seem to be making a mountain out of a wormhill.

You show the image that is the immediate sibling of the current one.

If you are at the end of a container you do one of three things:

1) nothing (maybe display some "end" message/indication)
2) loop back to other end of current container
3) proceed to first/last image of next/prev container

Which of those three you do would be a configuration option, and/or dependant on what key the user presses.

For example:

function determineNextChild( container )
{
	if ( container.hasNextChild() ) return container.nextChild()

	switch ( EndImageBehaviour )
	{
		case 'nothing' : return null
		case 'loop'    : return container.firstChild()
		case 'proceed' : return container.nextContainer().firstChild()
		default : error("Invalid EndImageBehaviour setting")
	}

}

To identify the containers, you simply have an array of dom nodes/pointers. These are provided either as a single parent element (if the HTML is all in one piece), and/or as an array of individual containers (if they are separated/mixed in the HTML), in both cases either using CSS selectors, or as raw DOM nodes.

ContainerParent : document.getElementById('MyContainers')

Containers : ['#album1','#album3','.otheralbums:not(#al7)']

etc.