Работать это будет так. Материал каталога файлов:
Увеличение изображения по клику:
Мы будем использовать поле для добавления скриншота к материалу. Поэтому, для начала войдите в панели управления в настройки модуля "Каталог файлов" и в разделе "Поля для добавления материалов" поставьте галочку рядом со строкой "Скриншот"
После этого, входим в реадктирование шаблона "Главная страница каталога файлов" и в секции HEAD подключаем скрипты и стили, у нас будет два файла стилей (один конкретно для IE6)
<link rel="stylesheet" type="text/css" href="/highslide.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/highslide-ie6.css" />
<![endif]-->
<script type="text/javascript" src="/highslide-full.js"></script>
Пути до файлов исправляйте на свои. Жмём "Сохранить" и заходим в шаблон "Вид материалов". Там нам необходимо в коде после строки
вставить следующее:
<img src="$SCREEN_URL$" width="220" alt="" />
</a>
здесь href - это ссылка на полноразмерное изображение, а src - мини-картинка скриншота. Сохраняемся.
Теперь вам нужно создать в корневой директории своего сайта папку graphics и закачать в неё содержимое одноимённой папки из архива. Также в корневую папку своего сайта закачайте файлы highslide.css, highslide-ie6.css, highslide-full.js
Затем войдите в редактирование файла highslide-full.js и проследите, чтобы в строке:
был правильный путь к вашей папке graphics. Если вы сделали, как я советовал, и создали эту папку именно в корневой директории, менять ничего не нужно.
Если на изображении вы хотите видеть кнопки навигации, а также менять параметры отображения изображения, добавьте в секцию HEAD после строки
следующий скрипт
<script type="text/javascript">
hs.graphicsDir = '/graphics/'; // путь к оформлению
hs.transitions = ['expand']; // способ смены слайдов, может принимать значения: expand, fade, crossfade. А также может иметь вид hs.transitions = ['expand/fade','expand/fade/crossfade'], где первый параметр — стиль появления слайда, второй стиль смены слайдов
hs.fadeInOut = true; // "затухание" при открыти/закрытии слайдшоу
hs.numberPosition = 'caption'; // счетчик может принимать значение caption и heading, что соответствует позиции вверху/внизу
hs.dimmingOpacity = 0.75; // прозрачность фона
hs.align = 'auto'; // расположение слайда относительно экрана, возможные значения center/left/right/top/bottom, а так же их комбинации в парах, если auto — распологается на своём месте
// добавляем блок навигации (стандартный)
if (hs.addSlideshow) hs.addSlideshow({
interval: 5000, // интервал смен в милисеках
repeat: false, // повторять/не повторять
useControls: true, // использовать ли кнопки навигации?
overlayOptions: {
opacity: .6, // прозрачность панели навигации
position: 'bottom right', // позиция панели навигации
hideOnMouseOut: true // панель спрячется, если убрать курсор мыши со слайда
}
});
</script>
Адаптация под uCoz: PS-Studio.Info
