Loading





Форекс с Альпари

eTXT




Анкетка


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


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

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

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

Флеш галерея на сайте
Демо-пример Исходники (8.2 мб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.


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

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

  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.


Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка