Forum user: gnutix

Thank you very much ! I was really waitin' for it :)

The problem is that the width of the images are variables. I can't fix it.

It was just a writing error when I made my post. In the code I use commas.

And when you have a problem like this one, what do you do ?

http://flowplayer.org/tools/forum/40/46564

I would be glad to hear an answer too. This causes me troubles for the cached elements on serverside... :/

Hello everybody,

I am using the overlay functionality of jQuery Tools 1.2.3 for the preview of fullsize images in a gallery.

My problem is that the images could be bigger than the user's browser size. So I have to be able to scroll though the overlay.

I tried to set the option "fixed: false;", but the overlay's position and size have broken, as you can see in the screenshots below.

The screenshots :

1. Correct: fixed: true;
2. Broken : fixed: false;

My HTML5 generated code :

<figure>

	<!-- The thumbnail -->
	<a href="gallery/images/01.jpg" rel="#image_1">
		<img src="gallery/thumbnails/01.jpg"
			alt="Image 1" width="150" height="125">
	</a>

	<!-- The overlay container -->
	<details id="image_1" style="width: 640px; height: 480px;">

		<!-- The fullsize image (loaded dynamically) -->
		<img src="gallery/images/01.jpg"
			alt="Image 1" width="640" height="480">
	</details>
</figure>

<figure>
	<!-- Another element... -->
</figure>

My CSS code :

/* The overlay */
figure details {
	display: none;

	/* Set minimum sizes */
	min-width: 200px; min-height: 200px;

	/* CSS3 Shadow */
	-moz-box-shadow: 0 0 90px 5px #000; -webkit-box-shadow: 0 0 90px #000;
}

/* The close button */
figure details a.close {

	/* Positioning */
	position: absolute;
	top: -20px; right: -38px;
	
	/* Styles */
	width: 35px; height: 35px;
	border: none;
	cursor: pointer;

	/* Put at the top of all elements */
	z-index: 10001;
}

And finally, my JS code :

$('figure a[rel]').overlay({

	// Configuration
	top: 'center',
	speed: 'fast',

	// Effects
	effect: 'apple',
	mask: { color: '#0A0E33', opacity: 1 },

	/* Position...
	fixed: true;
	fixed: false;
	*/
	
	// Load the fullsize image dynamically to prevent a slower page loading
	onBeforeLoad: function() {
		var element = this.getTrigger();

		// We load the image
		$('figure details' + element.attr('rel')).append(
			$('<img>').attr({
				src: element.attr('href'),
				alt: $(element).children('img').attr('alt'),

				// We get the sizes from the CSS
				width: element.attr('width'),
				height: element.attr('height')
			})
		);
	}
});

So... If anybody have an idea of the why or how to solve this, my ears are wide open.

Thanks you very much for your answers.

Cordially, gnutix.