Source php pour Carrousel

**fazpedro** · 26/02/2013, 15h16

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 :

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>

Merci de votre aide !

**Bovino** · 26/02/2013, 15h20

Quel rapport avec PHP ?
Pourquoi ne pas suivre leur doc ?

**fazpedro** · 26/02/2013, 15h38

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

Merci.

**andry.aime** · 26/02/2013, 15h49

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

PS: j'adore ton avatar

.

A+.

**fazpedro** · 26/02/2013, 15h58

Envoyé par andry.aime

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

.
A+.

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

Code :

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

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

eh oui, je ressemble à mon avatar

**Bovino** · 26/02/2013, 15h59

Riding carousels with jQuery

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 ?

**fazpedro** · 27/02/2013, 10h07

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

html :

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

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

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>

Source php pour Carrousel

Langage PHP

Vue hybride

Discussions similaires

Partager

Partager