Сделать все картинки кликабельными в 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 можно листать, как галерею.
Удачи!


 


Комментарии

Комментарии временно отключены. Сайт и информация на нем находятся в спящем режиме.


Похожие записи


© 2006 - 2018, Александр Сергеев