Вид новостей с увеличением картинки на основе highslide.js - 7 Февраля 2010 - Saytik+ - | Софт | Обои | Литература | Мобильное | Онлайн ТВ | Радио | Игры

Вид новостей с увеличением картинки на основе highslide.js
Автор: admin , Дата: 07.02.10,20:21 Просмотров: 4607 Не так давно я уже выкладывал скрипт увеличения изображения при клике на него для вида новостей сайта или каталога файлов для сайтов UCOZ на основе lytebox.js. Сегодня предлагаю Вам то же самое только на базе скрипта highslide.js ,в котором я изменил пару параметров ,а именно: - задал параметры выводимого изображения(т.е. все картинки будут выводиться в пределах высота=500 пикселей, ширина=600 пикселей с соблюдением соотношения исходных размеров). В оригинале highslide.js они выводятся до исходного размера,т.е. если картинка на вашем сайте имеет маленькие размеры,а вставлена с завышенными,то при клике она примет исходный размер ,а значит - уменьшится.В моем ,,переделанном,, highslide.js такого не произойдет и картинка примет увеличенные размеры в пределах заданных параметров с соблюдением пропорций... И еще, главным отличием highslide.js от lytebox.js является то,что highslide.js работает и до полной загрузки страницы в отличии от lytebox.js . Порядок установки: 1. Для начала скачиваем архив и содержимое заливаем в корень своего сайта с помощью Файлового менеджера в папку highslide в таком же виде и с такими же именами вложенных папок как в архиве. Скачать архив... А этот код вставляем в шаблоны страниц на которых будут отображаться материалы (в пределах head ): Code <script type="text/javascript" src="/highslide/highslide.js"></script> <link rel="stylesheet" href="/highslide/highslide.css" type="text/css"> <script type="text/javascript"> hs.graphicsDir = '/highslide/graphics/'; hs.outlineType = 'rounded-white'; </script> 2. После этого заходим в ПУ ,Управление дизайном ,Новости сайта,Вид материалов и в самом верху кода добавляем это: Code <style type="text/css"> .pul img {width:1px;} .pul img {height:1px;} .doll img {max-height:300px;} .doll img {max-width:300px; width:expression(document.body.clientWidth > 550? "250px": "auto"); } </style> 3. После этого здесь же заменяем: Code $MESSAGE$ на Code <div align="center" class="doll"><a href="$IMG_URL1$" class="highslide" onclick="return hs.expand(this)"> <img src="$IMG_URL1$" alt="" title="$TITLE$" ></a></div><div class="pul"> $MESSAGE$</div> 4. Если же вы используете в качестве хранения изображений какой-нибудь хостинг, то Code $IMG_URL1$ нужно заменить на Code $OTHER...ваш номер поля...$ предварительно в настройках модуля активировав это поле для url изображения и назвав,к примеру ,,URL картинки,, 5. Если Вы не используете на своем сайте отображение изображения в виде новостей,то можно проделать всё вышесказанное для Страницы материала и комментариев к нему. Вот и всё,после этих установок можно в поле Краткое содержание не добавлять ссылку на изображение(оно добавится само посредством вышеуказанного кода),а если вы это и сделаете,то ничего страшного - оно будет переведено в однопиксельную невидимую точку (для чего и прописан стиль ,,pul,, (стиль для уже существующих новостей на сайте)). Копирование и распространение материала запрещено без указания источника! Источник: http://romale80.ucoz.ru
Читайте наши новости через RSS
Все новости по теме: «Вид новостей с увеличением картинки на основе highslide.js»

Категория: Скрипты \| Теги: uCoz, вид, highslide.js, картинки, новостей, увеличением \| Рейтинг: 5.0/3