Приветствую Вас, Гость
Главная » Файлы » Все Для Ucoz » Скрипты Для ucoz

Вид новостей с увеличением картинки на основе highslide.js для ucoz
11.03.2011, 20:32

null

Не так давно я уже выкладывал скрипт увеличения изображения при клике на него для вида новостей сайта или каталога файлов для сайтов UCOZ на основе lytebox.js. 


Сегодня предлагаю Вам то же самое только на базе скрипта highslide.js ,в котором я изменил пару параметров ,а именно: 
- задал параметры выводимого изображения(т.е. все картинки будут выводиться в пределах высота=500 пикселей, ширина=600 пикселей с соблюдением соотношения исходных размеров). 

В оригинале highslide.js они выводятся до исходного размера,т.е. если картинка на вашем сайте имеет маленькие размеры,а вставлена с завышенными,то при клике она примет исходный размер ,а значит - уменьшится.В моем ,,переделанном,, highslide.js такого не произойдет и картинка примет увеличенные размеры в пределах заданных параметров с соблюдением пропорций... 

И еще, главным отличием highslide.js от lytebox.js является то,что highslide.js работает и до полной загрузки страницы в отличии от lytebox.js . http://depositfiles.com/files/xwskqvu8q

Порядок установки: 

1. Для 
начала скачиваем архив и содержимое заливаем в корень своего сайта с помощью Файлового 

менеджера в папку highslide в таком же виде и с такими же именами вложенных папок как в архиве.

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>  
<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>

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,, (стиль для уже существующих новостей на сайте)).

Категория: Скрипты Для ucoz | Добавил: AK-47 | Теги: вид, uCoz, На, скрипты для ucoz, увеличением, новостей, картинки, highslide.js, основе, для
Просмотров: 905 | Загрузок: 0 | Комментарии: 2 | Рейтинг: 1.0/1
Всего комментариев: 2
2 Salavat96  
0
Ссылку проверил, она не битая!

1 Griff  
0
Поменяйте ссылку, она битая...

Имя *:
Email *:
Код *: