Source php pour Carrousel

Version imprimable

26/02/2013, 15h16
fazpedro

Source php pour Carrousel

Bonjour,
je cherche à faire la même chose que sur cette page :
http://sorgalla.com/projects/jcarous..._ajax_php.html
il fait appel à la page :
http://sorgalla.com/projects/jcarous...c_ajax_php.php

ce que je cherche, c'est connaître la structure de cette page php
la page générée étant celle-ci :

Code:

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

Merci de votre aide !
26/02/2013, 15h20
Bovino
1. Quel rapport avec PHP ?
2. Pourquoi ne pas suivre leur doc ?
26/02/2013, 15h38
fazpedro

@Bovino
Quel rapport avec PHP ?
=> c'est un fichier php qui permet de faire fonctionner le carrousel

Pourquoi ne pas suivre leur doc ?
=> parce que je n'ai rien trouvé sur ce fameux fichier php...:cry:

Merci.
26/02/2013, 15h49
andry.aime

:salut:

Le carrousel, c'est du javascript, donc tu peux voir le source du code depuis ton navigateur.

PS: j'adore ton avatar :aie:.

A+.
26/02/2013, 15h58
fazpedro
Citation:

Envoyé par andry.aime

:salut:
Le carrousel, c'est du javascript, donc tu peux voir le source du code depuis ton navigateur.
PS: j'adore ton avatar :aie:.
A+.

pour le javascript, pas de souci, j'ai récupéré
Code:

1 2 3 4 5 .... jQuery.get( 'dynamic_ajax_php.php', { ....
mais j'ai pas le code source du fichier php "dynamic_ajax_php.php"... :oops:
eh oui, je ressemble à mon avatar :calim2:
26/02/2013, 15h59
Bovino

Citation:

Riding carousels with jQuery

:whistle:

Sinon, tu es capable de trouver l'exemple, de trouver le format XML que doit renvoyer le script PHP appelé. Qu'est-ce qu'il te manque de plus ? :?

@ Bovino :
en fait aucune image ne s'affiche !
voici le code que j'ai récupéré :

html :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="robots" content="noindex, nofollow" />
<script type="text/javascript" src="jquery_14.js"></script>
<script type="text/javascript" src="jquery_carrousel.js"></script>
<style>
html, body {    min-height: 100%;    height: auto !important;    height: 100%;}
body {    font: 100.01% "Trebuchet MS", Trebuchet, Tahoma, Verdana, Arial, sans-serif;    color: #333;    padding: 0;}
body * {    line-height:1.22em;}
h1, h2, h3, h4, h5, h6 {    font-family: Georgia, "Times New Roman", Times, serif;    color:#4088b8;    clear: both;}
h1 {}
h2 {    color: #c8c8c8;		margin-top: -25px;}
h3 {}
h4 {    color: #333;    margin-bottom: -10px;}
p {    margin: 10px 0;    clear: both;}
ul, ol {    margin-left 0;}
ul ul {    margin-bottom: 20px;}
#wrap {    color: #404040;    /*margin: 0 12%;*/    margin: 20px 40px;}
a {    color: #4088b8;}
table {    font-size: inherit;    border: 1px solid #c8c8c8;}
th {    background: #d8d8d8;    text-align: left;    padding: 5px;   white-space: nowrap;}
td {    background: #f8f8f8;    text-align: left;    padding: 5px;    vertical-align: top;}
select, input, textarea {    font: 99% "Trebuchet MS", Trebuchet, Tahoma, Verdana, Arial, sans-serif;}
pre, code, tt, dt {    font: 100% monospace;    margin: 20px 0;}
pre, blockquote {    padding: 15px;    background-color: #f0f0f0;    margin: 20px 0;    -moz-border-radius: 10px;}
td pre {    font: 85% monospace;    padding: 5px;    margin: 5px 0;}
 
.jcarousel-skin-ie7 .jcarousel-container {-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;background: #D4D0C8;border: 1px solid #808080;}
.jcarousel-skin-ie7 .jcarousel-direction-rtl {direction: rtl;}
.jcarousel-skin-ie7 .jcarousel-container-horizontal {width: 245px;padding: 20px 40px;}
.jcarousel-skin-ie7 .jcarousel-container-vertical {width: 75px;height: 245px;padding: 40px 20px;}
.jcarousel-skin-ie7 .jcarousel-clip {overflow: hidden;}
.jcarousel-skin-ie7 .jcarousel-clip-horizontal {width:  245px;height: 77px;}
.jcarousel-skin-ie7 .jcarousel-clip-vertical {width:  77px;height: 245px;}
.jcarousel-skin-ie7 .jcarousel-item {width: 75px;height: 75px;border: 1px solid #fff;}
.jcarousel-skin-ie7 .jcarousel-item:hover,.jcarousel-skin-ie7 .jcarousel-item:focus {border-color: #808080;}
.jcarousel-skin-ie7 .jcarousel-item-horizontal {margin-left: 0;margin-right: 7px;}
.jcarousel-skin-ie7 .jcarousel-direction-rtl .jcarousel-item-horizontal {	margin-left: 7px;	margin-right: 0;}
.jcarousel-skin-ie7 .jcarousel-item-vertical {    margin-bottom: 7px;}
.jcarousel-skin-ie7 .jcarousel-item-placeholder {}
/**  Horizontal Buttons */
.jcarousel-skin-ie7 .jcarousel-next-horizontal {    position: absolute;    top: 43px;    right: 5px;    width: 32px;
    height: 32px;    cursor: pointer;    background: transparent url(next-horizontal.gif) no-repeat 0 0;}
.jcarousel-skin-ie7 .jcarousel-direction-rtl .jcarousel-next-horizontal {    left: 5px;    right: auto;    background-image: url(prev-horizontal.gif);}
.jcarousel-skin-ie7 .jcarousel-next-horizontal:hover,.jcarousel-skin-ie7 .jcarousel-next-horizontal:focus {    background-position: -32px 0;}
.jcarousel-skin-ie7 .jcarousel-next-horizontal:active {    background-position: -64px 0;}
.jcarousel-skin-ie7 .jcarousel-next-disabled-horizontal,.jcarousel-skin-ie7 .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-ie7 .jcarousel-next-disabled-horizontal:focus,.jcarousel-skin-ie7 .jcarousel-next-disabled-horizontal:active {
cursor: default;    background-position: -96px 0;}
.jcarousel-skin-ie7 .jcarousel-prev-horizontal {    position: absolute;    top: 43px;    left: 5px;    width: 32px;    height: 32px;
    cursor: pointer;    background: transparent url(prev-horizontal.gif) no-repeat 0 0;}
.jcarousel-skin-ie7 .jcarousel-direction-rtl .jcarousel-prev-horizontal {    left: auto;    right: 5px;  background-image: url(next-horizontal.gif);}
.jcarousel-skin-ie7 .jcarousel-prev-horizontal:hover,.jcarousel-skin-ie7 .jcarousel-prev-horizontal:focus {    background-position: -32px 0;}
.jcarousel-skin-ie7 .jcarousel-prev-horizontal:active {    background-position: -64px 0;}
.jcarousel-skin-ie7 .jcarousel-prev-disabled-horizontal,.jcarousel-skin-ie7 .jcarousel-prev-disabled-horizontal:hover,.jcarousel-skin-ie7 .jcarousel-prev-disabled-horizontal:focus,
.jcarousel-skin-ie7 .jcarousel-prev-disabled-horizontal:active {    cursor: default;    background-position: -96px 0;}
/** *  Vertical Buttons
 */
.jcarousel-skin-ie7 .jcarousel-next-vertical {    position: absolute;    bottom: 5px;    left: 43px;    width: 32px;
    height: 32px;    cursor: pointer;    background: transparent url(next-vertical.gif) no-repeat 0 0;}
.jcarousel-skin-ie7 .jcarousel-next-vertical:hover,.jcarousel-skin-ie7 .jcarousel-next-vertical:focus {    background-position: 0 -32px;}
.jcarousel-skin-ie7 .jcarousel-next-vertical:active {    background-position: 0 -64px;}
.jcarousel-skin-ie7 .jcarousel-next-disabled-vertical,.jcarousel-skin-ie7 .jcarousel-next-disabled-vertical:hover,.jcarousel-skin-ie7 
.jcarousel-next-disabled-vertical:focus,jcarousel-skin-ie7 .jcarousel-next-disabled-vertical:active {    cursor: default;    background-position: 0 -96px;}
.jcarousel-skin-ie7 .jcarousel-prev-vertical {    position: absolute;    top: 5px;    left: 43px;    width: 32px;    height: 32px;    cursor: pointer;
    background: transparent url(prev-vertical.gif) no-repeat 0 0;}
.jcarousel-skin-ie7 .jcarousel-prev-vertical:hover,.jcarousel-skin-ie7 .jcarousel-prev-vertical:focus {    background-position: 0 -32px;}
.jcarousel-skin-ie7 .jcarousel-prev-vertical:active {    background-position: 0 -64px;}
.jcarousel-skin-ie7 .jcarousel-prev-disabled-vertical,.jcarousel-skin-ie7 .jcarousel-prev-disabled-vertical:hover,.jcarousel-skin-ie7 .jcarousel-prev-disabled-vertical:focus,
.jcarousel-skin-ie7 .jcarousel-prev-disabled-vertical:active {    cursor: default;    background-position: 0 -96px;}
</style>
<script type="text/javascript">
function mycarousel_itemLoadCallback(carousel, state)
{
    // Check if the requested items already exist
    if (carousel.has(carousel.first, carousel.last)) {
        return;
    }
    jQuery.get(
        'slider_requete.php',
        {
            first: carousel.first,
            last: carousel.last
        },
        function(xml) {
            mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, xml);
        },
        'xml'
    );
};
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="" />';
};
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        // Uncomment the following option if you want items
        // which are outside the visible range to be removed
        // from the DOM.
        // Useful for carousels with MANY items.
        // itemVisibleOutCallback: {onAfterAnimation: function(carousel, item, i, state, evt) { carousel.remove(i); }},
        itemLoadCallback: mycarousel_itemLoadCallback
    });
});
</script>
</head>
<body>
<div id="wrap">
  <h1>jCarousel</h1>
  <h2>Riding carousels with jQuery</h2>
  <h3>Carousel with dynamic content loading via Ajax</h3>
  <p>
    The data is loaded dynamically from a simple text file which contains the image urls.
  </p>
  <ul id="mycarousel" class="jcarousel-skin-ie7">
  </ul>
</div>
</body>
</html>

fichier php :

Code:

1
2
3
4
5
6
7
8
9
<xml version="1.0" encoding="iso-8859-1">
<total>6</total>
<image>http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg</image>
<image>http://static.flickr.com/75/199481072_b4a0d09597_s.jpg</image>
<image>http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg</image>
<image>http://static.flickr.com/75/199481072_b4a0d09597_s.jpg</image>
<image>http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg</image>
<image>http://static.flickr.com/75/199481072_b4a0d09597_s.jpg</image>
</xml>

27/02/2013, 10h17
Bovino

Ouais... donc ton XML ne correspond pas et est mal formé. :aie:

Un fichier XML doit contenir une balise racine unique !

Merci Bovino !

Oups :calim2: effectivement l'exemple fonctionne mieux comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
header('Content-Type: text/xml');
echo '<?xml version ="1.0"?>';
?>
<data>
<total>6</total>
<image>http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg</image>
<image>http://static.flickr.com/75/199481072_b4a0d09597_s.jpg</image>
<image>http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg</image>
<image>http://static.flickr.com/75/199481072_b4a0d09597_s.jpg</image>
<image>http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg</image>
<image>http://static.flickr.com/75/199481072_b4a0d09597_s.jpg</image>
</data>

et maintenant j'ai pu indiquer mon code php pour récupérer mes images :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<?php
header('Content-Type: text/xml');
echo '<?xml version ="1.0"?>';
require ('configuration.php');
$sql = connect_sql();
?>
<data>
<?php // compte le nombre d'images !
$date_depart_slider25 = date('Y-m-d', strtotime($date_depart_slider25.' -1 days'));
$compteur_slider5 = 0;
mysql_query("SET NAMES 'utf8'");
setlocale (LC_TIME, 'fr_FR.UTF8');
$compteur_image = 0;
while ($compteur_slider5 <20)	
{
	$compteur_slider5 = $compteur_slider5+1;
	$date_depart_slider25 = date('Y-m-d', strtotime($date_depart_slider25.' +1 days'));
	$select_slider60 = "SELECT * FROM evenement WHERE date_ev ='$date_depart_slider25' ORDER BY type_evenement ASC, date_ev ASC";
	$result_slider60 = mysql_query($select_slider60) or die ('Erreur : '.mysql_error() );
	if	(mysql_num_rows($result_slider60) == 0)	{}
	else
	while($affiche_slider60 = mysql_fetch_array($result_slider60))
	{   ?>
		<?php
		$image_ev3 = $affiche_slider60["image_ev"];
		if ($image_ev3=='') {} 
		else {$compteur_image=$compteur_image+1;}
	}
} ?>
<total><?php echo $compteur_image;?></total>
 
<?php // pour affichage des images !
$date_depart_slider = date('y').'-'.date('n').'-'.date('j');
$date_depart_slider2 = date('Y-m-d', strtotime($date_depart_slider2.' -1 days'));
$compteur_slider = 0;
mysql_query("SET NAMES 'utf8'");
setlocale (LC_TIME, 'fr_FR.UTF8');
while ($compteur_slider <20)	
{
	$compteur_slider = $compteur_slider+1;
	$date_depart_slider2 = date('Y-m-d', strtotime($date_depart_slider2.' +1 days'));
	$date_vue_depart_slider = strftime("%A %d %B %Y",strtotime("$date_depart_slider2"));
	$jour_vue_slider = ucwords(strtolower($date_vue_depart_slider));
	$select_slider = "SELECT * FROM evenement WHERE date_ev ='$date_depart_slider2' ORDER BY type_evenement ASC, date_ev ASC";
	$result_slider = mysql_query($select_slider) or die ('Erreur : '.mysql_error() );
	if	(mysql_num_rows($result_slider) == 0)	{}
	else
	while($affiche_slider = mysql_fetch_array($result_slider))
	{   ?>
		<?php
		$image_ev3 = $affiche_slider["image_ev"];
		if ($image_ev3=='') {} 
		else {
				echo '<image>';
				echo $image_ev3;
				echo '</image>';
			}
	}
} ?>
</data>
<?php mysql_close($sql); //On se deconnecte ?>