Сегодня вы узнаете как создать красивую галерею blogspot на jQuery с эффектом увеличения картинок (zoom эффектом).
Ранее я уже публиковала записи с подробным уроком создания простой галереи blogspot в виде слайд-шоу, а также подборку шаблонов галерей для blogger и создание jquery карусели.
Как сделать красивую галерею blogspot
1. Перейдите в админке blogspot во вкладку Шаблон –> Изменить html. Найлите отрезок кода ]]></b:skin> и вставьте перед ним:
/* Blogger Zoom Gallery */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}
Измените значение ширины (в примере 360 пикселей, выделено красным), если возникнет необходимость изменить ширину всей галереи. Изменяйте размеры каждой миниатюры галереи, уменьшив или увеличив значения width и height, выделенных синим цветом.
2. Теперь найдите в коде шаблона тег </head> и вставьте перед ним:
<script src='https://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Larger thumbnail preview
$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px',
height: '174px',
padding: '20px'
}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '100px',
height: '100px',
padding: '5px'
}, 400);
});
//Swap Image on Click
$("ul.thumb li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});
});
</script>
Если у вас уже подключена библиотека jQuery, то удалите из кода шаблона код скрипта, который выделен красным.
3. Сохраните шаблон.
4. Теперь вставьте собственно изображения в том месте, где вы решили расположить вашу галерею. Проще это сделать при помощи добавления нового элемента страницы HTML / Javascript. Вставьте в него следующий код:
<ul class="thumb">
<li><a href="#"><img src="ссылка на картинку 1" alt="Галерея Изображений на Blogspot с zoom эффектом" /></a></li>
<li><a href="#"><img src="ссылка на картинку 2" alt="Галерея Изображений на Blogspot с zoom эффектом" /></a></li>
<li><a href="#"><img src="ссылка на картинку 3" alt="Галерея Изображений на Blogspot с zoom эффектом" /></a></li>
<li><a href="#"><img src="ссылка на картинку 4" alt="Галерея Изображений на Blogspot с zoom эффектом" /></a></li>
</ul>
Вы можете добавлять и убирать изображения галереи, добавляя или удаляя пункты списка : <li><a href="#"><img src="ссылка на картинку 3" alt="Галерея Изображений на Blogspot с zoom эффектом" /></a></li>
Замените # на ссылки на страницы, куда будут попадать посетители блога, кликнув на изображение галереи.
Измените ссылка на картинку N на прямую ссылку на изображение
Добрый день! Подскажите, пожалуйста, какой вид галереи лучше выбрать, чтобы вставить его на отдельной странице блога и как это сделать! Спасибо!
На отдельной странице лучше вставить простую галерею http://www.mycrib.ru/2012/09/galereya-blogspot.html
Она будет отображаться без проблем, все остальные галереи могут искажаться на странице блога. К тому же не требует правки кода, а следовательно не будет влиять на загрузку всего блога в целом.
Спасибо! Я так и подумала, но хочется чтобы не по одному фото мелькало, а сразу страница показывалась с разными фотогрфиями, в идеале, чтобы их еще и по группам разбить, но вот пока не нашла такого решения.
Violet, я поищу решение, если найду, то обязательно напишу об этом в блоге.
Добрый день!:)))
У меня что не получилось! Галерея появилась в блоге, самих фотогафий нет, но квадратики увеличиваются. ССылки на изображение брала из блога. Что не так?
Marilissa, перепроверьте все, особенно последний код. Если все сделали правильно, то все должно получиться. Код рабочий, перепроверяла на блогах с разными шаблонами.
Вы вставляли галерею в элемент HTML / JavaScript? Если вставить в сообщение блога или в запись, то галерея может отображаться некорректно.
Какие самые распространенные ошибки возникают при вставки изображений:
1. лишние пробелы - проверьте нет ли пробела между кавычками и адресом ссылки на изображение,
2. случайное удаление кавычек.
Если ссылка на изображение у вас вида
http://lh5.ggpht.com/.....jpg?imgmax=800 , то попробуйте урезать ее до jpg, чтобы получилось http://lh5.ggpht.com/.....jpg. Хотя у меня галерея работает и со ссылкой первого вида тоже. Но бывает, что этот "хвост" выдает ошибки.
Вот, пожалуй все возможные варианты...
Mycrib, галерею вставляла в элемент HTML / JavaScript. А вот насчет всего остального сложно. Проверю, конечно. Спасибо Вам))