Уроки WordPress - Оформляем картинки с помощью jQuery

rss2email.ru

Получайте новости с любимых сайтов:

Глум над рекламой и брендами

Скидки, обзоры и тенденции авторынка

Блог Димка о бизнесе, seo, блогах.

Рейтинги, секреты Веб 2.0 и соц. сетей

Уроки WordPress WordPress – это просто! http://wphelp.ru рекомендовать друзьям >>

---

• Оформляем картинки с помощью jQuery
  

  Многие блогеры знакомы с красивым оформлением рекомендуемых записей с помощью плагина Featured Content Gallery.

  Мы имеем картинку, а на ее фоне всплывающая полупрозрачная полоса с заголовком и анонсом статьи. Расскажу, как создать подобный эффект для любого изображения в шаблоне или статье. Всплывающая полоса с текстом будет появляться при наведении мышкой.

  

  Нам понадобиться плагин jQuery Hover Image Text (не путать с плагином WordPress).

  Сразу его изменяем, чтобы наша страничка прошла валидацию html (заменяем знак p на span). Исправленную версию можно скачать тут.

  Файл jquery.hoverimagetext.js копируем в папку с шаблоном.

  Открываем файл header.php и добавляем перед тегом </head> следующий код:

  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="<?php bloginfo ('template_directory'); ?>/jquery.hoverimagetext.js"></script> <script type="text/javascript"> $(document).ready (function () { /* options can be found within the plugin js */ $('.imageLibrary a').HoverImageText (); }); </script>

  Далее в самом тексте мы вставляем изображения в таком виде:

   <ul class="imageLibrary"> <li><a href="http://site.ru/1"><span><strong>Заголовок 1</strong><br />Здесь ваш текст</span><img height="124" src="http://site.ru/images/pic1.jpg" width="254" alt="Название картинки" /></a></li> <li><a href="http://site.ru/2"><span><strong>Заголовок 2</strong><br />Здесь ваш текст</span><img height="124" src="http://site.ru/images/pic2.jpg" width="254" alt="Название картинки" /></a></li> <li><a href="http://site.ru/3"><span><strong>Заголовок 3</strong><br />Здесь ваш текст</span><img height="124" src="http://site.ru/images/pic3.jpg" width="254" alt="Название картинки" /></a></li> </ul> 

  Добавляем стили в файл style.css

   .imageLibrary { display: inline; clear: none; }  .imageLibrary li { list-style-type: none; display: inline; clear: none; } .imageLibrary span {  position: absolute;  margin-left: 8px;  margin-top: 91px;  z-index: 2;  background-color: black;  color: #ffffff;  width: 254px;  text-align: center;  opacity: .8;  display: none;  clear: none;  font-size: 11px;  line-height: 18px;  padding: 5px 0px 5px 0px; }  .imageLibrary p strong {  font-size: 14px; } .imageLibrary img { z-index:1; width: 254px; height: 124px; } 

  В стилях вы можете задать свою высоту и ширину картинок, соответственно изменится отступ от верха картинки до начала полупрозрачной полосы: margin-top: 91px;

  В итоге при наведении на картинку получаем всплывающую полупрозрачную полосу с описанием. Живую демонстрацию можно посмотреть тут.

  Источник: Уроки WordPress

  .

  
  

  Переслать

  
  
  

---

rss2email.ru

отписаться: http://www.rss2email.ru/unsubscribe.asp?c=41890&u=559355&r=716358152 управление подпиской: http://www.rss2email.ru/manage.asp