Делаем кликабельные миниатюры. WordPress.

Метки: jquery миниатюры, wordpress, миниатюры wordpress, отображение картинок wordpress

В этой статье я расскажу как не просто Вывести миниатюры WordPress, а как сделать так, чтобы они были кликабельными…т.е. при клике на миниатюру Вы могли увидеть ligtbox с полной картинкой.
Довольно часто мы ограничиваемся простым выводом миниатюры WordPress, однако, опишу знакомую многим ситуацию:

Сайт, подобный каталогу товаров, где на каждой отдельной странице выводится миниатюра, текст и…либо коряво вставленные картинки, либо галерея, что уже лучше. Про то, как убрать миниатюры из галереи WordPress я писал ранее, будем считать, что Вы последовали моему совету…но!

Теперь у Вас есть маленькая картинка-миниатюра и гелерея с кликабельными фото (например товар с разных сторон снятый)…а Вам хочется, чтобы люди могли увеличить и саму миниатюру, которая находится, к примеру, в самом начале записи.

Для этого нам потребуется немного времени и совсем нехитрый javascript код. Открываем ваш header.php и добавляем туда подгрузку скрипта со следующим текстом, либо в файле всех ваших скриптов просто добавляем:


jQuery(document).ready(function($){
		$('a.attah img').each(function(){
			var galleryid = Math.floor(Math.random()*10000);
			p_h=$(this).attr('src');
			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%"});
			}
		});
		$("a.lightbox").colorbox({maxWidth:"95%", maxHeight:"95%"});
	});

Теперь постараюсь объяснить что тут происходит…

Если Вы все сделали по инструкции в статье выводим миниатюры WordPress, то скрипт будет работать правильно…сначала найдет вашу ссылку перед картинкой, затем обновит параметр href, и объявит её как lightbox-ссылку.

Очень интересный эксперимент про то, как сделать все картинки кликабельными…думаю там я и расскажу про способ сделать с картинки маленьких размеров ссылку lightbox на оригинал.

Успехов Вам!


 


Комментарии

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


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


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