onBefore and onAfter function
<p>I would like to duplicate the fade in / out effect so that it sits above and below the image [currently only sits below] but displaying different text</p>

<p>Is there a way to stop it fading in and out if it has the same "alt" </p>

<p>This is the javascript I am currently using</p>

<pre><code>    &lt;script type="text/javascript" src="/wp-content/themes/child/script/jquery.jcarousel.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="/wp-content/themes/child/script/carouFredSel.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;
jQuery(document).ready(function() {
    var imgLength = jQuery('ul#fredsel img').length;
    jQuery('#totalImg').html(imgLength);
    jQuery('#imgCount').html(1);

    // Using custom configuration
jQuery("#foo1").carouFredSel({
    items: 1,
    align: false,
    auto    : false,
    width: 1500,
    onCreate: function(items) {
        var txt = "";
        items.each(function() { txt += "&lt;li&gt;" + jQuery(this).attr("alt").split("/").pop() + "&lt;/li&gt;"; });
        jQuery("#foo1_log").html("&lt;p&gt;Carousel created showing images:&lt;/p&gt;&lt;ul&gt;" + txt + "&lt;/ul&gt;");
    },
    scroll  : {
    items           : 1,
    duration        : 1000,
    pauseDuration   : 2000,
        onAfter : function(oldItems, newItems) {
            var txt = "";
            newItems.each(function() { txt += "&lt;li&gt;" + jQuery(this).attr("alt").split("/").pop() + "&lt;/li&gt;"; });
            jQuery("#foo1_log").html("&lt;p&gt;Now showing images:&lt;/p&gt;&lt;ul&gt;" + txt + "&lt;/ul&gt;");
        }
    },
    prev    : {
        button  : "#foo1_prev",
        onBefore: function() {
            jQuery("#foo1_log").html("&lt;p&gt;Started scrolling to the &lt;strong&gt;left&lt;/strong&gt;.&lt;/p&gt;");
        }
    },
    next    : {
        button  : "#foo1_next",
        onBefore: function() {
            jQuery("#foo1_log").html("&lt;p&gt;Started scrolling to the &lt;strong&gt;right&lt;/strong&gt;.&lt;/p&gt;");
        }
    }
});
});
&lt;/script&gt;
</code></pre>

<p>This is the HTML I am currently using</p>

<pre><code>&lt;div class="image_carousel"&gt;
    &lt;div id="foo1"&gt;
&lt;img src="/wp-content/uploads/2011/07/Peregrine-Shot_03-4.png" alt="Project One" width="675" height="450" /&gt;&lt;img src="/wp-content/uploads/2011/07/Peregrine-Shot_09-84.png" alt="Project One" width="300" height="450" /&gt;&lt;img src="/wp-content/uploads/2011/07/Peregrine-Shot_10-192.png" alt="Project One" width="300" height="450" /&gt;&lt;img src="/wp-content/uploads/2011/07/Peregrine-Shot_16-48.png" alt="Project Two" width="675" height="450" /&gt;
    &lt;/div&gt;
    &lt;div class="clearfix"&gt;&lt;/div&gt;
    &lt;a class="prev" id="foo1_prev" href="#"&gt;&lt;span&gt;prev&lt;/span&gt;&lt;/a&gt;
    &lt;a class="next" id="foo1_next" href="#"&gt;&lt;span&gt;next&lt;/span&gt;&lt;/a&gt;
    &lt;div class="logbox" id="foo1_log"&gt;&lt;p&gt;Click the previous- or next-button&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
