Мини фотогалерея из 11 строк кода

Тема в разделе "Веб-дизайн", создана пользователем UDAV, 25 июн 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    776
    Симпатии:
    153
    Мини фотогалерея из 11 строк кода
    Начинаем с само собой разумеющегося - подключаем библиотеку jQuery:
    HTML:
    <script src="js/jquery-1.3.1.js" type="text/javascript"></script>
    Для выстраивания миниатюр используем ненумерованный список ul, в каждом элементе li которого и будет содержаться миниатюра. Миниатюре - тэгу img, добавим атрибут alt, в который напишем комментарий к фотографии. Картинку-миниатюру заключим в тэг a, атрибут href которого будет указывать на полноразмерную фотографию. С миниатюрами все. Добавим в HTML-разметку элемент div, в который будем загружать полноразмерные изображения при клике на соответствующую миниатюру и вот ему пожалуй придется присвоить идентификатор #imgHolder. Получилась вот такая простенькая разметка:
    HTML:
    <ul>
    <li>
    <a href="max/1.jpg">
    <img src="min/1.jpg" alt="Офигительный жучила..." />
    </a>
    </li>
    .......
    <li>
    <a href="max/7.jpg">
    <img src="min/7.jpg" alt="Гадина какая-то страшная..." />
    </a>
    </li>
    </ul>
    <div id="imgHolder"></div>
    С помощью CSS оформляем разметку так, как нам понравится.
    HTML:
    img { border:none; }
    ul { margin:0; padding:0; list-style:none; }
    ul li { display:inline; }
    #imgHolder {
      position:relative;
      width:800px; height:600px;
      overflow:hidden;
    }
    #imgHolder em {
      position:absolute;
      left:10px; bottom:10px;
      margin:2px 10px; padding:2px 10px;
      background-color:#000;   color:#fff;
    }
    В примере - не показываем рамку у изображений, для списка задаем нулевые значения полей и отступов, для элементов li устанавливаем свойству display значение inline, вытягивая таким образом список в строку. Зададим блоку #imgHolder ширину, высоту и на всякий случай свойству overflow присвоим значение hidden. Позиционируем элемент em внутри div'а абсолютно (сюда будем выводить комментарии к фотографиям) и оформим его соответствующим образом.
    Осталось самое главное - эти одиннадцать строк кода, которые заставят работать эту конструкцию.
    (строк здесь получилось несколько больше, но в исходном коде примера их ровно 11)
    PHP:
    <script type="text/javascript">
    <!--
    $(
    document).ready(function(){
      $(
    'ul img').click(function(){
        var 
    path = $(this).parent().attr('href');
        var 
    alt = $(this).attr('alt');
        $(
    '#imgHolder').animate({opacity0},1000,function(){
          $(
    this).html('<img src=' path ' />').find('img').bind('load',function(){
            $(
    this).parent().append('<em>' alt '</em>').animate({opacity1},1000);
          });
        });
      return 
    false;
      });
      $(
    'ul img:first').click();
    });
    -->
    </script>
    Пример в аттаче.
    З.ы. скрипт не мой.
     

    Вложения:

    • gallery.zip
      Размер файла:
      905,1 КБ
      Просмотров:
      20
    inventor69 и angelShlesse нравится это.
  2. dlsmit

    dlsmit Прохожие

    Отличная галлерея, спс. Особенно порадовало плавное появление самих картинок.
     
Статус темы:
Закрыта.