Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по Flash / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

Красивая флеш галерея для сайта

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

Пример
Вставлять галерею мы будем при помощи JavaScript, который нужно подключить в начале страницы между тегами <head></head>

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

Этот скрипт есть в исходных файлах, как и все остальные нужные нам компоненты: slideshowpro.swf (собственно сама галерея), images.xml (файл для хранения путей до изображения) и setting.xml (файл настроек). Все их мы разместим в папке gallery, там же где и изображения. Теперь там где нам нужно видеть эту галерею вставляем следующий код:

<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", "true",
        "loop", "true",
        "width", "720",
        "height", "540",
        "scale", "ShowAll",
        "quality", "High",
        "wmode", "transparent",
        "allowFullScreen", "true",
        "type", "application/x-shockwave-flash",
        'codebase', 'http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab',
        "pluginspage", "http://www.macromedia.com/go/getflashplayer"

    );
    }
    else
    {
        var alternateContent = 'Для корректной работы требуется FlashPlayer не ниже 9 версии. <strong><a href="http://www.macromedia.com/go/getflash/">Пожалуйста, обновите FlashPlayer.<\/a><\/strong>';
        document.write(alternateContent);
    }
    -->
    </script>
</div>

Здесь мы проверяем версию FlashPlayer на компьютере пользователя, если она не ниже 9, запускаем галерею, в противном случае выдаем ошибку. Теперь разберем те параметры, которые нам нужны для корректной работы:
src - путь до slideshowpro.swf, который у нас находится в папке gallery, а в качестве параметра paramXMLPath мы передаем ему название файла настроек, который находится в этой же папке.

base – папка, в которой хранятся изображения.
width – ширина галереи.
height – высота.
allowFullScreen – разрешить/запретить полноэкранный режим.

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

<?xml version="1.0" encoding="UTF-8"?>
<gallery>
<album>
<img
src="12c2.jpg" tn="tumb/12c2t.jpg"/>
<img
src="da43.jpg" tn="tumb/da43t.jpg"/>
<img
src="42a2.jpg" tn="tumb/42a2t.jpg"/>
</album>
</gallery>

Все что от вас требуется это изменить название файлов на свои и добавить столько изображений сколько нужно: в параметре src указать названия оригинальных  изображений, а в tn путь до превьюшек. Сохранив изменения и обновив страницу, вы уже должны видеть результат, осталось отредактировать файл с настройками. Настроек очень много, поэтому будем рассматривать наиболее значимые.

contentAreaBackgroundAlpha="1" прозрачность фона за картинкой от 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="8" – время переключения между картинками при слайд-шоу.
xmlFilePath="images.xml" – путь до файла, в котором содержатся  пути до картинок.

Ну, вот основные настройки рассмотрели. Часть настроек я удалил, поскольку они нужны для других  режимов работы галереи. С помощью нее вы можете преобразить свой сайт и показать свои картинки в удобном для пользователей виде.

Автор: Евгений Бочкарев Урок добавлен: 30 Января 2011 в 13:20 Просмотров: 22992

Условия копирования материалов сайта

Все комментарии

Посмотреть предыдущие комментарии (16)

#17 Евгений 22-03-2012 в 20:18
Честно говоря не знаю. Я все приведенные параметры проверял методом тыка
#18 Николай 02-04-2012 в 12:48
Добрый день
Подскажите пож-ста как реализовать подборку фоток следующим образом
фотки для конкретной странице лежат в БД пытаюсь передать id страницы на которой должны появляться фотки и генерировать xml из php появляются внизу только картинки серого цвета
#19 Николай 02-04-2012 в 12:57
все спс разобрался
#20 Евгений 02-05-2012 в 05:03
Подскажите пож-та а можно-ли вставить (и как если да) эту галерею в полную новость DLE 9.5 ?
#21 alex 13-06-2012 в 00:51
а можно картинки сделать кликабельными?
#22 Ростислав 27-06-2012 в 14:09
У меня не работает полно экранный режим, что делать?
#23 alexstis 10-07-2012 в 17:22
Удасная потеря качества... Одни пиксели. На jpg разрешением 3300 x 4200 невозможно прочесть текст.
#24 Александр 26-07-2012 в 02:11
Скажите пожалуйста, у меня флеш сайт, как мне засунуть галерею в него? Спасибо большое заранее за ответ.
#25 Олег 02-02-2013 в 23:28
Классная флеш галарея для вашего сайта!
#26 Евгений 08-11-2013 в 12:31
В полноэкранном режиме не работают кнопки управления. И после выхода с него кусок картинки зависает на всю галерею. Приходится обновлять страницу.
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки