Grow your CSS skills. Land your dream job.

Screen Saver Style image motion

  • # May 24, 2009 at 5:59 pm

    Hey all,

    I am posting this here only because I figured it is a tip or trick or can be. ;)

    many of you I am sure are familiar with the screen saver included with Mac OSX you know the picture one that slowly zooms in on a picture then fades out into another picture that may slowly zoom in or pan the next picture and it just cycles through the pictures in the folder specified…?

    As stated in other post I am learning JQurery. and I have seen elements of this in other uses but never together so I am assuming that it can be done.

    Does anyone know where I can find this plugin or think that they could make one?

    Many uses for this… Portfolios, gallery, headers, banners, etc. Me? well I am working on a site for a relative (I am sure you all have been there, This one I owe money too so it is not totally a FREEBE.) He restores and remodels homes so I am using it as an intro graphic of sorts that will also act as a quickie gallery on the home page.

    # May 25, 2009 at 3:24 am

    I found something….

    It is exactly what I was looking for… you can check it out here…http://www.gruppo4.com/~tobia/cross-slide.shtml

    However… in my jQuery infantile mind I am having a hard time getting it to work… What I don’t understand is that the plugin creator makes the following comment…

    Quote:
    You will also need jQuery itself, of course. Don’t forget to invoke CrossSlide inside a DOM-ready handler, like every other visual effect:

    then it list the following code

    Code:
    jQuery(function($) {
    //put your jQuery code here
    });

    Okay… I have the Plugin code and ofcourse I have the latest jQuery and I have made 3 sites now using jQuery elements so why is it that this is the first time I am learning about DOM-Ready Handlers? and where do I put the code mentioned and what jquery code is he talking about….

    :oops: :? :?:

    Any instruction on this would be greatly appreciated.

    # May 25, 2009 at 6:25 am
    Code:
    jQuery(function($) {
    //put your jQuery code here
    });

    That is the DOM-ready handler. :D

    Just view source on the example page and you will see how to use it.
    Nice plugin btw.

    # May 25, 2009 at 2:08 pm

    That’s a sweet plugin! *bookmarked*

    # May 25, 2009 at 3:19 pm

    Well after spending 2 more hours I got it to work… don’t ask me how i did it… I still have no idea as to what the heck a DOM-Ready Handler is but so far what I wanted to accomplish is being accomplished. now for a little more bling and I will post in the website gallery what I have done.

    In the Mean time if anyone would care to enlighten or point me in the direction to where I can find out what the DOM is (the resources I found boggle my mind – just leaves me asking more questions :? )

    Many thanks in advance

    # May 25, 2009 at 4:15 pm

    I’ll say it again

    Code:
    jQuery(function($) {
    //put your jQuery code here
    });

    That IS the DOM-ready handler.

    jQuery(function($) is shorthand for jQuery(document).ready(function() which means as soon as the html has finished loading then run the script. In other words ‘when the Dom is ready, do something’

    Maybe the jQuery docs will help http://docs.jquery.com/How_jQuery_Works

    # May 25, 2009 at 11:14 pm

    Thanks for the link… I have read it three times and understand that you need to have it. I am embarrassed to say I still don’t get the DOM part. I understand that there is a DOM and you need to put this code in there so it will work…. But if you where to ask me what is the DOM where does it live and why it is there… I would not be able to tell you.

    I guess it isn’t important for me to understand to make nice websites… :? ;)

    # May 26, 2009 at 2:55 pm

    okay… I have created a dev site for this project… I’m a Mac with out parallels so i don’t look at IE until I am excited about what FireFox, Safari, and Opera are showing me or until my client tells me they don’t see what i am talking about.

    This one baffles me because other pages that I have done using javascript show up on IE and this shows up on all the other browsers on a PC and MAC so why not IE? What have I done wrong?

    http://guybiggsconstruction.designedbyjeff.com

    Yea it is one of those sites… you know the FREE BE for the FAMILY. But he is one of my favorite uncles so what do you do? Your Best… Right?

    I also have another issue on IE that is not showing up on any of the others but will have to post it in the CSS section of this forum.

    My request is simple can you look at the site in IE and tell me what I might have done wrong or how I can tweak it to work in IE.

    Many thanks in advance.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".