Discussion :

[fazpedro]

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...
Merci.

Source : http://sorgalla.com/projects/jcarousel/

mon script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="mycarousel" class="jcarousel-skin-tango">
<ul></ul>
</div>

[SpaceFrog]

sans doute parce que ce n'est pas la syntaxe d'une balise image ...

[fazpedro]

dans l'exemple de http://sorgalla.com/projects/jcarous..._ajax_php.html il y a le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

return '<img src="' + url + '" width="75" height="75" alt="" />';

il me semble avoir mis la même syntaxe, non ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

return '<h3>' + $('link', item).text()+ " > " + $('title', item).text() + '</h3>' + '<img src="'+$('image', item).text()+'" width="75" height="75" alt="" />';

Merci.

[SpaceFrog]

ben je sais pas, moi je vois :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<image>http://iris-bleu.i.r.pic.centerblog.net/o/4a5ecd07.jpg</image>

[fazpedro]

oui, j'ai mis la même syntaxe que dans l'exemple
la source étant sur la page :
http://sorgalla.com/projects/jcarous...c_ajax_php.php

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

<data><total>10</total><image>http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg</image><image>http://static.flickr.com/75/199481072_b4a0d09597_s.jpg</image></data>

[fazpedro]

Bonjour,

j'ai essayé juste avec du texte et le résultat est le même
tous les items sont dans le bloc affiché, alors qu'on devrait avoir que l'item n°1 etc...
Merci de votre aide !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function mycarousel_getItemHTML(item)
{
	return  '<h3>' + "Avant " + $('title', item).text() + " Suite " + '</h3>';
};

Résultat affiché dans le bloc :
Avant Titre 1Titre 1Titre 2Titre 3Titre 4 Suite