nivoSlider et Masonry (tuto Masonry)

pierrot
Javascript

Bonjour à tous!

J'ai un problème quant à l'utilisation de nivoSlider (http://nivo.dev7studios.com/), ou plutôt l'intégration de plusieur nivoSlider dans une page.

A la fin du tuto Masonry, on a une petite introduction sur la mise en place d'un carrousel dans les bloc, mais sans suite...

J'ai donc décidé de me lancer dans cette aventure :D

Pour commencer, je créer dynamiquement des blocs selon le contenu de ma base de donnée.

<div id="portfolio">
        <?php
        $sql="SELECT * FROM portfolio";
        $req = mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
        while($data=mysql_fetch_assoc($req)){
            $dos = 'images/'.$data"title"].'/min';
            $dir = opendir($dos);
            while($file = readdir($dir)){
                $ext = strtolower(substr($file,-3));
                $allow_ext = array("jpg",'png','gif');
                if(in_array($ext,$allow_ext)){
        ?>
        <div class="bloc ">
            <a class="thumb" href="#projet<?php echo $data"id"]; ?>">
            <img src=<?php echo "\"images/".$data"title"]."/min/".$file."\""?> width="290" height="190"/>
            </a>
            <div class="info" width="890" height="590">
            <div class="slider-wrapper theme-default">
                <div class="ribbon">
                </div>
                <div id="slider" class="nivoSlider">
                    <?php
                    $dos = 'images/'.$data"title"].'/';
                    $dir = opendir($dos);
                    while($file = readdir($dir)){
                    $ext = strtolower(substr($file,-3));
                    $allow_ext = array("jpg",'png','gif');
                    if(in_array($ext,$allow_ext)){ 
                    ?>
                    <img src=<?php echo "\"images/".$data"title"]."/".$file."\""?> alt="" title="#htmlcaption" />
                    <?php
                    }
                    }
                    ?>
                </div>
                <div id="htmlcaption" class="nivo-html-caption">
                    <p><?php echo $data"title"]; ?></p> 
                </div>
            </div>
            <h3><?php echo $data"title"]; ?></h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis dictum ante, eget tristique nulla pulvinar
            vel.</p>
            <p> Fusce risus erat, tincidunt eu ultrices sodales, gravida sed lectus. Donec non turpis mauris. Nunc vitae enim viverra
            ipsum sodales blandit id at lectus. Proin risus est, venenatis sit amet mollis a, vehicula sit amet ante. Duis condimentum,
            urna eget condimentum egestas, massa velit euismod tellus.</p>
            </div>  

        </div>
        <?php
                }
            }
        }
        ?>
        </div>

Ensuite, j'initialise nivoslider: 

<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({
            effect: 'fold',
        });
    });
    </script>

Tel quel, seul le premier bloc contient bien le carrousel avec les images. Les autres bloc on une icône de chargement et n'affiche aucune image.
Le problème, c'est que je dois changer l'id de ma div slider à chaque nouveau bloc, et le préciser à nivoSlider. Mais je ne sais pas comment faire...

j'ai essayé de créer dynamiquement une id unique à chaque bloc (en utilisant l'id de ma table), mais je ne sais pas si on peut créer dynamiquement un nouveau slider en récupérant l'id générer du bloc...

Je ne sais pas si j'ai été assez clair.

Je vous remercie d'avance pour votre aide ;)

19 réponses

Grafikart

Plusieurs id "slider" dans une page ce n'est pas possible, l'HTML interdit ça.

pierrot
Auteur

Oui je sais bien c'est pour ça que je voulais générer les id de mes différentes div et avoir un truc du genre:

$(window).load(function() {
    $('#<?php echo $data"id"] ?>').nivoSlider({
        effect: 'fold',
    });
});
</script>

avec: 

<div id="<?php echo $data"id"] ?>" class="nivoSlider">
                    <?php
                    $dos = 'images/'.$data"title"].'/';
                    $dir = opendir($dos);
                    while($file = readdir($dir)){
                    $ext = strtolower(substr($file,-3));
                    $allow_ext = array("jpg",'png','gif');
                    if(in_array($ext,$allow_ext)){ 
                    ?>
                    <img src=<?php echo "\"images/".$data"title"]."/".$file."\""?> alt="" title="#htmlcaption" />
                    <?php
                    }
                    }
                    ?>
                </div>

au lieu de: 

$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'fold',
    });
});
</script>

J'ai fait le test et ça ne marche pas...

Tu as une idée de comment faire ?

stitox

Okey, je te propose cette solution :

Tu donnes à tous les sliders une classe communne comme ça :

<div class="myslider">
    contenu de ton premier slider, oki!
</div>
<div class="myslider">
    contenu de ton deuxième slider, ko!
</div>

maintenant avec un foreach : 

$(document).ready(function(){
    $('.myslider').each(function(){
        // initialization des slider :)
           $(this).nivoSlider({
                effect: 'fold',
            });
        });
});

Je ne sais pas si cette solution te convient ou pas, j'espère que c'est le cas ;)

pierrot
Auteur

Salut stitox et merci pour ton aide ;)

Alors j'ai bien fait comme tu m'as conseillé de faire. Cependant, le problème persiste mais sous une autre forme. Je m'explique:
lorsque je clic sur chacun des blocs, le nivoslider apparaît mais affiche l'icône de chargement sans afficher les images.

Cependant, la navigation du nivoslider indique bien le nombre d'image contenu dans ma boucle while, et je constate qu'il y a bien la transition auto entre mes différents slide (mais sans les images :( ). Je remarque aussi qu'en actualisant la page, les images apparaissent.

Je me demande si le problème ne se cache pas avec le script de masonry qui affiche et cache les différents blocs. J'ai beau cherché, je ne trouve pas (je pense que je suis arrivé au stade ou je n'ai plus assez de recul pour identifier le problème...)

Je vous fait donc part du code.
portfolio.php:

<?php
    require "config.php";
    mysql_connect(DB_HOST,DB_LOGIN,DB_PASS); 
    mysql_select_db(DB_BDD);

$cats = array('audio','developpement','design');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Pierre</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="" />
    <meta name="keywords" content="" />
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="css/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
    </head>
    <body>
        <div id="header">
        <img src="img/logo.png" alt="logo pierre laurens"/>
            <div id="nav">
        <?php include "menu.php"; ?>
        </div>
    </div>
    <div id="content">
        <h1>Portfolio<small style="float: right; word-spacing: 30px; padding-right: 10px;">
        <?php foreach($cats as $v): ?>
        <a href="#<?php echo $v; ?>"><?php echo $v; ?></a>
        <?php endforeach; ?>
        </small>
        </h1>
        <div id="portfolio">
        <?php

            $sql="SELECT * FROM portfolio";

        $req = mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
        while($data=mysql_fetch_assoc($req)){
            $dos = 'images/'.$data"title"].'/min';
            $dir = opendir($dos);
            while($file = readdir($dir)){
                $ext = strtolower(substr($file,-3));
                $allow_ext = array("jpg",'png','gif');
                if(in_array($ext,$allow_ext)){
        ?>
        <div class="bloc <?php echo $data"cat"]; ?>">
            <a class="thumb" href="#projet<?php echo $data"id"]; ?>">
            <img src=<?php echo "\"images/".$data"title"]."/min/".$file."\""?> width="290" height="190"/>
            </a>
            <div class="info" width="890" height="590">

            <div class="slider-wrapper theme-default">
                <div class="ribbon">
                </div>

                <div id="slider" class="nivoSlider">
                <div class="myslider">

                    <?php
                    $dos = 'images/'.$data"title"].'/';
                    $dir = opendir($dos);
                    while($file = readdir($dir)){
                    $ext = strtolower(substr($file,-3));
                    $allow_ext = array("jpg",'png','gif');
                    if(in_array($ext,$allow_ext)){ 
                    ?>
                    <img src=<?php echo "\"images/".$data"title"]."/".$file."\""?> alt="" title="<?php echo $data"title"]; ?>" />
                    <?php
                    }
                    }
                    ?>
                </div>    
                </div>
                <div id="htmlcaption" class="nivo-html-caption">
                    <p><?php echo $data"title"]; ?></p> 
                </div>
            </div>
            <h3><?php echo $data"title"]; ?></h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis dictum ante, eget tristique nulla pulvinar
            vel.</p>
            <p> Fusce risus erat, tincidunt eu ultrices sodales, gravida sed lectus. Donec non turpis mauris. Nunc vitae enim viverra
            ipsum sodales blandit id at lectus. Proin risus est, venenatis sit amet mollis a, vehicula sit amet ante. Duis condimentum,
            urna eget condimentum egestas, massa velit euismod tellus.</p>

            </div>

        </div>
        <?php
                }
            }
        }
        ?>
        </div>

        </div>
    </body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/masonry.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('.myslider').each(function(){

        // initialization des slider<img src="/img/smileys/smile.png">
        $(this).nivoSlider({
            effect: 'fold',
        });

        });
    });
    </script>
</html>

et le main.js: 

jQuery(function($){
    var portfolio = $('#portfolio');
    portfolio.masonry({
        isAnimated: true,
        itemSelector:'.bloc:not(.hidden)',
        isFitWidth:true,
        columnWidth:300
    });
    $('h1 a').click(function(e){
        var cls = $(this).attr('href').replace('#','');
        portfolio.find('.bloc').removeClass('hidden'); 
        portfolio.find('.bloc:not(.'+cls+')').addClass('hidden');
        portfolio.masonry('reload'); 
        portfolio.find('.'+cls).show(500);
        portfolio.find('.bloc:not(.'+cls+')').hide(500);
        location.hash = cls;
        e.preventDefault(); 
    });
    var bloc = portfolio.find('.bloc:first'); 
    var cssi = {width:bloc.width(),height:bloc.height()};
    var cssf = null; 
    portfolio.find('a.thumb').click(function(e){
        var elem = $(this); 
        var cls = elem.attr('href').replace('#','');
        var fold = portfolio.find('.unfold').removeClass('unfold').css(cssi); 
        var unfold = elem.parent().addClass('unfold').css(cssf); 
        portfolio.masonry('reload'); 
        if(cssf == null){
            cssf = {
                width : unfold.width(),
                height: unfold.height()
            };
        }
        unfold.css(cssi).animate(cssf);
    })
    if(location.hash != ''){
        $('a[href="'+location.hash+'"]').trigger('click');
    }
})

Voila donc si quelqu'un aurait une idée, je suis preneur :D

stitox

Tu testes sous chrome, la première fois il n'affiche pas les images et après avoir raffraichir, les images s'affichaient, dis moi si c'est ça ton problème?

sinon est ce que la page est en ligne, pourrais-je la voir pour faire un test.

pierrot
Auteur

C'est exactement ça mon problème.

Je précise que j'ai testé en mettant

$(document).ready(function(){
        $('.myslider').each(function(){

        // initialization des slider<img src="/img/smileys/smile.png">
        $(this).nivoSlider({
            effect: 'fold',
        });

        });
    });

Dans mon main.js comme s'en suit: 

jQuery(function($){
    var portfolio = $('#portfolio');
    portfolio.masonry({
        isAnimated: true,
        itemSelector:'.bloc:not(.hidden)',
        isFitWidth:true,
        columnWidth:300
    });

    $('h1 a').click(function(e){
        var cls = $(this).attr('href').replace('#','');
        portfolio.find('.bloc').removeClass('hidden'); 
        portfolio.find('.bloc:not(.'+cls+')').addClass('hidden');
        portfolio.masonry('reload'); 
        portfolio.find('.'+cls).show(500);
        portfolio.find('.bloc:not(.'+cls+')').hide(500);

        location.hash = cls;
        e.preventDefault(); 
    });

    var bloc = portfolio.find('.bloc:first'); 
    var cssi = {width:bloc.width(),height:bloc.height()};
    var cssf = null; 

    portfolio.find('a.thumb').click(function(e){
        var elem = $(this); 
        var cls = elem.attr('href').replace('#','');
        var fold = portfolio.find('.unfold').removeClass('unfold').css(cssi); 
        var unfold = elem.parent().addClass('unfold').css(cssf); 
        portfolio.masonry('reload'); 
        if(cssf == null){
            cssf = {
                width : unfold.width(),
                height: unfold.height()
            };
        }
        unfold.css(cssi).animate(cssf);

        //Ici le bout de code de stitox
        $(document).ready(function(){
        $('.myslider').each(function(){

        // initialization des slider<img src="/img/smileys/smile.png">
        $(this).nivoSlider({
            effect: 'fold'
        })

        })
    })
    })

    if(location.hash != ''){
        $('a[href="'+location.hash+'"]').trigger('click');
    }
})

Et la pour le coup, j'ai le même problème d'affichage de mes images avec l'îcone de chargement, SAUF mon premier slider (donc mon premier bloc).
Bien sûr, comme avant, dès que j'actualise, mes images s'affichent.
On progresse, on a un slider qui s'affiche sans actualiser :D

Je vais essayé de le mettre en ligne demain, car je n'est pas mes identifiant FTP là où je suis.

En tout cas merci stitox pour tes réponses ;)

stitox

Essai avec un timer, espérant que cela résoudra ton problème.

$(document).ready(function(){
    setTimeout(function(){      
         $('.myslider').each(function(){
            // initialization des slider<img src="/img/smileys/smile.png">
            $(this).nivoSlider({
                effect: 'fold',
            });   
        });                     
    },500);      
});
pierrot
Auteur

Malheureusement, le problème persiste... Je pense que cela doit provenir du

$(document).ready(function()

Car dès que j'actualise, j'ai bien l'animation masonry et le nivoslider avec les images qui s'affichent.
Du coup, il n'y a pas un moyen de charger nivoslider uniquement quand on clic sur un bloc ?

stitox

je ne sais pas exactement d'ou peut venir le problème, j'avais déjà travaillé avec nivoslider, j'en suis plus fan de ce plugin, j'utilise souvent jCarousselLight car je ne trouve pas des problèmes avec, sinon pour répondre à ta question, je ne sais pas si ce code répondra à ta demande ^^'

$('#block a').on('click', function(e){
        e.preventDefault();
         $('.mySlider').nivoSlider({
                effect: 'fold'
         });   
    });
pierrot
Auteur

Non ça ne marche pas et pour le coup je n'ai plus que l'icône de chargement sur chaque slider (aucune images)...
Merci pour ton aide en tout cas ;)

stitox

Je t'en prie pierrot ;)

pierrot
Auteur

En tout cas si d'autres idées vous viennent à l'esprit, je suis preneur :D

J'ai essayé dans tout les sens et rien n'y fait... En même temps, je ne suis pas encore trop à l'aise avec jQuery.

J'ai fait plusieurs tentatives mais sans succès.

stitox

Au moins, essai de mettre en ligne votre projet, pour je puisse voir réellement ton problème :)

pierrot
Auteur

Alors voila. Désolé pour l'absence de réponse pendant le week-end... J'ai mis en ligne le site ici

Donc si quelqu'un à une idée, je suis preneur. Je n'ai toujours pas trouvé mais je pense que c'est le

$(document).ready(function()

qui pose problème. Car lorsque je clique une première fois sur n'importe quel bloc, celui-ci m'affiche bien les images et dès que je veux affiché un autre bloc... pas d'images... Après je ne veux pas influencer dans vos recherches car le problème vient peut être d'autre part.

pierrot
Auteur

Je pense qu'il faudrait générer les sliders au moment où l'on clic sur un bloc. Le soucis c'est que je ne sais pas comment faire cela... Quelqu'un pourrait-il m'aider s'il vous plait ?
J'ai vraiment envie de réussir à mixer masonry et nivo Slider comme sur le portofolio de Jonathan.

stitox

Bonjour Pierrot,

tu as fait une grosse erreur, on mets jamais un document.ready à l'intérieur du code JS,

portfolio.find('a.thumb').click(function(e){

        //Ici le bout de code de stitox
        $(document).ready(function(){
        $('.myslider').each(function(){

        // initialization des slider<img src="/img/smileys/smile.png">
        $(this).nivoSlider({
            effect: 'fold'
        })

        })
    })

au lieu de faire ça, essai comme ça : 

portfolio.find('a.thumb').on('click', function(e){
        var elem = $(this); 
        var cls = elem.attr('href').replace('#','');
        var fold = portfolio.find('.unfold').removeClass('unfold').css(cssi); 
        var unfold = elem.parent().addClass('unfold').css(cssf); 
        portfolio.masonry('reload'); 
        if(cssf == null){
            cssf = {
                width : unfold.width(),
                height: unfold.height()
            };
        }
        unfold.css(cssi).animate(cssf);

        //Ici le bout de code de stitox
        $('.myslider').each(function(){

        // initialization des slider<img src="/img/smileys/smile.png">
        $(this).nivoSlider({
            effect: 'fold'
        })

    })
pierrot
Auteur

Bonjour stitox et un grand merci pour ton aide encore une fois ;)

Je viens de corriger comme tu m'as dit. Et malheureusement, ça ne marche toujours pas... :(

Pour le coup, plus un seul bloc ne s'anime et donc aucun carrousel n'est visible.

Je me disai bien qu'il y avait un problème avec le document ready, mais je ne sais pas comment le remplacer pour que tout les carrousel se charge en arrière plan et que je les affiche avec un clic sur les différents blocs...

En allant sur le portfolio de jonathan, j'ai vu qu'il générait les sliders en stockant les url des images dans des span qui remplacait ensuite les src des différentes img.

Je sais pas si je ne peux vraiment pas éviter cela... Car il suffit de rafraichir la page pour faire apparaître les images.

stitox

C'est avec plaisir de t'aider, désolé mais j'ai fait tout ce que je peux, sinon est il possible par exemple de me filer par exemple un FTP de test, pour cela tu me crée par exemple un dossier pour test, tu peux les changer après, si ça ne te pose aucun problème, voilà mon gmail elgarch.hicham@gmail.com :D

stitox

C'est avec plaisir, désolé mais j'ai fait tout ce que je peux, sinon est il possible par exemple de me filer par exemple un FTP de test, pour cela tu me crée par exemple un dossier pour test, tu peux les changer après, si ça ne te pose aucun problème, voilà mon gmail elgarch.hicham@gmail.com :D