Здесь расскажу вам про то как создать замечательный эффект загибающегося уголка для картинок, изображений, при этом создавать его мы будем с помощью скрипта на языке javascript, по ходу статьи расскажу как данный скрипт подключается в wordpress.

Скачать исходники для статьи можно ниже

Как это будет выглядеть?

Зачем использовать javascript для создания данного эффекта?

1. Вам не нужно тратить свое время на изучения графических редакторов, да и на создание самого эффекта загнутого уголка.

2. Один раз подключив данный скрипт в файле header.php, вы сможете использовать его для любого изображения, картинки, фото на вашем сайте.

3. Вы можете сделать уголок, который будет реагировать на действия пользователя (например, при наведении мышки на картинку уголок будет завиваться и другие эффекты).

Что нужно сделать для создания эффекта загнутого уголка?

1. Скачиваем сам javascript.

Скрипт для данного эффекта можно скачать с сайта разработчика www.netzgesta.de/reflex (скачается папочка со скриптами) или же можете скачать его по следующей ссылке (скачается архив curl.rar, с помощью программы WinRaR распаковываем его и получаем файл curl.js).

Далее нам нужно загрузить скрипт на сервер нашего сайта, а для этого открываем программу FileZilla и перекидываем наш файл curl.js например в корневую папку (в моем примере, а я пользуюсь для теста хостингом hostinger.ru, папка называется public_html), тогда путь до скрита у нас будет следующий: http://название вашего сайта/curl.js

2. Подключаем данный javascript к wordpress.

Если вы хотите применять данный скрипт для нескольких изображений, которые находятся на разных страничках или записях вашего сайта, то лучше подключить его непосредственно в файле header.php.

Для этого открываем его (header.php) – переходим в панель управления вашим сайтом, в левом меню выбираем пункт “Внешний вид”, далее подпункт “Редактор”, справа – в списке шаблонов находим файл header.php (Шапка) и открываем его.

Находим в нем тег </head> и вставляем перед ним следующую строчку:

<script type="text/javascript" src="http://mnogoblog2.16mb.com/curl.js"></script>

Здесь мы подключили javascript с указанием пути до него http://mnogoblog2.16mb.com/curl.js- я закачал данный скрипт в корневую папку своего “тестого” сайта – mnogoblog2.16mb.com.

Также можно вставить подключение данного скрипта непосредственно в запись или страничку (например если вы хотите использовать данный скрипт только на этой страничке или записи), для этого вам нужно открыть страничку или запись и в HTML редакторе поставить ту же самую строчку:

<script type="text/javascript" src="http://mnogoblog2.16mb.com/curl.js"></script>

3. Использование:

Далее, к тегу того изображения, к которому мы собираемся применить загибающийся уголок приписываем класс «curl»:

Допустим у меня на сайте было загружено изображение и путь до него был следующим “http://mnogoblog2.16mb.com/wp-content/uploads/2012/07/01.jpg”.

Тогда прописываем в нужном нам месте на страничке или записи следующий код:

<img class="curl" src="http://mnogoblog2.16mb.com/wp-content/uploads/2012/07/01.jpg" alt="" />

С помощью данного кода мы присвоили нужному нам изображению класс “curl”.

Все теперь готово!

Далее переходим на страничку или запись, где мы вставили изображение с эффектом загнутого уголка и обновляем ее.
И у нас получилось следующее изображение:

Далее рассмотрим имеющиеся у данного скрипта настройки.

4. Настраиваем отображение изображения

4.1. Можно изменить размер уголка в процентах, если добавить к классу параметр  “isize”:

Минимальное значение isize=0.

Максимальное значение isize=100.

По умолчанию =33.

Пример при isize80, код картинки выглядит следующим образом:

<img class="curl isize80" src="http://mnogoblog2.16mb.com/wp-content/uploads/2012/07/01.jpg" alt="" />

4.2. Можно изменить цвет ротора, если добавить к классу параметр  “icolor”:

Минимальное значение icolor=000000.

Максимальное значение icolor=FFFFFF.

По умолчанию =0.

Пример при icolorFFFFFF, код картинки выглядит следующим образом:

<img class="curl icolorFFFFFF" src="http://mnogoblog2.16mb.com/wp-content/uploads/2012/07/01.jpg" alt="" />

Обратный уголок стал белым.

4.3. Можно изменить непрозрачность тени под уголком в процентах, если добавить к классу параметр  “ishadow”:

Минимальное значение ishadow=0.

Максимальное значение ishadow=100.

По умолчанию =66.

Данный эффект будет более заметен на больших картинках.

4.4. Можно инвертировать, то есть расположить изображение под уголком, если добавить к классу параметр  “invert”:

Пример при invert и isize100, код картинки выглядит следующим образом:

<img class="curl icolorFFFFFF isize100 invert" src="http://mnogoblog2.16mb.com/wp-content/uploads/2012/07/01.jpg" alt="" />