jCarousel Ajax plusieurs items avec image
Bonjour,
j'essaye de faire fonctionner le jCarousel ( Ajax / php ) mais je bute sur deux soucis :
(1) je ne vois pas d'image dans ce qui défile...
(2) tous les éléments "items" défilent dans le même bloc, ils devraient s'afficher un à un...:roll:
Merci.
Source : http://sorgalla.com/projects/jcarousel/
mon script :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <script type="text/javascript">
function mycarousel_initCallback(carousel, state)
{
carousel.lock();
jQuery.get(
'slider_requete.php',
function(xml) {
mycarousel_itemAddCallback(carousel, xml);},
'xml'
);
};
function mycarousel_itemAddCallback(carousel, xml)
{
var $items = jQuery('item', xml);
$items.each(function(i) { carousel.add(i + 1, mycarousel_getItemHTML(this)); });
carousel.size($items.size());
carousel.unlock();
carousel.setup();
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item)
{
return '<h3>' + $('link', item).text()+ " > " + $('title', item).text() + '</h3>' + '<img src="'+$('image', item).text()+'" width="75" height="75" alt="" />';
};
jQuery(document).ready(function() {
jQuery().ajaxStart(function() { jQuery(".jcarousel-clip-vertical").addClass('loading'); });
jQuery().ajaxStop(function() { jQuery(".jcarousel-clip-vertical").removeClass('loading'); });
jQuery('#mycarousel').jcarousel({
visible: 1, scroll: 1, animation: "slow", auto : 1, wrap: 'circular',
initCallback: mycarousel_initCallback
});
});
</script> |
la source php "slider_requete.php"
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <?php
header('Content-Type: text/xml');
echo '<?xml version ="1.0"?>';
require ('configuration.php');
$sql = connect_sql();
?>
<item>
<link>Lien numero 1</link>
<title>Titre 1</title>
<image>http://iris-bleu.i.r.pic.centerblog.net/o/4a5ecd07.jpg</image>
<link>Lien numero 2</link>
<title>Titre 2</title>
<image>http://img6.xooimage.com/files/3/2/e/oeil_vert-1--349cb1.jpg</image>
<link>Lien numero 3</link>
<title>Titre 3</title>
<image>http://iris-bleu.i.r.pic.centerblog.net/o/d893fc3d.jpg</image>
<link>Lien numero 4</link>
<title>Titre 4</title>
<image>http://static.flickr.com/77/199481108_4359e6b971_s.jpg</image>
</item>
<?php mysql_close($sql); //On se deconnecte ?> |
html :
Code:
1
2
3
| <div id="mycarousel" class="jcarousel-skin-tango">
<ul></ul>
</div> |
