• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Автоматическое уменьшение картинок в любом разделе сайта
Автоматическое уменьшение картинок в любом разделе сайта
workman
Воскресенье, 10 Августа 2014 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Автоматическое уменьшение картинок в любом разделе сайта, где существует тег - $MESSAGE$
Данный скрипт будет просто незаменим для большинства администраторов сайтов, так как он превратит все изображения, которые превышают по высоте 200px и ширине 400pxв миниатюры, при клике по которым пользователи смогут увидеть в лайтбокс окне от uCoz их полноразмерные оригиналы

Установка:
Форум — Вид материалов — Замените $MESSAGE$ на:
Код
<div class="apomessage">$MESSAGE$</div>

В нижнюю часть CSS файла ставите это:
Код
.apomessage img {  
    max-width:400px; max-height:200px;   
   -moz-border-radius: 6px; /* закругление для старых Mozilla Firefox */  
   -webkit-border-radius: 6px; /* закругл. для старых Chrome и Safari */  
   -khtml-border-radius:6px; /* закругл. для браузера Konquerer системы Linux */  
   border-radius: 6px; /* закругление углов для всех, кто понимает */  
}  

Если Вы решили поменять размеры на свои, то также не забывайте поменять их в скрипте, иначе работать не будет.
Далее:
Форум — Общий вид страниц форума — перед < /body> вставляйте:
Код
<script>$(document).ready(function(){$('.apomessage img').mouseover(function(){if(parseInt($(this).css('height'))==200||parseInt($(this).css('width'))==400){if($(this).parent('a').html()!=null      ){$(this).after('<a href="'+$(this).parent('a').attr('href')+'" class="ulightbox"><img src="'+$(this).attr('src')+'"></a>');$(this).remove()}else{$(this).after('<a href="'+$(this).attr('src')+'" class="ulightbox"><img src="'+$(this).attr('src')+'"></a>');$(this).remove()}}})});</script>


Смотрим пример работы скрипта тут: http://www.talk-russia.ru/forum/9-18-1
Самое что прикольное в работе данного скрипта, так это то что он уменьшает и увеличивает картинки,которые прописывались даже с помощью ВВ кодов в виде: img.../img
Страна: (RU)
Kosten
Воскресенье, 10 Августа 2014 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
workman, это отличный код. Вот если б можно было тайтл проставлять.. цены бы не было cool
Страна: (RU)
Kosten
Воскресенье, 10 Августа 2014 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
workman, поздравляю.. теперь ты вип.. и подпись можешь оставить активную на сайт или картинку cool
Страна: (RU)
workman
Воскресенье, 10 Августа 2014 | Сообщение 4
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Kosten ()
поздравляю.. теперь ты вип..

Спасибо!!! Я всегда знал что ДЕСАНТ своих не бросает!!!!!!!!! biggrin
Страна: (RU)
Kosten
Воскресенье, 10 Августа 2014 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
workman, с прошедшим праздником cool и разведчик десанта всегда поймет ситуацию в считанные секунды smile
Страна: (RU)
workman
Воскресенье, 10 Августа 2014 | Сообщение 6
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Kosten ()
Вот если б можно было тайтл проставлять.. цены бы не было

Тайл говоришь??? Ну чтож... Вот тебе тайл
Код
<script type="text/javascript">$('img').attr({'title': 'Нажмите для увеличения'};);</script>


biggrin biggrin biggrin
Страна: (RU)
workman
Воскресенье, 10 Августа 2014 | Сообщение 7
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Спасибо!!! 5 ноября тоже с поздравлениями приду...
Страна: (RU)
Kosten
Воскресенье, 10 Августа 2014 | Сообщение 8
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Да с тайтлом шикарно для поисковиков..
5 ноября ждемс victory
Страна: (RU)
workman
Воскресенье, 10 Августа 2014 | Сообщение 9
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Kosten ()
Да с тайтлом шикарно для поисковиков..

В основном, для поисковиков полезен alt... Я тут оставлял уже данный скрипт
Страна: (RU)
Kosten
Воскресенье, 10 Августа 2014 | Сообщение 10
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
В меню сайта интересно можно прописать alt ?
Прописать то можно.. но в тему будет.. основном на картинки идет.
Страна: (RU)
workman
Воскресенье, 10 Августа 2014 | Сообщение 11
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Kosten ()
В меню сайта интересно можно прописать alt ?

Я на своих сайтах прописал везде в основном
Страна: (RU)
Kosten
Воскресенье, 10 Августа 2014 | Сообщение 12
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
workman, сенкью вери мач.. тоже надо прописать ключи biggrin думаю лишним не будет.
Страна: (RU)
workman
Воскресенье, 10 Августа 2014 | Сообщение 13
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Изменил код. В него добавил title.
Код
<!-- Уменьшение картинки -->
<script>$(document).ready(function(){$('.apomessage img').mouseover(function(){if(parseInt($(this).css('height'))==200||parseInt($(this).css('width'))==400){if($(this).parent('a').html()!=null  ){$(this).after('<a href="'+$(this).parent('a').attr('href')+'" class="ulightbox"><img src="'+$(this).attr('src')+'" title="Нажмите для увеличения картинки"></a>');$(this).remove()}else{$(this).after('<a href="'+$(this).attr('src')+'" class="ulightbox"><img src="'+$(this).attr('src')+'" title="Нажмите для увеличения картинки"></a>');$(this).remove()}}})});</script>
<!-- /Уменьшение картинки -->
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Автоматическое уменьшение картинок в любом разделе сайта
  • Страница 1 из 1
  • 1
Поиск: