Bonjour à tous,

J'ai trouvé un petit plugin de JQuery appelé JCaroussel. Malheureusement, mes notions en Javascript sont extrêmement limitées.

Pourriez-vous m'aider s'il vous plait ? J'ai essayé avec les exemples proposés par le site jCaroussel mais rien n'y fait.

Code à insérer dans la page web

<link href="../style.css" rel="stylesheet" type="text/css" />

<!-- Chargement de la librairie jQuery -->
<script type="text/javascript" src="../lib/jquery-1.2.3.pack.js"></script>

<!-- Chargement de la librairie du caroussel ->
<script type="text/javascript" src="../lib/jquery.jcarousel.pack.js"></script>

<!-- Chargement des propriétés css du jCarousel -->
<link rel="stylesheet" type="text/css" href="../lib/jquery.jcarousel.css" />

<!-- Chargement du skin du Caroussel -->
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />

<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(
        'dynamic_ajax_php.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()));
    });
};

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>

Code PHP pour générer le XML nécessaire à jCaroussel

<?php 
// Array indexes are 0-based, jCarousel positions are 1-based.
$first = max(0, intval($_GET['first']) - 1);
$last  = max($first + 1, intval($_GET['last']) - 1);

$length = $last - $first + 1;

// ---

$images = array(
    'http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg',
    'http://static.flickr.com/75/199481072_b4a0d09597_s.jpg',
    'http://static.flickr.com/57/199481087_33ae73a8de_s.jpg',
    'http://static.flickr.com/77/199481108_4359e6b971_s.jpg',
    'http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg',
    'http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg',
    'http://static.flickr.com/58/199481218_264ce20da0_s.jpg',
    'http://static.flickr.com/69/199481255_fdfe885f87_s.jpg',
    'http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg',
    'http://static.flickr.com/70/229228324_08223b70fa_s.jpg',
);

$total    = count($images);
$selected = array_slice($images, $first, $length);

// ---

header('Content-Type: text/xml');

echo '<data>';

// Return total number of images so the callback
// can set the size of the carousel.
echo '  <total>' . $total . '</total>';

foreach ($selected as $img) {
    echo '  <image>' . $img . '</image>';
}

echo '</data>';
?>

J'aimerais savoir pourquoi aucune image ne s'affiche quand je remplace les urls de l'array $images dans le fichier php par les urls des images sur mon site (que l'URL soit absolue ou relative) ? Est-ce que ça vient du php ou du code Javascript ?

Merci de votre aide.

Salut,
je ne vois pas pourquoi ça ne marcherait pas, tu es sur que tu ne te trompe pas dans la syntaxe ?

Certain malheureusement...

Est-ce que ça a un rapport avec la taille des images ?
Celles de jCaroussel ont toutes la même taille (75x75px). Faut-il que mes images soient à ce format ?

Possible, mais ça m'étonnerais, au pire tu aurais un mauvais affichage... Que te dis la console d'erreur de mozilla ?

La console d'erreur ? Je ne savais pas que mozilla en intégrait une :-S

En revanche, j'ai fait et refait des tests et au final ça fonctionne... Allez comprendre...

J'ai le droit de mettre un lien vers le site du développeur du caroussel ? (ça peut intéresser du monde).

Merci pour ton aide LCaba.

Heu oui pourquoi tu aurais pas le droit ?

Tant que tu fait pas un post juste pour ça

Ah non ce n'est pas uniquement pour ça. Le caroussel se trouve ici.
Par contre, j'ai résolu mon problème d'affichage d'image mais, éternel instatisfait, ça ne me suffit pas.

J'ai besoin que la galerie cache un lien derrière l'image.

En gros pour le moment j'ai ça :

Dans le XML généré par le php :

<data>
<total>12</total>

<image>images/LAR001.png</image>

</data>

Ce qui fait que via :

function mycarousel_getItemHTML(url)
{
    return '<img src="' + url + '" width="75" height="75" alt="" />';
};

je génère :

<img src="images/LAR001" width="75" height="75" alt="" />

J'ai changé un peu la structure du générateur php ce qui fait que j'obtiens :

<data>
<total>12</total>

<image>
<a href="page_article.php?ref=1"><img src="images/LAR001.png"/></a>
</image>

<image>
<a href="page_article.php?ref=2"><img src="images/LAR002.png"/></a>
</image>
</data>

mais plus rien ne s'affiche, même si je change ma fonction javascript en :

function mycarousel_getItemHTML(url)
{
    return url;
};

Faut-il modifier une ou plusieurs des autres fonctions ? Je sais qu'il est possible de faire ce que je veux faire pour l'avoir vu en action sur un site commercial (où j'ai ainsi pu trouver jCarrousel)

Et avec :

return '<img src="' + url + '" width="75" height="75" alt="" onclick="document.location = 'adresse.htm' " />';

Ca marche ?

Non.

Qu'est-ce que ça signifie 'adresse.htm' ?

l'adresse du lien , dans ton cas ce serait par ex. page_article.php?ref=1

oui sauf que la galerie se situe dans un fichier php présent sur toutes les pages du site donc ça ne fonctionnerait pas de toute façon ?

Je n'ai pas compris ce que tu veux dire

Eh bien, ma galerie est situé dans mon fichier colonnedroite.php, présente sur toutes les pages de mon site via

<?php include('colonnedroite.php')); ?>

Mais c'est bon, je viens de me masturber violemment l'éponge qui me sert de cerveau et j'ai trouvé la réponse : j'ai changé le paramètre transmis dans l'url page_article.php. Plutot que de chercher à tout prix à transmettre un deuxième paramètre (l'id de l'image) que je n'arrivais pas à récupérer en javascript, je transmet le nom de l'image, que je récupère déjà en javascript depuis mon fichier xml. Plutôt que de chercher à modifier le javascript que je ne connais pas suffisamment, j'ai tout bêtement changé le critère de recherche dans ma requete SQL (je fais une recherche par nom d'image au lieu d'id comme je le faisais avant.)

Ainsi, ma fonction devient :

return '<a href="page_article.php?article=' + image + '"><img src="images/' + image + '.png" width="150" alt="" /></a>';

et ça fonctionne du tonnerre !!!

Merci pour ton aide. C'est ta remarque

Citation : LCaba

Je n'ai pas compris ce que tu veux dire

qui m'a soudain éclairé : j'ai commencé par reformuler ce que je t'avais dit et TILT : pourquoi ne pas reformuler ma requête ?!

MERCI donc !

Résultat visible ici : site en construction.

Mais derien, j'avais aussi pensé à placer le lien directement dans le retour de la fonction j'ai hésiter...j'aurais pas du

++

Les grands esprits... dit-on

Bonjour,
Je me suis plongé dans le code de l'ajax de jcarousel, il me fallait afficher des infos en plus comme le titre de la photo et sa description. Pour ceux que ça intéresse, dans un excès de bonté, voila le code
Le javascript :

function bloc_photos1_itemLoadCallback(carousel, state)
{
    // Check if the requested items already exist
    if (carousel.has(carousel.first, carousel.last)) {
        return;
    }

    jQuery.get(
        'dynamic_ajax_php1.php',
        {
            first: carousel.first,
            last: carousel.last
        },
        function(xml) {
            bloc_photos1_itemAddCallback(carousel, carousel.first, carousel.last, xml);
        },
        'xml'
    );
};

function bloc_photos1_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, bloc_photos1_getItemHTML(jQuery(this).text(),jQuery('titre', xml).text(),jQuery('description', xml).text()));
    });
};

/**
 * Item html creation helper.
 */
function bloc_photos1_getItemHTML(url,tit, descr)
{
    return '<li><table class="center"><tr><td><img src="' + url + '"  alt="" />'+tit+' - '+descr+'</td></tr></table></li>';
};

jQuery(document).ready(function() {
    jQuery('#bloc_photos1').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: bloc_photos1_itemLoadCallback,
        scroll:1
    });
});

et le fichier php appelé :
<code type="php">
<?php
define('SITE','http://'.$_SERVER["HTTP_HOST"]);
include ('config/connexion_db.php');

// Array indexes are 0-based, jCarousel positions are 1-based.
$first = max(0, intval($_GET['first']) - 1);
//$last = max($first + 1, intval($_GET['last']) - 1);
//on ajoute rien à $first, sinon on a aussi les infos de la photo suivante
$last = max($first, intval($_GET['last']) - 1);

$length = $last - $first + 1;

// ---
$sql_photos1 = '
SELECT
bcia_documents.id_document,
bcia_documents.titre,
bcia_documents.descriptif,
bcia_documents.chemin,
bcia_documents.credits
FROM
bcia_documents, ocia_documents_liens
WHERE
bcia_documents.id_document = bcia_documents_liens.id_document
AND
bcia_documents_liens.objet = "ville"
AND
bcia_documents.statut = "en_ligne"
ORDER BY
bcia_documents_liens.id_objet
';
$resultat = $dbh->query($sql_photos1);
$lignes = $resultat->fetchAll(PDO::FETCH_OBJ);
if (count($lignes)>0) {
$images = array();
$titres = array();
foreach ($lignes as $ligne) {
$images[]= SITE.$ligne->chemin;
$titres[]= $ligne->titre;
$descriptif[]= $ligne->descriptif;
}
}

$total = count($images);
$selected = array_slice($images, $first, $length);
$selected_titre = array_slice($titres, $first, $length);
$selected_descriptif = array_slice($descriptif, $first, $length);

// ---

header('Content-Type: text/xml');

echo '<data>';

// Return total number of images so the callback
// can set the size of the carousel.
echo ' <total>' . $total . '</total>';

foreach ($selected as $img) {
echo ' <image>' . $img . '</image>';
}
foreach ($selected_titre as $titre) {
echo ' <titre>' . $titre . '</titre>';
}
foreach ($selected_descriptif as $desc) {
echo ' <description>' . $desc . '</description>';
}

echo '</data>';
?>
</code >