Поиск:
  • Страница 1 из 1
  • 1
Вид новостей с увеличением картинки на основе highslide.js
Дата: Воскресенье, 27.02.2011, 20:52 | Сообщение # 1
Offline
  • Пользователь
  • SEO'шник
  • 1106 Сообщения
В оригинале 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="$IM G_U RL1$" class="highslide" onclick="return hs.expand(this)">   
     <img src="$IM G_UR L1$" alt="" title="$TITLE$" ></a></div><div class="pul"> $MESSAGE$</div>

4. Если же вы используете в качестве хранения изображений какой-нибудь хостинг, то
Code
$IMG_URL1$

нужно заменить на
$OTHER...ваш номер поля...$
предварительно в настройках модуля активировав это поле для url изображения и назвав,к примеру ,,URL картинки,,

5. Если Вы не используете на своем сайте отображение изображения в виде новостей,то можно проделать всё вышесказанное для Страницы материала и комментариев к нему.

Вот и всё,после этих установок можно в поле Краткое содержание не добавлять ссылку на изображение(оно добавится само посредством вышеуказанного кода),а если вы это и сделаете,то ничего страшного - оно будет переведено в однопиксельную невидимую точку (для чего и прописан стиль ,,pul,, (стиль для уже существующих новостей на сайте)).


ICQ номер: 611361189
Skype : shark5510
Дата: Вторник, 15.03.2011, 00:46 | Сообщение # 2
Offline
  • Премиум
  • [HAWK] UR™
  • 191 Сообщения
старое


Дата: Воскресенье, 20.03.2011, 01:47 | Сообщение # 3
Offline
  • Проверенный
  • I Love Up-Rise...
  • 242 Сообщения
[Table]Не понятно. sad [/Table]
Дата: Среда, 23.03.2011, 11:07 | Сообщение # 4
Offline
  • Пользователь
  • 918 Сообщения
foskaa12, все понятно
  • Страница 1 из 1
  • 1
Поиск:
Администрация проекта не несет ответственности за публикуемые материалы.
Дизайн полностью принадлежит "Up-Rise.Ru".
Дизайн сайта разработал life_man.
© 2025 Сайт управляется системой uCoz.