Сделать все картинки кликабельными в Worpdress
Метки: wordpress, кликабельные картинки, отображение картинок wordpress
В продолжение статьи про кликабельные миниатюры, предлагаю Вам немного видоизмененный скрипт, с помощью которого можно сделать все картинки в статье в стиле Lightbox.
Допустим, для того, чтобы сэкономить место на странице, Вы разместили картинку большого размера принудительно уменьшив её. Но Вам хочется, чтобы при клике на неё открывался lightbox с увеличенным изображением. Это сделать несложно, особенно пригодится в тех случаях, когда на сайте множество таких моментов.
Опять же, открываем файл ваших javascript скриптов и вставляем следующий код:
jQuery(document).ready(function($){
$("#page a img").each(function(){
var galleryid = Math.floor(Math.random()*10000);
p_h=$(this).attr('src');
//alert(p_h);
p_a=$(this).parent();
if(p_a.attr('href').search('.jpg')==-1 & p_a.attr('href').search('.png')==-1 & p_a.attr('href').search('.gif')==-1 & p_a.attr('href').search('.jpeg')==-1 & p_a.attr('class').search('nolightbox')==-1){
p_a.attr('href',p_h);
}
if(p_a.attr('class').search('nolightbox')==-1){
p_a.colorbox({rel:galleryid, maxWidth:"95%", maxHeight:"95%"});
}
});
});
Расскажу подробно.
#PAGE – это ваш блок (контейнер html) с контентом страницы.
Функция ищем все картинки под ссылками, т.е. не ссылки на картинки, а ссылка на другую страницу (или ЧАЩЕ ВСЕГО) страницу вложения. Ссылка остается, а функция присваивает ей lightbox статус, что делает её кликабельной.
Зачем нужна строка условий? Все просто. Если вдруг ссылка является ссылкой на изображение, то мы не изменяем её href, а просто делаем lightbox…это нужно для тех случаев, когда отображается маленькая картинка, а ссылка идет на оригинал.
Lightbox с миниатюры на оригинал!
Теперь Вы знаете, как сделать все картинки под ссылками а-ля lightbox.
А что, если Вам нужно сделать ВООБЩЕ ВСЕ картинки, даже без ссылок, в стиле lightbox.
Ниже я приведу пример скрипта, который, кстати, используется в портфолио (или когда-то использовался, если что) у меня на сайте.
Так вот, оригинально html такой:
<img src="путь/kartinka-160x120.jpg" alt="картинка"/>
Как превратить в lightbox? Вот таким образом:
jQuery(document).ready(function($){
$(".entry img").each(function(){
var i_src=$(this).attr('src');
var i_alt=$(this).attr('alt') || '';
var i_title=$(this).attr('title') || '';
a_href=i_src.replace(new RegExp("-[0-9]{2,3}x[0-9]{2,3}"),"");
$(this).replaceWith('<a href="'+a_href+'" title="'+i_alt+'" class="lightbox"><img src="'+i_src+'" alt="'+i_alt+'" title="'+i_title+'"/></a>');
});
$(".entry a img").each(function(){
var galleryid = Math.floor(Math.random()*10000);
th_p=$(this).parent();
th_p.colorbox({rel:galleryid});
});
});
Объясню. Ищем все картинки в блоке записи, получаем их параметры (src, alt, title) и затем заменяем html картинки на новый, уже со ссылкой, href которой является видоизмененный через regexp наш alt.
Затем пробегаемся по всем картинкам и их родителей делаем колорбоксами.
Строка galleryid отвечает за формирование уникального REL, если это нужно. Ссылки с одинаковым rel можно листать, как галерею.
Удачи!