get images to fade using javascript

I am using code called Galleria. In the example it says to use     :

        transition: 'fade'

For a fading transition. I've tried this but there is no change. MY code is below, can anyone se what I am doing wrong?


    <title>Galleria Demo 2</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="imagetoolbar" content="false">
    <meta name="description" content="">
    <meta name="keywords" content="">
      <link href="files/galleria.css" rel="stylesheet" type="text/css" media="screen">
      <script type="text/javascript" src="files/jquery.min.js"></script>
      <script type="text/javascript" src="files/jquery.galleria.js"></script>
      <script type="text/javascript">
            $('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
            $('.nav').css('display','none'); // hides the nav initially
                  history   : false, // deactivates the history object for bookmarking, back-button etc.
                  clickNext : false, // helper for making the image clickable. Let's not have that in this example.
                  insert    : undefined, // the containing selector for our main image.
                                                   // If not found or undefined (like here), galleria will create a container
                                                   // before the ul with the class .galleria_container (see CSS)
                  onImage   : function() { $('.nav').css('display','block'); } // shows the nav when the image is showing
      // use a fading transition:
        transition: 'fade'
      <style media="screen,projection" type="text/css">
      /* BEGIN DEMO STYLE */
      body{padding:20px;background:white;background:white;color:#555;font:80%/140% 'helvetica neue',sans-serif;width:900px;margin: 0 auto;}
      h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
      .gallery_demo li{width:55px;height:70px;border:3px double #eee;margin: 0 2px 2px 0;background:#eee;}
      .gallery_demo li.hover{border-color:#bbb;}
      .gallery_demo li div{left:240px}
      .gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
      .galleria_container{margin:0 auto 60px auto;height:438px;width:700px;float:right;}
      .info{text-align:left;margin:30px 0;border-top:1px dotted #221;padding-top:30px;clear:both;}
      .info p{margin-top:1.6em;}
<h1>Galleria Demo 02</h1>
<div class="demo">
<ul class="gallery_demo_unstyled">
    <li><img src="files/flowing-rock.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
    <li><img src="files/stones.jpg" alt="Stones" title="Stones - from Aple images"></li>
    <li><img src="files/grass-blades.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
    <li><img class="noscale" src="files/ladybug.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
    <li><img src="files/lightning.jpg" alt="Lightning" title="Black &amp; White"></li>
    <li><img src="files/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
    <li><img src="files/mojave.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
    <li><img src="files/pier.jpg" alt="Pier" title="Proin erat nisi"></li>
    <li><img src="files/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
    <li><img src="files/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
    <li><img src="files/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
    <li><img src="files/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">previous</a> | <a href="#" onclick="$; return false;">next</a></p>
Who is Participating?
Gurvinder Pal SinghConnect With a Mentor Commented:
only thing that i can see is that you need to put this code inside that document.ready event handler, so that fade transition gets binded after the object has loaded
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.