About OnLoad

[Luys]

1) Script Title: jQuery Image Magnify

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...agemagnify.htm

3) Describe problem:

Hi all!

I'm looking desperately to make that once the page has loaded, following a short space of time, zoomed on a single image, for example, with the id=sarah. I tried again and again all the way imaginable, but given my limited experience, obviously without any success. It's like a puzzle to me!

Could someone tell me what is the most clean procedure to achieve this? Best with parameter options and, if possible, with the timeout regulation.

Thanks in advance for your answers.

Luys

[bluewalrus]

So you want the an image with the id sarah to load zoomed in then after a given time span to reduce to it's normal time, to zoom in when the page loads and then zoom out after a given time, or something else?


I think jquerys delay maybe useful here if it is one of the two options I've mentioned.

http://api.jquery.com/delay/

[Luys]

Thank you bluewalrus for your help.

My brain is like a 386 8MHz processor so when I have all the pieces of puzzle
I will look to compose the whole of the best. The issue of delay is the following:

First obstacle, I think the code is constructed over the "OnClick" action, but surely there is a way to get around it by calling a function or, in the worst case, through the execution of a link guided by this (<a href=#" rel="magnify[sarah]">Zoom in on Sarah</a>).

My goal is to open the image with id=sarah zoomed without user intervention, that is, automatically at load of the page.
Then the image is, initially, closed by hand (OnClick).
If it is possible to set a little delay before the animation, I think that gives a soft and pleasant impression to visitors ("pause + magnify duration"), especially if repeated in a number of pages.
Well, if I can make it automatically open a particular image, perhaps I might consider too close it after a timeout.

Thanks again.

Luys

[jscheuer1]

Put this in the head of your page, after the external script tag for the jquery.magnifier.js file:

<script type="text/javascript">
(function($){
	$(window).load(function(){
		$('#sarah').trigger('click.magnify');
	});
})(jQuery);
</script>

Where sarah is the id of the image you want to magnify. It must already be setup as a class="magnify" image.

[Luys]

Certainly an elegant solution.
2jscheuer1: thank you very much, John, for leading me by the hand to the end of the road. I will continue my own ...

"Gràcies"

Luys

[djr33]

Hola, i benvingut a Dynamic Drive, Luys!

Once your question has been answered, you can edit the original post and set it to "Resolved".

[Luys]

Hi all!

I have to finally resolve a small fringe related to this thread, so I explain below the difficulty with which I am, in the hope that someone will be good enough to help me out.

As expected, it has become evident (with some large images and landscape orientation) that this automatic launch is in some way obstructive to lowest screen resolutions.

I need to perfect this code to run the "onload jquery function" ONLY if the client's screen resolution is, in short, greater than or equal to 1280 x 1024. Or if you prefer, DO NOTHING if x <= 1280 AND y <= 960 pixels.
My lack of language jquery is absolute, so I dare not try anything myself.

Of course, I'm talking about a final solution that is fully correct and compatible with different browsers and platforms.

Once more, thanks in advance for your replies.

Luys

[jscheuer1]

I'm not sure if what you're talking about isn't resolution but dimensions. Usually the two go together, but not always. Isn't it the screen size that's the issue anyway, whether or not the larger image will fit? And the screen size isn't always the window size. If you open the page up on a large screen in a small window, does it have the same problem?

I'd try:

<script type="text/javascript">
(function($){
	$(window).load(function(){
		var w = $(window);
		if(w.width() > 1279 && w.height() > 959){
			$('#sarah').trigger('click.magnify');
		}
	});
})(jQuery);
</script>

[Luys]

Thank you very much, John, for your invaluable help! Once more, I have no doubt that your code will behave like a glove to my needs!

If I understand correctly, "resolution" is the native proportions of my desktop screen and "dimensions" refers to the size of client's window like me while browsing locally again and again the same web page with several "setmybrowsersize" codes for testing purposes.

I think that in my case both things are the same: the pages with the JQuery Image Magnify code embedded are ALWAYS a popup MAXIMIZED window, to optimize old screens and have more canvas for drawing...

"Moltes gràcies"

Luys

[Luys]

Hi!

Unfortunately, once tested the new code in two different screen resolutions (the native 1920 x 1080 and the ajusted for comparison 1280 x 800) it seems only effective for IE (8). Three other browsers tested on the Windows platform (Mozilla Firefox, Google Chrome and Safari) even lose their initial good behavior and always "do nothing".

I do not know if it would be feasible to work with two variables, for simplicity, that seem to go well with most of the browsers:

var Screenwidth=screen.width;
var Screenheight=screen.height;

(????) because, writing a new code for example with clientwidth/height for IE and innerwidth/height for all other browser be rather more complicated, if the real solution works with these concepts...

Thanks again.

Luys