Построить динамическую галерею изображений Jquery - PullRequest
Новая
       0

Построить динамическую галерею изображений Jquery

0 голосов
/ 28 декабря 2010

Я пытаюсь построить эту галерею:

alt text

Как бы я хотел построить галерею изображений с помощью jquery и автоматически заполнять эскизы в зависимости от того, сколько изображений у меня былов папке?Я хотел бы щелкнуть по миниатюре и открыть новую страницу или разделить изображение большего размера.

Я также хотел бы, чтобы каждый миниатюрный экран постепенно исчезал 1 за другим.

1 Ответ

4 голосов
/ 28 декабря 2010

Этот ответ относится только к части HTML / CSS / jQuery вашего вопроса.

Если вы хотите показывать изображения в папке вместо мини-логотипов Google, вам понадобится простой код на стороне сервера, написанный на языке, таком как PHP или ASP.NET. Если вы используете PHP, я могу написать это для вас.

Я проверял это в IE7 / 8, Firefox, Chrome.

Я старался сделать это как можно проще, пытаясь сохранить детали, которые вы просили:

Демонстрация в реальном времени 

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

В ответ на ваши комментарии: Live Demo # 2

  • Я сделал все "невыбранные изображения" с непрозрачностью 50%.
  • При наведении курсора на изображение оно становится непрозрачным на 100%.
  • Просмотренные изображения имеют фиолетовую рамку вместо красной.
...