Делаем кликабельные миниатюры. 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 на оригинал.
Успехов Вам!