Home/ Questions/Q 3619728
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T22:54:55+00:00

Im trying to build this gallery: How would I go about building this image

  • 0

Im trying to build this gallery:

alt text

How would I go about building this image gallery using jquery, and having the thumbnails populate automatically based on how many images I had in a folder? Id like to click the thumbnail and have it open a new page or div with a bigger image.

Id also like to make each thumbnail fade in 1 after the other.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This answer pertains to only the HTML/CSS/jQuery part of your question.

    If you want to show images in a folder instead of mini Google logos, you will need some simple server side code written in a language such as PHP or ASP.NET. If you are using PHP, I can write this for you.

    I’ve tested this in IE7/8, Firefox, Chrome.

    I’ve kept it as simple as I could while trying to keep the details you asked for:

    Live Demo

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo Gallery</title>
<style type="text/css">
html, body {
    margin: 0; padding: 0; border: 0
}
#container {
    border: 1px solid red;
    background: #eee;
    width: 377px;
    height: 355px;
    padding: 0 0 5px 0;
    overflow-y: scroll
}
#container img {
    border: 1px solid red;
    float: left; margin: 5px 0 0 5px
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    //fill container with test images
    $('#container').append(new Array(60).join('<a href="http://www.google.com/images/logos/ps_logo2.png" target="_blank"><img src="http://www.google.com/images/logos/ps_logo2.png" width="64" height="64" /></a>'))

    var $images = $('#container img');

    $images.hide();

    $images.each(function(index) {
        $(this).delay(index * 50).fadeIn();
    });

});
</script>
</head>

<body>

<div id="container">
    <a href="http://www.google.com/images/logos/ps_logo2.png" target="_blank"><img src="http://www.google.com/images/logos/ps_logo2.png" width="64" height="64" /></a>
</div>

</body>
</html>

    In response to your comments: Live Demo #2

    • I made all the “non-selected images” have 50% opacity.
    • When you hover over an image, it gets 100% opacity.
    • Visited images have a purple border instead of red.
    • 0