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

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

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

<script type="text/javascript" src="/highslide/highslide.js"></script>
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
<script type="text/javascript">
hs.graphicsDir = '/highslide/graphics/';
</script>

3.4 Перед:
Code

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

Вставляем:
Code
<a href="$SCREEN_URL$" class="highslide" onclick="return hs.expand(this)">

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

<script type="text/javascript" src="/highslide/highslide.js"></script>
<script type="text/javascript">
hs.graphicsDir = '/highslide/graphics/';
</script>

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$"><!--<s5223>-->Скачать с сервера<!--</s>--></a> ($FILE_SIZE$)<?endif?>
<?if($RFILE_URL$)?> · <a href="$RFILE_URL$" target="_blank"><!--<s5224>-->Скачать удаленно<!--</s>--></a> ($RFILE_SIZE$)<?endif?>
<?if($SCREEN_URL$)?> · <a href="$SCREEN_URL$" target="_blank"><!--<s5187>-->Скриншот<!--</s>--></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 Нажимаем "сохранить"
Готово!



На этом моя статья заканчивается! Удачи! smile

Каталог файлов, Вид материалов


Прикреплённый файл: 403_highslide.rar (202.2Kb)

Рейтинг: 53  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 32195          Комментариев: 26

Похожие инструкции

23.08.2013 в 19:23      0  

кстати ту ошибка при вашем download.png ток листочик был надо /download.png и появился) так вроде▬▬ /download.png
23.08.2013 в 19:13      0  

Помогите плиз у меня фотка грузится при кликании и всё( sad
26.01.2013 в 15:53      0  

Как скриншот выравнять по центру страницы и убрать рекламу?
02.05.2012 в 04:35      0  

неплохо.) но есть две ошибки. пропушен слэш в пути в картинке <?if($FILE_URL$)?><a href="$FILE_URL$"><IMG src="download.png" border=0><?endif?> и ошибка в названии в архиве download2 а в коде download1. в остальном нареканий нет. smile

Прохожий

Спам
02.03.2012 в 23:47      +1  

Вы знаете, я не когда не видел такой гадости, по отношению к автору.
Что вы на него набросились, сделали отрицательный рейтинг..
Сгнобили, показывая что он написал чушь.
А вы собственно много написали? -вот и все!
Молодец Автор! Тебе +, и не слушай этих придурков.
04.03.2012 в 16:06      0  

а кто набрасывался??? я вот только плюсую, так как взял скрипт тут и переделал для себя smile
Те кто в минус загнал, тот не коментит..
04.03.2012 в 16:39      0  

DIREN, Прохожий, спасибо за поддержу!
Больше чем уверен, загоняют в отрицательный рейтинг школьники, которые неаписали убогую статью, и думая, что щас всем запоря рейтинг, победят. tongue

aloooha

Спам
29.02.2012 в 09:23      0  

Статья великолепна, достойный победитель!
29.02.2012 в 09:56      0  

Победитель? За стороний скрипт с рекламой ? smile
Я ничего против конечно не имею, тут хотя бы описано что и куда вставлять и т.д.
Но скрипты как то нужно подготавливать прежде чем выложить smile
27.02.2012 в 18:57      0  

Позволил себе потестить скрипт smile
есть несколько замечаний:
1. В скрипте скрытая реклама на сайт автора скрипта... (левый верхний угол при увеличении картинки)
2. В папке уйма скриптов, но используется только 1 с названием highslide.js, остальные можно смело удалять(я удалил и все работает...)
3. класс CSS используется тоже только 1 - highslide.css
4. В этом css стоит заменить ссылки к изображениям, если все делать так как описано выше:
увидим что в css путь к файлам картинок такой: background: url(graphics/fullexpand.gif)
Хотя загрузив папку в корень, путь у нас такой: background: url(/highslide/graphics/fullexpand.gif)

Вот собственно мои тонкие нюансы happy
Рекламку я разумеется сразу же оффнул, а скрипт взял на заметку. Я не использую скриншоты, потому обустроил его на изображения которые я прикрепляю.
27.02.2012 в 22:03      0  

1.Реклама -это от компании, и у них написанно "редактирование кода запрещено"
2.Я скопировал полный скрипт, думаю, может кому и прогидится:)
28.02.2012 в 07:00      0  

ну как бы они н запрещали, мне она не нужна и я её убрал smile
А полный скрипт - это вообще зачем и кому пригодится без инструкции? smile Я же написал то из всего перечисленного там используется,а значит остальное это ненужных хлам smile
Хотя я уверен что остальные скрипты то же можно под что-то приспособить, CSS у них как мне показалось общий. Просто в CSS я обнаружил так же уйму лишнего, не касающегося этого скрипта оформления... smile
Ну я попозже почищу и CSS
28.02.2012 в 13:49      0  

Буду благодарен если зальешь в паблик lite-версию smile
29.02.2012 в 09:56      0  

если ваш мануал пройдет, то выложу лайтовую версию CSS
27.02.2012 в 14:01      0  

так, из всего перечисленного я понял что тут единственная более менее полезная вещь это скрипт увеличения картинки happy (добрая критика, ничего пренебрежительного)
Кнопки скачать можно установить запросто smile
Скрипт возьму потестить, сяп.
25.02.2012 в 15:58      0  

У меня еще вопрос возник - как сделать, чтобы этот скрипт работал не только в Каталоге файлов, но и на всем сайте?
Добавлять скрипт во все имеющиеся модули - Новостей, Статей, и так далее, верно? Или можно какую-то одну операцию сразу сделать на весь сайт?
25.02.2012 в 21:47      0  

на данный момен возможно проделать только на каталог файлов.
Однако, можно делать через дополнительные поля. "$OTHER1$"
И вставлять туда ссылку на изображение.
26.02.2012 в 01:07      0  

Ясно, спасибо Вам за ответ! smile
24.02.2012 в 14:52      0  

Ошибки исправлены, пожелания выполнены!
25.02.2012 в 00:15      0  

Ну, из Вашего скриншота всё равно ничего непонятно. Короче, я просто нашел Ваш сайт и зашел там в Каталог файлов. Действительно, супер! Надо мне и у себя также сделать.
Опишу для всех остальных, о чем же идет речь, так как я и сам сначала не понимал, что конкретно имеется в виду. ;-)
Автор описывает установку скрипта, позволяющего выводить оригинальное изображение при клике на его уменьшенный скрин, не перезагружая при этом страницу.
У меня вопросы к автору, кстати, возникли:
1) многие картинки при уменьшении искажены. Можно ли их уменьшать в этом скрипте пропорционально, чтобы они не искажались?
2) как влияет работа скрипта на скорость загрузки страницы?
25.02.2012 в 13:02      0  

Уважаемый Antonij!
1. Да, для этого вам понадобится убрать
Code

height="190"

который отвечает за ширину картинки.
2. Сайт не капли не нагружается, проверял по пингу. Возрос на 1мс. Однако, пользователи имеющий браузер "Интернет Экспоуер" ниже 6 версии, будут испытывать проблемы с некорректным отображением, и ошибками.
25.02.2012 в 15:54      0  

Спасибо большое за ответ! smile
1 2 »