Forums

chinnr

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!

TheDoc

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!)

chinnr

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

TheDoc

What are you trying to accomplish?

chinnr

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

apostrophe

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

AshtonSanders

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

apostrophe

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/

chinnr

"apostrophe" said:
http://malsup.com/jquery/cycle/

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!

apostrophe

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:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
<title>Untitled Document</title>

<style type=\"text/css\">
      #myslides {
           margin: 20px auto;
           width: 300px;
           height: 356px;
       }
</style>
<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></script>
<script type=\"text/javascript\" src=\"jquery.cycle.lite.js?v1.0\"></script>
<script type=\"text/javascript\">
$(function() {
    $('#slideshow1').cycle();
});
</script>

</head>

<body>
        <div id=\"slideshow1\" class=\"pics\">
            <img src=\"hpppics/home1.jpg\" width=\"300\" height=\"356\" />
            <img src=\"hpppics/home2.jpg\" width=\"300\" height=\"356\" />
            <img src=\"hpppics/home3.jpg\" width=\"300\" height=\"356\" />
        </div>
 
</body>
</html>

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).

chinnr

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!

treehouse : what would you like to learn today?

Forums

Animated GIF replacement?