Делаем красивый вид каталога файлов

Главная » Администрирование сайта » Настройка основных модулей » Делаем красивый вид каталога файлов

Делаем красивый вид каталога файлов

23.02.2012 в 10:58
Автор: jerrylee

Перейти в базу знаний

В базе знаний есть новая инструкция по этой теме

Здравствуйте уважаемые читатели! Меня зовут Виктор!
В этой статье я расскажу вам как можно красиво оформить каталог файлов.
1. Создание скриншота для файла.
1.1 Заходим в Панель Управления > Каталог файлов > Настройки модуля
1.2 Устанавливаем параметры на "Поля для добавления материалов" поставив одну галочку на "Скриншот"

1.3 Нажимаем "сохранить"
1.4 Заходим в Панель Управления > Управление дизайном > Каталог файлов > Вид материалов
1.5 Вставим между: $TITLE$ и $MESSAGE$ код:

Code

<?if($SCREEN_URL$)?><br><img src="$SCREEN_URL$" alt="$TITLE$" title="$TITLE$" width="400" height="190"></a><br><?endif?>

Примерно это должно выглядеть так:

1.6 Заходим в Панель Управления > Управление дизайном > Каталог файлов > Страница материала и комментариев к нему
1.7 Вставляем между $ADD_TIME$ и $MESSAGE$ код:

Code

<?if($SCREEN_URL$)?><br><img src="$SCREEN_URL$" alt="$TITLE$" title="$TITLE$" width="400" height="190"></a><br><?endif?>

Примерно должно выглядеть так:

1.8 Нажимаем "сохранить"
2. Теперь подробно рассмотрим html код.
2.1

Code

<br>

-новая строка.
2.2

Code

img src="$SCREEN_URL$"

-выводит скриншот на веб страницу.
2.3

Code

alt="$TITLE$"

-В случае если браузер не поддерживает изображение, то будет показываться. описание.
2.4

Code

title="$TITLE$"

-при наведении на картинку будет всплывать данный текст.
2.5

Code

width="400" height="190"

-Отвечают за высоту и ширину изображения (если их убрать, то скриншот будет показывать таким, какой он есть)
3. Красивое оформление скриншота.
Для того, чтобы изображение при нажатии на него плавно увеличивалось, воспользуемся java скриптом "highslide"
3.1 Загружаем в корень сайта папку: highslide
3.2 Заходим в Панель Управления > Управление дизайном > Каталог файлов > Вид материалов
3.3 Вставляем в верху страницы код:

Code

3.4 Перед:

Code

<?if($SCREEN_URL$)?><br><img src="$SCREEN_URL$" alt="$TITLE$" title="$TITLE$" width="400" height="190"></a><br><?endif?>

Вставляем:

Code

3.5 Нажимаем "сохранить"
3.6 Заходим в Панель Управления > Управление дизайном > Каталог файлов > Страница материала и комментариев к нему
3.7 После: </title> с новой строки вставляем:

Code

3.8 Повторяем пункт 3.4
3.9 Нажимаем "сохранить"
4. Создаем красивую кнопку "загрузки"
4.1 Заливаем в корень сайта 2 картинки (будут находиться в прикрепленном архиве)
4.2 Заходим в Заходим в Панель Управления > Управление дизайном > Каталог файлов > Страница материала и комментариев к нему
4.3 Заменяем код:

Code

<?if($FILE_URL$ || $RFILE_URL$ || $SCREEN_URL$)?>[ <?if($FILE_URL$)?><a href="$FILE_URL$">Скачать с сервера</a> ($FILE_SIZE$)<?endif?>
<?if($RFILE_URL$)?> · <a href="$RFILE_URL$" target="_blank">Скачать удаленно</a> ($RFILE_SIZE$)<?endif?>
<?if($SCREEN_URL$)?> · <a href="$SCREEN_URL$" target="_blank">Скриншот</a><?endif?> ]<?endif?>

На:

Code

<?if($FILE_URL$)?><a href="$FILE_URL$"><IMG src="download.png" border=0><?endif?>
<?if($RFILE_URL$)?><a href="$RFILE_URL$" target="_blank"><IMG src="/download1.png" border=0><?endif?>

4.4 Нажимаем "сохранить"
Готово!