Создаем фотогалерею в блог

суббота, 20 марта 2010 г.

Галерея в блог Очень красивый гаджет для блоггер - “фотогалерея”. Все что было до этого не было таким красивым в оформлении, и таким удобным. Фотогалерею можно добавить в шапку шаблона, сайдбар, подвал,количество картинок не ограничено, при наведении мышки на любую картинку она увеличивается и становится поверх других. Посмотреть как работает гаджет можно здесь.

Итак Получить такую фотогалерею в свой блог можно всего за несколько шагов:
1.Добавляем скрипт галереи в свой шаблон:
Заходи в настройки Изменить Html  и находим следующий тэг:
]]></b:skin>
И сразу перед ним вставляем следующий код:
/* Blogger Zoom Gallery By AllBlogTools.com */
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNeYGMqV4829KCRy8Hisych0mYnGDk3DCuApSxjwOf6seCDXmuTWHR4wMULg1-z6hHh5MQzUjbFivwt2GOe-vf8MDByx009nyznH5OqsouGzxgIlHOAxwtyz-Y0Tt9ZckHBM1axWXfPQQp/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}
Далее находим этот тэг:
</head>
Добавьте следующий скрипт перед ним:
<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Larger thumbnail preview
$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);
} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});
//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {
var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false;
});
});
</script>
Теперь нажмите сохранить изменения.
2. Добавляем фотогалерею в блог:
Заходим настройки Дизайн/Элементы страницы выбираем где мы хотим добавить нашу галерею, и нажимаем Добавить гаджет.
В гаджетах выбираем Html/java script и вставляем в него следующий скрипт:
<ul class="thumb">
<li><a href="#"><img src="ссылка на картинку 1" alt="" /></a></li>
<li><a href="#"><img src="ссылка на картинку 2 " alt="" /></a></li>
<li><a href="#"><img src="ссылка на картинку  3" alt="" /></a></li>
<li><a href="#"><img src="ссылка на картинку 4" alt="" /></a></li>
</ul>
в этом скрипте указываем ссылки к вашим картинкам, вместо # можно вставить адрес страницы на которую вы хотите чтобы переходил посетитель после нажатия на картинку. Количество картинок не ограничено, просто добавляйте строчку
<li><a href="#"><img src="ссылка на картинку 1" alt="" /></a></li>
сколько необходимо раз.
Вот и все, наслаждайтесь приятным гаджетом.

Похожие статьи

15 комментариев:

Скажите коллега, а можно ли его в пост добавлять?

The Neighbour комментирует...

ДА конечно можно. После добавления Java скрипта гаджет будет работать в ваших статьях. Достаточно при написании статьи в Html настройках страницы вставить в нужном месте скрипт галереи, в котором прописать ссылки на картинки и все будет работать.
Только скрипт рассчитан на минимум 4 картинки, если добавите меньше будет еще 2 белых поля.

Благодарю, Вас. Попробую.
Позже отпишусь о результатах эксперимента.

Юля комментирует...

Да сложновато но стоит попробовать

The Neighbour комментирует...

Если возникнут какие либо проблемы, то без стеснения пишите в комментариях, обязательно поможем=)

Италика комментирует...

Здравствует, подскажите, легко ли переделать, чтобы фото шли в один ряд? Например, я хочу растянуть под заголовком.

Unknown комментирует...

в принципе можно, я делал, должно идти в ряд, я уже делал. Если не получиться у вас - скиньте код, разберемся.

Анонимный комментирует...
Этот комментарий был удален администратором блога.
Виталий комментирует...

Подскажите как сделать чтобы более 3-х картинок шли в 1 ряд? Например 5 или 7. И можно ли произвольно варьировать кол-во картинок в строках и столбцах.

Если все сделать как указанно в основном посте, тогда получается в ряду 3 картинки, если больше то начинается новый ряд.

Unknown комментирует...

У меня шло по три картинки, как сделать чтобы более трех шли в ряд не подскажу, надо в коде копаться.

Boom комментирует...

помогите пожалуйста!у меня все палучилась кроме добовлений фоток

Александр комментирует...

Виталию.
Вот этот кусок кода задает количество картинок по ширине галереи:
/* Blogger Zoom Gallery By AllBlogTools.com */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;

В нем ограничивается ширина галереи параметром width: 360px;

Если его увеличивать, то в ширину везут и другие картинки.

Я сейчас это делаю на сайте ателье: http://www.atelienatali.ru/p/blog-page.html

ReversTIME комментирует...

Спасибо! Всё великолепно!!!Сделал в одну строчку. Только вот подскажите, как убрать поля? Чтобы картинки были вплотную к границам.

КатеринаКвашонкина комментирует...

Сергей, здравствуйте. Пытаюсь снова применить ваш урок к своему блогу. Галерея появилась 3*3. Увеличила ширину галереи до размеров центральной части блога : изменила 360 на 590, и left - на center в тексте
/* Blogger Zoom Gallery By AllBlogTools.com */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;

стало 4*2 хотя места еще полно по горизонтали, и не централизовалось...Подскажите, пожалуйста, как централизовать галерею и "вытянуть" до конца в один ряд. Нужно ли для галереи уменьшать изначальные фотографии? И не получается переход по нажатию на фотографии , хотя ссылки рабочие (проверено в отдельном тренировочном посте) - никуда не переходит вообще.

i комментирует...

а как изменить размер картинок?

Отправить комментарий

Оставляйте ваши комментарии

 
 
 

Читать блог на другом языке

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified
 
Copyright ©Lagunof.com
Блога автора книги "Недвижимость: классическая, виртуальная, интеллектуальная" При перепечатке материалов с блога обратная ссылка обязательна
e4a11e6f00df223bf058f2795454739b