Флеш галерея на сайте

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Привлекательная флеш галерея может оказаться полезной для вашего сайта в плане показа различных изображений. Используя её возможности, Вы с удовольствием поделитесь своими фото с друзьями и посетителями вашего блога.

Галерея легко встраивается в дизайн любого проекта, отличается гибкостью настроек, поддерживает функции слайд-шоу и полноэкранного режима.

Установка на сайт

Установка галереи не составит особой сложности, если Вы четко будете выполнять все пункты небольшой инструкции:

1. Скачайте учебный материал и распакуйте в отдельную папку на компьютере. В папке flashgallery находятся вложенные папки css, gallery, img, js, а так же индексный файл. Можно открыть последний в вашем браузере и проверить корректность работы галереи;
2. В папке css расположен файл стилей style.css, который Вы можете отредактировать по своему вкусу, или вовсе убрать, если Вам нужна «чистая» флеш галерея, например, для монтажа в имеющийся дизайн сайта;
3. В папку gallery нужно подобрать и разместить основные изображения для последующего показа. Размеры изображений подберите или сделайте не менее 1920x1200 пикселов, чтобы они могли быть достойно представлены в полноэкранном режиме. Названия изображений можно использовать по умолчанию (от 001 до 014). Если будете использовать свои названия, или пожелаете увеличить количество картинок, внесите коррективы в файл images.xml;
4. Далее, для создания картинок-превью с размерами 150x100 пикселов в папке gallery/tumb, предлагаю такой вариант: скопируйте все основные изображения из папки gallery и вставьте в папку tumb, откройте поочередно в любом редакторе изображений с функцией изменения размеров, например, PaintNet, и сделайте требуемые размеры;
5. В папке img я поместил несколько фоновых изображений. Можно выбрать любое из них и прописать в стилях;
6. Файл slideshowpro.swf - это, собственно, сама галерея;
7. В папке js находится файл скрипта jsFlashVer.js. Он «неприкасаем» и мы будем его считать «данностью свыше»;
8. Наступила очередь индексного файла и остальных файлов. Здесь мы остановимся и рассмотрим немного поподробнее.

Файл index.html

1. В разделе head подключаем JavaScript:

<script type="text/javascript" src="js/jsFlashVer.js"></script>

2. В раздел body, где планируется показ галереи, вставляем следующий код:

<div style="background-color:transparent;text-align:left;margin-left:auto;margin-right:auto;position:relative;width:720px;">

    <script type="text/javascript">
    <!--
    var hasReqestedVersion = DetectFlashVer(9, 0, 0);
    if (hasReqestedVersion)
    {
    AC_FL_RunContent(
        "src", "gallery/slideshowpro?paramXMLPath=setting.xml",
        "base", "gallery",
        "play", "false",
        "loop", "true",
        "width", "720",
         "height", "540",
        "scale", "ShowAll",
        "quality", "High",
        "wmode", "transparent",
        "allowFullScreen", "true",
        "type", "application/x-shockwave-flash",
        'codebase', '//fpdownload.macromedia.com/get/flashplayer/current/swflash.cab',
        "pluginspage", "//www.macromedia.com/go/getflashplayer"
    );
    }
    else
    {
        var alternateContent = 'Для корректной работы требуется FlashPlayer не ниже 9 версии. <strong><a href="//www.macromedia.com/go/getflash/">Пожалуйста обновите FlashPlayer.<\/a><\/strong>';
        document.write(alternateContent);
    }
    -->
    </script>

</div>

          Проверка версии флеш плеера, установленного на компьютере. Для корректной работы требуется FlashPlayer не ниже 9 версии.

          src - путь до файла gallery/slideshowpro.swf, а в качестве параметра paramXMLPath мы передаем ему название файла настроек, который находится в этой же папке.

          Папка, где находятся изображения.

          width - ширина галереи. В нашем случае это 720px. Такая же ширина рекомендуется и для основного блока DIV.

          height - высота галереи.

          allowFullScreen - полноэкранный режим, true - разрешено, false - запрещено.

Файл images.xml

Как уже отмечалось, мы добавили оригинальные изображения в папку gallery, а мини-изображения в папку gallery/tumb. После этого надо прописать пути до них в файле images.xml. Открываем этот файл в текстовом редакторе и делаем так, чтобы получить примерно такую картину:

<?xml version="1.0" encoding="UTF-8"?>
<gallery>
<album>
<img src="001.jpg" tn="tumb/001.jpg"/>
<img src="002.jpg" tn="tumb/002.jpg"/>
<img src="003.jpg" tn="tumb/003.jpg"/>
<img src="004.jpg" tn="tumb/004.jpg"/>
<img src="005.jpg" tn="tumb/005.jpg"/>
<img src="006.jpg" tn="tumb/006.jpg"/>
<img src="007.jpg" tn="tumb/007.jpg"/>
<img src="008.jpg" tn="tumb/008.jpg"/>
<img src="009.jpg" tn="tumb/009.jpg"/>
<img src="010.jpg" tn="tumb/010.jpg"/>
<img src="011.jpg" tn="tumb/011.jpg"/>
<img src="012.jpg" tn="tumb/012.jpg"/>
<img src="013.jpg" tn="tumb/013.jpg"/>
<img src="014.jpg" tn="tumb/014.jpg"/>
</album>
</gallery>

          Путь до основного изображения.

          Путь до картинки-превью.

Как уже было сказано, количество картинок и их названия можно изменять. Переходим к редактированию файла с настройками.

Файл setting.xml

Настройки галереи сосредоточены в этом файле. Их приличное количество, поэтому рассмотрим наиболее важные.

• contentAreaBackgroundAlpha="0.8" - прозрачность фона за картинкой от 0 до 1 (Например, 0.8);
• contentAreaBackgroundColor="0x1d1c1c" – цвет фона за картинкой;
• contentAreaStrokeAppearance="Visible" – показать рамку вокруг галереи (Hidden - без рамки);
• contentAreaStrokeColor="0x262626" – цвет рамки вокруг галереи;
• contentFramePadding="1" – отступ от изображения до границы галереи;
• contentFrameStrokeAppearance="Hidden" – рамка вокруг изображения (Visible - показать рамку);
• contentFrameStrokeColor="0x333333" – цвет этой рамки;
• navBackgroundColor="0x262626" – цвет панели управления;
• navBackgroundAlpha="1" - прозрачность панели управления (от 0 до 1);
• navButtonColor="0xeeeeee" – цвет кнопок;
• navButtonInactiveAlpha=".4" – прозрачность неактивных кнопок (от 0 до 1);
• navButtonShadowAlpha=".6" – тень отбрасываемая кнопками (от 0 до 1);
• navLinkCurrentColor="0xeeeeee" – цвет рамки вокруг активной превью;
• navLinkPreviewAppearance="Visible" – показывать всплывающие изображения над превью;
• navLinkPreviewBackgroundColor="0xffffff" – цвет фона у всплывающего изображения;
• navLinkPreviewSize="140,85" – размеры всплывающего изображения;
• navLinkPreviewStrokeWeight="6" – ширина рамки у всплывающего изображения;
• navLinksBackgroundColor="0x1f1f1f" – цвет фона под мини-картинками;
• navLinkSpacing="10" – расстояние между мини-изображениями;
• navPosition="Bottom" –расположение панели управления (Top - сверху);
• navThumbLinkBackgroundColor="0x666666" – цвет рамки вокруг не активных превью;
• navThumbLinkSize="60,40" – размеры мини-изображений;
• navThumbLinkStrokeWeight="1" – толщина рамки вокруг мини-изображений;
• toolLabels – подсказки, отображаемые при наведении на кнопки;
• toolTextColor="0xFFFFFF" – цвет текста подсказок;
• toolTextSize="10" – размер шрифта;
• transitionPause="3" – время переключения между картинками при слайд-шоу;
• xmlFilePath="images.xml" – путь до файла, в котором содержатся пути до картинок.

На этом всё. Считаю, что расписал процесс установки и настройки детально. Применяйте флеш галерею на своих сайтах и не забывайте посещать мой. Спасибо за внимание и терпение. Пока! L.M.