[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Фотоальбом в виде выдвигающихся фото.



gugaДата: Воскресенье, 21.03.2010, 15:44 | Сообщение # 1
Admin
Группа: Администраторы
Сообщений: 431
Награды: 2
Репутация: 45

Адрес сайта, на котором нужно скачать(а заодно разобраться с установкой, если английский знаком) такой - http://vikjavev.no/highslide/. Если будете разбираться сами, то читайте на главной раздел Installation, а также зайдите на FAQ.


Итак тут качаем пакет. Жмем на Download как показано на рисунке(обведено красным). Далее попадаем на страницу, где внизу нужно нажать на согласие с лицензионным соглашением. После этого начнется процесс закачки.


После того, как пакет загружен запускайте файл index.htm, затем выбирайте образец того, как бы Вы хотели оформить свои фото в фотоальбоме.(Или может просто на странице, или в информере). Как только определено какой вариант предпочтительнее всего, нужно узнать имя файла, в котором содержится приглянувшийся пример (глянуть в адресной строке браузера) и откыть этот файл(он находится там же, где и index.html). Открыть нужно уже не в браузере, а например, в Dreamweaver-е или в любом понравившемся редакторе, если нет, то в блокноте.


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



  • Выберем в качестве примера последний вариант("Slideshow with individual captions and a controlbar using custom overlay"), кстати, он стоит в галереи на этом сайте. Первым делом, что необходимо, это подключить нужные скрипты на страницу показа. Для этого файлы, в которых эти скрипты описаны должны быть в файловом менеджере. В исходном коде видим строку:
    <script type="text/javascript" src="highslide/highslide.js"> 
    </script>

    Она говорит, что подключен файл highslide.js, который находится в папке highslide, поэтому создавайте папку highslide и туда грузите нужный файл(тут оговорюсь, что лучше грузить highslide.packed.js - он заархивирован и будет грузиться быстрее) и прописывайте эту строчку в шаблон вывода фото:
    <script type="text/javascript" src="highslide/highslide.packed.js"> 
    </script>
    Либо делайте удобную для Вас папку и меняйте путь(главное, корректно подключить скриптовый файл). Вообще по поводу файлового менеджера: лучше всего через Total Commander(помните о пассивном режиме и ограничении длины пароля до 8 символов) загрузить сразу папку graphics и этот вот файл. Лучше всего папкам имена не менять для совместимости в будущем со всеми кодами.

  • Далее, идет код:

    <script type="text/javascript"> 

    hs.registerOverlay(
    {
    thumbnailId: null,
    overlayId: 'controlbar',
    position: 'top right',
    hideOnMouseOut: true
    } );

    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = 'rounded-white';
    hs.captionEval = 'this.thumb.title';

    </script>


    Здесь еще можно добавить строчку, которая уберет верхнюю ссылку powered_by(законно, я смотрела на сайте разработчиков):
    hs.showCredits = false; 

    Это добавлять сразу после
    hs.graphicsDir = 'highslide/graphics/';
    .
    Кстати, строчка выше говорит браузеру, что папка graphics, в которой находятся все графические элементы для отображения элементов навигации на изображении(стрелочки), находится в папке highslide, вот именно поэтому важно сохранить названия папок, чтобы код соответствовал тому, что на самом деле есть.

  • На данном этапе с кодом пока что все. Позже надо будет добавить соответствующие изменения уже в вид изображения(шаблон в Фотоальбоме под названием "Вид фотографий"). Сейчас же нужно разобраться со стилями. В исходном коде примера все стили включены прямо в страницу. Мы же вынесем их в наш файл .css. Для этого просто скопируйте нужные стили в этот файл, предварительно прописав абсолютные пути к изображениям. То есть, если в классе используется запись
    url(highslide/graphics/zoomin.cur)
    , к примеру, то ее нужно изменить обязательно на
    url(http://имя_вашего_сайта/highslide/graphics/zoomin.cur)
    Помните, это важный момент, потому что относительные пути не будут работать - наш файл .css находится не в корне файлового менеджера. Еще хочется отметить, что можно переносить не все записи. К примеру,
    * { 
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    }

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

  • И напоследок осталось разобраться с видом изображения и элементами навигации. Здесь сразу скопируйте код:
     

    <div id="controlbar" class="highslide-overlay controlbar">

    <a href="#" class="previous" onclick="return hs.previous(this)"
    title="Previous (left arrow key)"></a>

    <a href="#" class="next" onclick="return hs.next(this)"
    title="Next (right arrow key)"></a>

    <a href="#" class="highslide-move" onclick="return false"
    title="Click and drag to move"></a>

    <a href="#" class="close" onclick="return hs.close(this)"
    title="Close"></a>
    </div>


    и вставьте его в конце шаблона той страницы, где будет вывод изображений(допустим на главной фотоальбома либо же на странице раздела или странице вывода альбомов или, если информером выводите, то на той странице, где будет информер, после кода $MYINFn$). Этот код отвечает за вывод на изображении кнопок навигации(кстати, можете перевести на русский все надписи). Теперь зайдите в шаблон "Вид фотографий" и там сделайте изменения следующего типа:
    <a id="thumb$ID$" href="$FULL_PHOTO_DIRECT_URL$" 
    class="highslide" onclick="return hs.expand(this)">
    <img src="$PHOTO_DIRECT_URL$" border="0"
    title="$PHOTO_DESCR$" /></a>

    Важно чтобы id был уникальным, поэтому используем глобальный код $ID$, $FULL_PHOTO_DIRECT_URL$ - это путь к изображению, полного размера, здесь важно помнить, что при загрузке изображений фото должны быть большего размера по горизонтали или вертикали чем настройка в Фотоальбоме - "Размеры фотографии, выводимой на отдельной странице:". То есть, когда система загружает фото у нее должен быть мотив сохранить полный размер, а нам это нужно, чтобы потом переменная $FULL_PHOTO_DIRECT_URL$ содержала данные. Можно поставить там минимальные размеры и не дергаться потом. Далее все просто скопировать нужно(класс и обработку события onclick). Затем идет глобальный код $IMAGE$. Если же хотите использовать атрибут title тега img в качестве вывода информации под изображением, то код будет таким:
    <img src="$PHOTO_DIRECT_URL$" border="0" title="$PHOTO_DESCR$" />


Вот и вся установка, если вопросы - в комментарии.

 
  • Страница 1 из 1
  • 1
Поиск:


ЛУЧШЕЕ НА САЙТЕ
ТОП 20-ка последних тем ТОП 20-ка читаемых тем ТОП 20-ка лучших материалов
  • Как качать с DepositFiles
  • Загляните на огонек.
  • Полезно
  • где купить качественные саженцы винограда?
  • Как сэкономить на бензине?
  • Привет всем форумчанам!
  • обратитесь к сетевому администратору для получения доступа
  • Красота. Здоровье. Молодость.
  • Новый Топ пользователей с аватарами для Ucoz
  • Простой и красивый вид формы опроса
  • Красивый информер "кто нас сегодня посетил" для Ucoz
  • Flash радио для сайта
  • Кровавая Мери (Пьяные разговоры) Угар и ржака
  • Обсудим РЖАКА, позитив)))
  • Alan Wakes American Nightmare прохождение
  • I Am Alive прохождение
  • Secret Files 3 прохождение
  • Lucius прохождение игры
  • Прохождение Последняя воля Шерлока Холмса
  • Самая успешная букмекерская контора России
  • Секрет игры новые земли в одноклассниках
  • Куда постить новости - база сайтов
  • Список сайтов где постить новости, постить на сайтах
  • Still Life 2
  • Ожидаемые новинки
  • Меню для UCOZ
  • ОБЩАЕМСЯ
  • загрузчик ntldr
  • Создание красивого поиска для сайтов на uCoz
  • Принимаем заказы! Обработка ФОТО в Photoshop CS
  • Скрипт Online Tv предоставлен сайтом ВидеоЗал
  • Memento Mori
  • МеГа ОбЗоР
  • Куда и как постить, чтобы качали файлы
  • Ответь на вопрос последнего игрока и задавай свой вопрос....
  • Moscow Racer: NoCD/NoDVD (Мини образ)
  • Как качать с DepositFiles
  • Самый огромный член в мире. Длина и размеры пенисов
  • Удаление баннеров с рабочего стола, разблокировка Windows
  • Все способы поднять рейтинг вконтакте бесплатно
  • Демотиваторы (50 фото) на КВИК
    Демотиваторы на квик (93 фото)
    Популярные фразы девушек (76 фото)
    Демотиваторы на КВИК очень смешной выпуск (20 фото)
    Замедленный удар по попке "ОНЛАЙН" и "СКАЧАТЬ"
    Демотиваторы КВИК (20 фото)
    А вот если с утра стояк, а в туалет надо. Инструкция. (8 фото)
    В метро без штанов 2011 только на КВИК
    Время ведьм / Season of the Witch (2010/CAMRip/1400mb)
    Девушки играют в волейбол на КВИК (19 фото)
    8 способов - как парни ходят в туалет (8 фото)
    Демотиваторы (50 шт)
    Демотиваторы самые коментируемые в интернете
    Демотиваторы пятничные (76 фото)
    Забавные фотографии с американских выпускных (91 фото)
    Необычные работы Эрика Йоханссона(Erik Johansson)
    Хатико: Самый верный друг / Hachiko: A Dog's Story (2009) ОНЛАЙН
    Dracula87 MultiBoot Recovery Master DVD 1.0 (12.01.2011)
    Интерны (2012) 6 сезон, Все серии смотреть онлайн
    Древние пришельцы. Все сезоны (2010 - 2011) HDRip + HDTVRip + HDTV
    Каталог-Молдова - Ranker, Statistics