Все для создания сайта

Адрес сайта, на котором нужно скачать(а заодно разобраться с установкой, если английский знаком) такой - 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$" />

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