Comment afficher des images lorsqu'on clique sur un lien en utilisant JQuery, PHP et MySQL ?

Question

Disons qu'un membre affiche 10 images par défaut mais qu'un lien permet d'afficher le reste des images de l'utilisateur en les faisant glisser vers le bas lorsque l'utilisateur clique sur le lien.

Ma question est donc la suivante : je veux pouvoir afficher toutes les images des utilisateurs en les faisant glisser vers le bas lorsqu'un utilisateur clique sur un lien. <a> . Comment pourrais-je résoudre ce problème en utilisant JQuery, PHP et MySQL ?

Answer 1

Consultez ce plugin, ce n'est pas ce que vous avez demandé, mais c'est (IMO) une meilleure solution

http://www.appelsiini.net/projects/lazyload/enabled_fadein.html

BTW : PHP et MySQL sont arbitraires dans cette question car cela dépend de la façon dont vos images sont stockées sur le serveur.

Answer 2

Cela va s'en occuper.

<script>
$(document).ready(function() {
    $(".more").toggle(
        function() {
            $(this).text('less');
            $(this).parent().children(".bottom_images").slideDown("fast");
                    return false;
        },
        function() {
            $(this).text('more');
            $(this).parent().children(".bottom_images").slideUp("fast");
                    return false;
    });
});
</script>
<style>
.bottom_images {
    display: none;  
}
</style>
<div class="container">
    <div class="top_images">
    <?php
    //num images to originally display
    $num_show=10;
    //current position
    $i=1;

    //some code to get user images
    //from database etc
    foreach($images as $image_url) {
        if($i==10) {
            echo '</div><div class="bottom_images">';   
        }
        echo '<img src="'.$image_url.'" />';
        $i++;
    }
    ?>
    </div>
    <a href="#" class="more">more</a>
</div>

Il y a évidemment du pseudo-code pour récupérer les images de l'utilisateur, car il y a plusieurs façons d'obtenir les images, par exemple à partir de la base de données (sous forme de blob ou d'url de texte), en scannant le système de fichiers, par l'entrée de l'utilisateur, etc, etc. J'ai également fait en sorte que vous puissiez ajouter plusieurs conteneurs (plusieurs utilisateurs) sur une seule page.

Answer 3

La manière dont vous voulez procéder dépend de différents aspects.

• Vous pouvez utiliser LazyLoading tel que fourni par Yanick Rochon.
• Vous pouvez précharger toutes les images et simplement afficher les images cachées lorsque
  cliqué.
• Vous pouvez également charger des images supplémentaires en utilisant AJAX
• Vous pouvez charger les images visibles d'abord et après tout ce qui est chargé - précharger les images invisibles afin de les afficher instantanément après avoir cliqué sur un lien.

Décrivez votre problème un peu plus en profondeur.