IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

jCarousel Ajax plusieurs items avec image


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de fazpedro
    Homme Profil pro
    Inscrit en
    Août 2009
    Messages
    506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 506
    Par défaut 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...
    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>

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    sans doute parce que ce n'est pas la syntaxe d'une balise image ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre éclairé Avatar de fazpedro
    Homme Profil pro
    Inscrit en
    Août 2009
    Messages
    506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 506
    Par défaut
    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.

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    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>
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre éclairé Avatar de fazpedro
    Homme Profil pro
    Inscrit en
    Août 2009
    Messages
    506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 506
    Par défaut
    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>

  6. #6
    Membre éclairé Avatar de fazpedro
    Homme Profil pro
    Inscrit en
    Août 2009
    Messages
    506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 506
    Par défaut
    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

Discussions similaires

  1. $watch plusieurs item avec un filtre
    Par chris0938 dans le forum AngularJS
    Réponses: 0
    Dernier message: 09/12/2013, 17h19
  2. Remplir une liste ddslick avec Ajax(plugin liste avec image)
    Par Pelote2012 dans le forum Téléchargez
    Réponses: 0
    Dernier message: 16/10/2013, 15h15
  3. rss et item avec image
    Par pcouas dans le forum Autres langages pour le Web
    Réponses: 0
    Dernier message: 15/12/2011, 13h52
  4. Binding d'un TreeView sur plusieurs niveaux avec images
    Par Spikuria dans le forum Windows Presentation Foundation
    Réponses: 2
    Dernier message: 25/05/2009, 17h17
  5. [AJAX] Appel de plusieurs pages avec Ajax
    Par shadowbob dans le forum Général JavaScript
    Réponses: 16
    Dernier message: 13/02/2006, 18h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo