PDA

View Full Version : Resolved About OnLoad



Luys
01-19-2011, 01:59 PM
1) Script Title: jQuery Image Magnify

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/imagemagnify.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! :confused:

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
01-19-2011, 02:33 PM
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
01-20-2011, 11:07 AM
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
01-20-2011, 02:18 PM
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
01-20-2011, 10:16 PM
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
01-21-2011, 12:54 AM
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
04-15-2011, 11:02 AM
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
04-16-2011, 05:44 PM
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
04-16-2011, 06:34 PM
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
04-17-2011, 02:58 PM
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

jscheuer1
04-17-2011, 03:22 PM
I find that hard to understand. Using jQuery is supposed to normalize just such things across browser and OS platforms, and usually does.

Could you give me a link to the page using the code from my last post so I can check it out?

Luys
04-18-2011, 05:56 PM
2jscheuer1:

Well, I checked again the page test and found in the source code a "404 error", i.e., there was a reference to a nonexistent image that should have been eliminated as is the case in general.
With the old OnLoad code there was not a problem at all, but with the new version something changed and the onload event could not perform its function properly because there was no a "full" page load. Right now, I browse always via a web server simulator (about Ajax), it is the last version but also an old one, five years, and I think some things don't understand correctly: I have as return in all cases a "do nothing" action with the new OnLoad code. First lesson: work always, for testing purposes, with the cleanest page as possible...

So I make a minimal and reduced version, one page with the old code and a second page with the new one: the only browsers that locally lose the onload effect are Opera and Google Chrome (do nothing). IE, Firefox and Safari are Ok.
If I call a popup window greater than or equal to 1280 x 960, the onload event triggers the desired effect.

Thank you so much!

Luys