Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Fade In & Out

  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fade In & Out

    I implemented an infinite carousel on my site using the following plugin:

    http://caroufredsel.frebsite.nl/exam...-functions.php

    I would like to make some changes to it. I want to merge all of the sub menus into one tab entitled 'Fashion & Beauty' with all of the images within it

    As you scroll through the images I would like the title of the magazine or job at the top and the photographers name underneath the image to fade in and out depending on which image is being viewed

    I am trying to implement the onBefore and onAfter function using the jquery and HTML provided in the link above:

    A carousel with an onBefore and onAfter function, using the newItems parameter:

    Create the carousel and set a text in the textbox
    Before the carousel starts scrolling, a text is set in the textbox
    After the carousel stops scrolling, a second text is set in the textbox

    JavaScript currently being used

    <script type="text/javascript">
    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({
    auto : false,
    onCreate: function(items) {
    var txt = "";
    items.each(function() { txt += "<li>" + jQuery(this).attr("src").split("/").pop() + "</li>"; });
    jQuery("#foo1_log").html("<p>Carousel created showing images:</p><ul>" + txt + "</ul>");
    },
    scroll : {
    onAfter : function(oldItems, newItems) {
    var txt = "";
    newItems.each(function() { txt += "<li>" + jQuery(this).attr("src").split("/").pop() + "</li>"; });
    jQuery("#foo1_log").html("<p>Now showing images:</p><ul>" + txt + "</ul>");
    }
    },
    prev : {
    button : "#foo1_prev",
    onBefore: function() {
    jQuery("#foo1_log").html("<p>Started scrolling to the <strong>left</strong>.</p>");
    }
    },
    next : {
    button : "#foo1_next",
    onBefore: function() {
    jQuery("#foo1_log").html("<p>Started scrolling to the <strong>right</strong>.</p>");
    }
    }
    });
    });
    </script>

    I keep getting the following error message:

    Uncaught TypeError: Cannot call method 'split' of undefined

    Any ideas where I'm going wrong?

    Laura

  • #2
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You mean you are trying to create a image menu with link on the images.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •