Подземный Храм.Форум гнома dedlords

                Блог гнома dedlords 

                     Игровые новости

Воскресенье, 1.12.2024
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Увеличение картинки при клике для вида новостей
KMДата: Среда, 22.12.2010, 00:10 | Сообщение # 1
Царь лилипутАФФ
Сообщений: 880
Статус: Offline
[ Для того чтобы читать сообщения Зарегистрируйтесь или войдите как пользователь ]
Прикрепления: 7152012.jpg (26.1 Kb)


ПЕРЕХОДИ НА СТОРОНУ ЗЛА У НАС ЕСТЬ ПЕЧЕНЬКИ ^^,
 
Сообщение

Также этот скрипт можно использовать для отдельных изображений на любых сайтах (не только на базе UCOZ).
За основу скрипта взят скрипт lytebox.js и немного переделан.
Что нового:
- убраны множество стилей(т.к. это легко настраивается в файле .css под себя)
- большие картинки при клике принимают размеры по отношнию к размерам окна браузера(как и было),а маленькие увеличиваются по отношнию к размерам окна браузера(раньше принимали истинный размер)
- убраны кнопки панели навигации и кнопка CLOSE (окно закрывается по клику на изображение или в любую точку окна браузера(раньше при клике на изображение не закрывалось))
Протестировано в:
* Firefox: Firefox: 3.6
* Internet Explorer: 8.0 (работает несколько медленнее по понятным причинам)
* Opera: 9.64
* Safari: 4.0
* Google Chrome

Заходим в ПУ ,Управление дизайном ,Новости сайта,Вид материалов и в самом верху кода добавляем это:

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" language="javascript" src="/zoom/lytebox.js"></script>    
<link rel="stylesheet" href="/zoom/lytebox.css" type="text/css" media="screen" />

После этого здесь же заменяем:

Code
$MESSAGE$

на

Code
<div align="center" class="doll"><a href="$IMG_URL1$" rel="lytebox" title="$TITLE$"><img alt="" src="$IMG_URL1$" align="center" border="0"></a></div><div class="pul"> $MESSAGE$</div>

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

Code
$IMG_URL1$

нужно заменить на

Code
$OTHER...ваш номер поля...$

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

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

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

Для отдельных изображений все гораздо проще:

Code
<script type="text/javascript" language="javascript" src="/zoom/lytebox.js"></script>    
<link rel="stylesheet" href="/zoom/lytebox.css" type="text/css" media="screen" /><a href="...ссылка на изображение..." rel="lytebox" title="Подпись"><img alt="" src="...ссылка на изображение..." align="center" height="...размер изображения..." border="0"></a>

Автор - KM
Дата добавления - 22.12.2010 в 00:10
  • Страница 1 из 1
  • 1
Поиск:
Новый ответ
Имя:
Текст сообщения:
Опции сообщения:
Код безопасности:

PR-CY.ru Рейтинг игровых сайтов
Google-Add.com - Открытый Каталог Сайтов Яндекс.Метрика