Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 12-13-2011, 02:13 PM   PM User | #1
lauradawaf
New to the CF scene

 
Join Date: Dec 2011
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
lauradawaf is an unknown quantity at this point
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
lauradawaf is offline   Reply With Quote
Old 12-19-2011, 06:18 AM   PM User | #2
Abitha
New to the CF scene

 
Join Date: May 2011
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Abitha is an unknown quantity at this point
You mean you are trying to create a image menu with link on the images.
Abitha is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 12:19 AM.


Advertisement
Log in to turn off these ads.