Рекомендую!

Видеокурс: "Шаблон Joomla 2.5 от А до Я"

diskboxsmall

Научитесь создавать свои собственные уникальные и профессиональные шаблоны для Joomla 2.5!

Добро пожаловать в школу Джумла!

Вы находитесь в центре обучения работы с Джумлой, одной из наиболее мощных, простых и бесплатных систем управления содержимым сайта на планете. Не важно, новичок Вы в использовании этой CMS или профессионал, Школа Джумлы откроет Вам много новых, интересных уроков и советов в видео и текстовом формате по работе с этой системой управления сайтом.  Подробнее...

ЗАГРУЗИТЬ СТАБИЛЬНУЮ ВЕРСИЮ ДЖУМЛА

Добавляем картинки с превьюшками в контент сайта

Иногда при написании материалов сайта используются картинки, часто большого размера. Пользователи, у кого низкая скорость интернета, испытывают некоторые задержки в процессе загрузки больших картинок. Что-бы избежать данной ситуации в статьях используют маленькие картинки с ссылками для возможности просмотра их настоящего размера. Как-же это реализовать в Джумла? Да очень просто!

Есть один Java-скрипт, который реализует данную функцию с очень красивым еффектом. Это - Highslide JS. Есть много расширений Джумла, с помощью которых можно использовать данный скрипт. Одним из них есть плагин Jthumb. По-моему он наиболее удобен в данной ситуации. 

Итак, закачиваем его и устанавливаем как обыкновенный плагин. Активируем его.

Потом обыкновенным способов вставляем картинку в материал. И в коде вставляем класс class="jthumbs"

Вот так должен выглядеть код вставляемой картинки:

<img class="jthumbs" src="/images/stories/uroki/jt1.jpg" border="0" />

 

В самом плагине можна указать ширину и высоту превьюшек, а также их качество

 

 

Чтобы не вставлять класс вручную в код, можно создать файл editor.css с кодом

.jthumbs {border: 0;}

и закачаем данный файл в используемый шаблон в папку css (templates/your_template/css/)

Тогда после вставки картинки, выделяем ее, нажимаем кнопку редактирования картинок:

 

 

и в выпадающем списке классов выбираем jthumbs

 

 


Добавить комментарий


Защитный код
Обновить

Рекомендую!

Новые комментарии

  • Awesome data, Appreciate it. my blog :: Michael ... Подробнее...  
  • http://tuturnrimarlecartaten.webs.com/sharper-image-tv-remote-instructions.pdf ... Подробнее...  
  • http://sterisorgeworkpostmagse.webs.com/keygen-runner-mac.pdf: http://sterisorgeworkpostmagse.webs.com/keygen-runner-mac.pdf ... Подробнее...  
  • http://ninapostspirenemladeasb.webs.com/what-are-the-7-steps-to-problem-solving.pdf ... Подробнее...  
  • Добрый денб пытался сделать у себя на этой странице http://artpostel.by/postelnoe-bele но только ... Подробнее...