3дравствуйте, Гость! | Регистрация| Вход | RSS                    Новые сообщения · Участники · Правила форума · Поиск

  • Страница 1 из 1
  • 1
Форум » Готовые скрипты и интересные решения для системы uCoz » Новости сайта » Вид новостей с увеличением картинки на основе highslide.js
Вид новостей с увеличением картинки на основе highslide.js
SpasikДата: Вторник, 21.09.2010, 01:21 | Сообщение # 1
Генералиссимус
Группа: Администраторы
Сообщений: 31
Репутация: 101
Статус: Offline

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

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

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

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

Прикрепления: 9135242.jpg (90.4 Kb) · 9642874.jpg (91.7 Kb)


Не будите во мне зверя! он и так не высыпается...
 
Форум » Готовые скрипты и интересные решения для системы uCoz » Новости сайта » Вид новостей с увеличением картинки на основе highslide.js
  • Страница 1 из 1
  • 1
Поиск:
cron