• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 748
  • Last Modified:

Problem using jquery-jcarousel

Hello experts.
I'm trying to make some changes using the jcarousel plugin:http://sorgalla.com/projects/jcarousel/

I want to use this case:
Carousel with dynamic content loading via Ajax from a PHP script
The default function is working fine:
xml like:
<data><total>10</total><image>http://static.flickr.com/75/199481072_b4a0d09597_s.jpg</image><image>http://static.flickr.com/57/199481087_33ae73a8de_s.jpg</image></data>
and js like:
function mycarousel_itemAddCallback(carousel, first, last, xml)
{
    // Set the size of the carousel
    carousel.size(parseInt(jQuery('total', xml).text()));

    jQuery('image', xml).each(function(i) {
        carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).text()));
    });
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(url)
{
    return '<img src="' + url + '" width="75" height="75" alt="" />';
};


The changes i want to make are the following:
Using a  xml file like:
<data><total>8</total><image><img width="120" height="90" alt="blablabla" class="ccontent_img" src="/images/small/C39B0EDC-F8F2-884F-EC74DCD08F86C174.jpg"/></image></image></data>
and a js:
function mycarousel_itemAddCallback(carousel, first, last, xml)
{
    // Set the size of the carousel
    carousel.size(parseInt(jQuery('total', xml).text()));

    jQuery('image', xml).each(function(i) {
        carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).text()));
    });
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(url)
{
    return '<div>' + url + '</div>';
};
I don't get any errors but i don't get the images in the carousel.
I assume i have to change this jQuery(this).text() .
Any help?
0
Panos
Asked:
Panos
  • 8
  • 6
1 Solution
 
Dushyant SharmaCommented:
not sure, but you may have to reinitialize the carousel after adding the new elements.  
0
 
leakim971PluritechnicianCommented:
try this :
function mycarousel_itemAddCallback(carousel, first, last, xml)
{
    // Set the size of the carousel
    carousel.size(parseInt(jQuery('total', xml).text()));

    jQuery('img', xml).each(function(i) {
        carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).attr("src")));
    });
};

Open in new window

0
 
PanosAuthor Commented:
Hi.
The script is looping the content of each image xml element.
I have in mind to create a more complex parent image element adding a tags ,text ,img,....
And after that getting the content like the data function,but in this case i have to handle this in a different way.
That's why i tried to get the data and paste it inside a div.l hope you understand
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Dushyant SharmaCommented:
you may also try html() method instead of text() method as text method appends the values just as text and does not parse it as html value.
0
 
PanosAuthor Commented:
Hi
I just saw your comment.
I tried html() allready but i get an error:
this[0].innerHTML is undefined:

function mycarousel_itemAddCallback(carousel, first, last, xml)
{
    // Set the size of the carousel
    carousel.size(parseInt(jQuery('total', xml).text()));

    jQuery('image', xml).each(function(i) {
        carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).html()));
    });
};
0
 
PanosAuthor Commented:
I think i can't do what i want.
Looking into the jcarousel plugin i read that the plugin is passing  the innerhtml code.
0
 
Dushyant SharmaCommented:
try debugging it with the smallest entity. it will bring you close to the problem.

like alert or console.log(for firefox and chrome) and try different element values. for example

alert(i);
alert(jQuery(this).html());

this will give you a clear picture on what is happening in background. May be this can lead you to the solution.
0
 
PanosAuthor Commented:
alert(i); is showing  values  0      1       2
using alert(jQuery(this).html());  i get the same error this[0].innerHTML is undefined:
 
0
 
Dushyant SharmaCommented:
it should find the element. anyway, you can try again the answer above at 37343979. Their you can try adding other parameters explicitly to the newly created element.
0
 
PanosAuthor Commented:
ddsh79
The "atrr"  way does not help.
I post all the test files for help.
test.zip
0
 
Dushyant SharmaCommented:
that was more helpful to solve the problem.

try the xml data in cdata as below and use .text() like carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).text()));

<image><![CDATA[<a href="#" target="_blank"><img width="120" height="90" alt="blablabla" class="ccontent_img" src="images/small/C39B0EDC-F8F2-884F-EC74DCD08F86C174.jpg"/><span>Test 1</span></a>
]]></image>
 
<image><![CDATA[<a href="#" target="_blank"><img width="120" height="90" alt="blablabla" class="ccontent_img" src="images/small/151F502B-9F23-1A88-821C7B41852BBDB6.jpg"/><span>Test 2</span></a>
]]></image>
 
<image><![CDATA[<a href="#" target="_blank"><img width="120" height="90" alt="blablabla" class="ccontent_img" src="images/small/01C94AE7-DC57-7446-19058A02881D7C82.jpg"/><span>Test 3</span></a>
]]></image>
0
 
PanosAuthor Commented:
ddsh79
It is working perfect.
Thank you very much. Can you post any link why do i have to use <![CDATA[ ?
0
 
PanosAuthor Commented:
Thank you again
regards
panos
0
 
Dushyant SharmaCommented:
see if you are using html code then it will treat all the tags as nodes so you can not get nodes using .text() method. To get the nodes as text we use cdata and it makes everything wrapped available as text. more you can refer on w3schools for cdata.

and thanks for the points :)
0
 
PanosAuthor Commented:
Thank you for the explanation
0
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.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 8
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now