Grow your CSS skills. Land your dream job.

Animated GIF replacement?

  • # May 14, 2009 at 8:11 pm

    I was wondering what people are using instead of animated GIFs. I’d like to stay away from Flash if at all possible. Didn’t know if there were some javascripts out there that would be helpful. The simpler the better.

    Thanks!

    # May 14, 2009 at 8:13 pm

    I suppose it depends on what you want to do, but I’ve heard simple Flash stuff is pretty easy. (I don’t know anything about Flash at all, nor shall I ever!)

    # May 14, 2009 at 8:29 pm

    Yeah, I’m not a big fan of Flash. Plus I would like it to be viewable on an iPhone.

    # May 14, 2009 at 9:17 pm

    What are you trying to accomplish?

    # May 14, 2009 at 10:54 pm

    I need to display a series of photos with a transition between each that is a non-Flash, non-animated GIF solution.

    # May 14, 2009 at 11:12 pm

    http://malsup.com/jquery/cycle/

    # May 15, 2009 at 2:09 am

    Sweet. Jquery is definitely the next item on my "got to learn" list. Those are super cool.

    # May 15, 2009 at 7:26 am

    You don’t really need to learn jQuery to use plugins like this one, it’s pretty much self-contained, a simple ‘view source’ will tell you all you need to know.

    If you are interested in learning jQuery here’s a nice little primer http://spyrestudios.com/simple-guide-how-to-get-started-with-jquery/ and then there’s a 15 part screencast series on themeforest beginning with this http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/

    # May 15, 2009 at 5:11 pm
    "apostrophe" wrote:

    That’s more like I’m looking for. Thanks! Now… if I can only get it working. I download the various scrpits, copied them to the root level of my server. I also put my html file there (root level) and a folder of pics. I copied the code they used on the demo site, modified with my pic names, and uploaded. It just displays my images in a row, with no motion. You can see here:

    http://www.chinnr.com/pictest.html

    I’m probably missing something easy, but I don’t know what it is. Any suggestions?

    Thanks for the help!

    # May 15, 2009 at 5:47 pm

    Have you actually downloaded jQuery? Otherwise you can link direct to the google hosted version.
    You also have a lot of unneccessary code in there that relates to other examples.
    Should look something like this:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">







    If that doesn’t work then rename "jquery.cycle.lite.js?v1.0" to "jquery.cycle.lite.js" and change the link in the head to match (I have had a problem with that before).

    # May 15, 2009 at 9:21 pm

    apostrophe,

    You the MAN! Thanks so much for your help! I do have jQuery at the root of my server, but I like the idea of using the Google hosted version.

    There was a naming isssue with the cycle lite js file, so I got that corrected. Then I used your code and everything worked. I knew I had a lot of code in there I didn’t need, but I was trying lots of different things – that probably made it worse though I’m guessing. I think the other key that I was missing was the CSS you added.

    Thanks again for your help!

    Once again CSS Tricks saves my bacon!

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

You must be logged in to reply to this topic.

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