1. Документация
  2. Для разработчика сайта
  3. Файлы шаблона
  4. Комплексные примеры

Как открывать картинки на отдельных страницах

При разработке галерии фотографий, в качестве ссылок на большие фотографии, обычно создают ряд небольших изображений (миниатюр). Открыть картинку в отдельном окне можно по такой ссылке: href='photo.jpg', или лучше href='datafiles/$data[1]', записав в дескрипторе шаблона $types[1]=file.

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


1. Отдельная страница для каждой фотографии.

photos.tpl (шаблон для миниатюры) 
<?php
foreach ($tab as $dat)
echo "
    {$dat['edit']}
    <a href='?page=$dat[3]&file=$dat[2]'>
        <img src='datafiles/$dat[1]'>
    </a>
";
?>

photos.tdd (дескриптор шаблона для миниатюры) 

<?php

$titles[1]='Миниатюра';
$titles[2]='Большое фото';
$titles[3]='Шаблон страницы для фольшого фото';

$types[1]='file';
$types[2]='file';
$types[3]="page template('photo')"; // Шаблон по умолчанию 

$params['multi-record'] = true;

?>

photo.tpl (шаблон большого фото) 
...
<img src='datafiles/{$_GET['file']}'>
...

Закачка миниатюры и большой фотографии происходит в одном окне редактирования. У этого варианта имеется небольшой недостаток - для каждой миниатюры-ссылки, хоть и автоматически, но будет создаваться страница, что проявится в доп.записях в таблицах БД: pages и blocks. Хотя, справедливости ради нужно сказать, что таблиц для самих блоков создано не будет, так как в шаблоне photo данных нет (имя файла передается через URL).


2. Единая страница для всех фотографий.

Сначала стандартным способом необходимо создать страницу с шаблоном photo.tpl (шаблон см. в предыдущем примере). Для этого, где-то должна существовать ссылка, код для которой можно записать, например, в главной панели управления. При этом ссылку, естественно, нужно сделать невидимой для посетителей с помощью конструкции {if $isUser} или закомментировать ее после создания страницы.

mainMenu.tpl 
...
<a href='?page=$dat[12]'>Выбрать шаблон для большого фото</a>

mainMenu.tdd 
<?php
...
$types[12]='page';

?>
Допустим мы создали страницу для большого фото, и для нее был сгенерирован идентификатор 999. В этом случае шаблон для миниатюры будет выглядеть так:

photos.tpl 
<?php
foreach ($tab as $dat)
echo "
    {$dat['edit']}
    <a href='?page=999&file=$dat[2]'>
    	<img src='datafiles/$dat[1]'>			
    </a>
";
?>

photos.tdd 
<?php

$titles[1]='Миниатюра';
$titles[2]='Большое фото';

$types[1]=file;
$types[2]=file;

$params['multi-record'] = true;

?>
Этот вариант более предпочтителен, хотя у него тоже есть небольшой минус - нужно явным образом вписывать идентификатор единой страницы (page=999) в код шаблона photos.tpl.

Примечания

  1. В обоих примерах большое фото будет отображаться в том же окне браузера, закрывая страничку с миниатюрой. Чтобы оно открывалось в новом окне, в миниатюру-ссылку нужно добавть атрибут <a target=_blank ... >
  2. Фотография будет выглядеть более презентабельно, если окно будет иметь определенные размеры, без главной панели управления. Чтобы управлять видом окна воспользуемся методом window.open из арсенала JavaScript. Шаблон миниатюры для второго примера в этом случае будет выглядеть так:

    photos.tpl 
    <?php
foreach ($tab as $dat)
echo "
{$dat['edit']}
<a 
    href='?page={$page}'
    onclick='window.open(\"?page=999&file=$dat[2]\",\"\",\"width=800,height=600\"); 
             return false;'
>
<img src='datafiles/$dat[1]'>			
</a>
";
?>