How to display images when a link is clicked using JQuery, PHP & MySQL?

Lets say a member is displaying 10 images by default but a link will display the rest of the users images by having them slide down when a user clicks a link.

So my question basically is I want to be able to display all the users images buy having them slide down when a user clicks on a link <a>. How would I be able to tackle this problem 开发者_StackOverflow中文版using JQuery, PHP & MySQL?

check this plugin, it's not what you asked, but it's (IMO) a better solution

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

BTW : PHP and MySQL are arbitrary in that question since it depends how your images are stored on the server

This will take care of it.

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

Obviously there is some pseudo code for retrieving the user images as there are a number of ways you could get the images eg. from database (as a blob or text url), scanning the file system, user input etc etc. Also I have made it so you can add multiple containers (multiple users) into the one page.

It depends on various aspects how do you want to do it.

• You can use LazyLoading as provided by Yanick Rochon
• You can preload all the images and simply show the hidden ones when
  clicked.
• You can also load additional images using AJAX
• You can load the visible images first and after all they're loaded - preload invisible images so to show them instantly after clicking a link

Describe your problem a little bit deeper.