Skip navigation
Currently Being Moderated

A really simple cross-fade image for beginners

Aug 13, 2012 10:17 AM

Hello, I would like to put a cross-fading image into a table that is my website header. I don't need anything complicated at all, no controls etc, just want 8 images that fit my cell to continuosly crossfade after 3 seconds or so. Found many scripts/plugins/jquery etc but they all seem very complicated for beginners. I've used 'easyrotator' which is so easy to use, but it doesn't seem to have a cross fade on the free mode, just a swipe and i'm sure I can find similar for free. Maybe I'm missing something but I would have thought dreamweaver (being the helpful prog that it is) would have something to do this?

 

Ideally, I would like it to be continuous regardless of the page people are on. I imagine this is above my head so if too tricky, perhaps it could just be random image fade.

 

Any advice on the best thing to use here is greatly appreciated!

 
Replies
  • Currently Being Moderated
    Aug 13, 2012 11:15 AM   in reply to Suzie8484

    Hi there and welcome,

     

      There's definitely lots of ways to do this, but if you're a beginner, I would suggest trying one of the newest Adobe products: Adobe Edge. It's an HTML5/JavaScript/CSS3 Animation tool that you can easily do all of the animation just by dragging and dropping and it will generate all of the code for you for your website! It's in Preview right now, so it's still free for users to try out. You can download the latest version here:

     

    edge.adobe.com

     

      As far as the continuous play regardless of which page you're on, it is a bit tricky, and would require that you load content inside a frame or div separate from the animation itself, instead of reloading the entire page.

     

      If you like, I could send you a quick file that demonstrates crossfade transitions in Adobe Edge that you could look at to see how it works. : )

     

    I hope this helps!

    -Devon

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2012 12:04 AM   in reply to Suzie8484

    What do you mean by cross-fading images? Do you have an example?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2012 2:25 AM   in reply to Suzie8484

    Suzie8484 wrote:

     

    Yes, it's the 'fade' option here: http://jquery.malsup.com/cycle/

     

    There really isn't enough instructions on this website for beginners to understand exactly what and where to put the various code otherwise this would be perfect!

    ok, here goes...i'll try to explain the process.

     

    1) Insert a <div> on your page and give it the class of 'slideshow' like below.

     

    <div class="slideshow">


     

    </div>

     

     

    2) Insert your images into the <div> as below: (example below shows images stored in 'images' folder)

     

     

    <div class="slideshow">

    <img src="images/beach1.jpg" width="200" height="200" />

    <img src="images/beach2.jpg" width="200" height="200" />

    <img src="images/beach3.jpg" width="200" height="200" />

    <img src="images/beach4.jpg" width="200" height="200" />

    <img src="images/beach5.jpg" width="200" height="200" />

    </div>

     

     

    3) Style the 'slideshow' <div> with css. Go into code view and paste the below directly before the closing </head> tag near the top of your page.

     

    <style type="text/css">

    .slideshow { height: 232px; width: 232px; margin: auto }
    .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
    </style>

     

     

    4) Add the jquery scripts to your page. Go into code view and paste the below directly AFTER the css you pasted in above so this code is now directly before the closing </head> tag

     

    <!-- include jQuery library -->

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

    <!-- include Cycle plugin -->

    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest .js"></script>

    <script type="text/javascript">

    $(document).ready(function() {
        $('.slideshow').cycle({
    fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
    });
    </script>

     

     

    Thats it!.

     

    Well you would want to make sure the dimensions of the 'slideshow' <div> reflect those of your image.

     

    So for instance if your image is 300px x 300px the dimensions should be 332px x 332px. (see below) Why the extra 32px - because this is allocated for the 15px left/right/top/bottom padding and 1 px border around the image that you see on the example page.

     

    <style type="text/css">

    .slideshow { height: 332px; width: 332px; margin: auto }
    .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
    </style>

     

     

    Also ideally you want to download the jquery cycle script rather than use the directly linked one just incase in future the script is moved.

     

    So download the script from the link provided on the page and change this link:

     

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">

     

    To wherever you keep the script in your site folder (below its kept in a folder named 'jquery_scripts':

     

    <script type="text/javascript" src="jquery_scripts/jquery.min.js">

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points