Как сделать галерею с изображениями на Blogger

Всё началось с того, как в комментариях прозвучал вопрос, часть которого выглядела так:
"Вот у меня много картинок, и мне хотелось бы их выложить на сайт, но, чтобы обязательно внизу были ссылки на них."

Здесь всё более менее понятно. Конечный результат получается примерно следующим:
Где дорога
Код для добавление на сайт или блог

Код для вставки в форум (BBCode)

Ссылка на фотографию

Вот его код, который мы вносим во время написания статьи на вкладке "Изменить HTML":
<div style="text-align: center; text-indent: 0px;"><img border="0" height="366" width="550" src="http://4.bp.blogspot.com/-bxHnM4QvRPI/TdOyTz4LQsI/AAAAAAAAB4k/eU4jISr_1h4/s550/gde-doroga.jpg" alt="Где дорога"/>
Код для добавление на сайт или блог
<script> 
 var today=new Date()
 document.write('<textarea cols="45" rows="2" readonly="readonly" onclick="this.select()"><a href="'+window.location+'"><img border="0" height="366" width="550" src="http://4.bp.blogspot.com/-bxHnM4QvRPI/TdOyTz4LQsI/AAAAAAAAB4k/eU4jISr_1h4/s550/gde-doroga.jpg" alt="Где дорога"/></a></textarea>') 
 </script>
Код для вставки в форум (BBCode)
<script> 
 var today=new Date() 
 document.write('<textarea cols="45" rows="2" readonly="readonly" onclick="this.select()">[url='+window.location+'][IMG]http://4.bp.blogspot.com/-bxHnM4QvRPI/TdOyTz4LQsI/AAAAAAAAB4k/eU4jISr_1h4/s550/gde-doroga.jpg[/IMG][/url]</textarea>') 
 </script>
Ссылка на фотографию
<textarea cols="45" rows="2" readonly="readonly" onclick="this.select()">http://4.bp.blogspot.com/-bxHnM4QvRPI/TdOyTz4LQsI/AAAAAAAAB4k/eU4jISr_1h4/s550/gde-doroga.jpg</textarea>
</div>
Жирным цветом выделены фрагменты, которые нужно добавлять самостоятельно, а именно - это код изображения или его URL-адрес.

Чуть более подробно коснёмся тега textarea - он задаёт область, в которую мы вносим предлагаемый код картинки. В ряде браузеров, конечно, не в IE, мы увидим шесть точек внизу правого угла в форме треугольника. Они говорят о том, что данную форму можно сужать либо растягивать, путём захвата их (точек) мышкой.

Здесь я использовала следующие атрибуты textarea:
  • cols - ширина,
  • rows - высота,
  • readonly="readonly" - поле не может быть изменено пользователем.

Также были применены скрипты:
  • onclick="this.select()" - выделяем всю область при нажатии мышкой,
  • упрощу: +window.location+ - это адрес текущей страницы, на которой мы находимся.

Вторая часть вопроса: как динамически изменять размер изображения.

Уже не плохо. Но далее посмотрим на вторую часть вопроса:
"Как можно сделать так, чтобы при нажатии на картинку она увеличивалась..."
Ответ на него я постаралась изложить в предыдущей статье. Но взглянув на Яндекс.Картинки, где можно выбрать подходящий размер изображения, и используя веб-альбом Picasa, где, как мы уже выяснили, можно легко изменять ширину и высоту фотографии не замедляя загрузку страницы, я решилась усложнить себе задачу. То есть результат должен быть таким: выпадающий список, где при выборе одного из параметров меняется размер рисунка и его данные в теге textarea. Я не умею писать скрипты, поэтому воспользовалась вариантом css-tricks.com, откорректировав его под наши цели.

Размер:
Лестница
Код для добавления на сайт:

Код для добавления на форум:

Ссылка

Вот что нужно сделать, чтобы добиться данного эффекта:
Шаг.1. После <head> добавить скрипт библиотеки JQuery (для Blogger на вкладке "Дизайн"-"Изменить HTML"):
<script src='http://www.google.com/jsapi'/>
<script>
  google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
  $("#listaBanners").change(function() {
    var graphicFileName = $("#listaBanners option:selected").attr("value");
    var newCode = '<a href="'+window.location+'"><img src="' + graphicFileName + '" alt="Название_сайта" /></a>';
    $("#codigoBanner").text(newCode);
    $("#ejemploBanner").html(newCode);
 });
});
$(function() {
  $("#listaBanners").change(function() {
    var graphicFileName = $("#listaBanners option:selected").attr("value");
    var newCode = '[url='+window.location+'][IMG]' + graphicFileName + '[/IMG][/url]';
    $("#codigo1Banner").text(newCode);
 });
});
$(function() {
  $("#listaBanners").change(function() {
    var graphicFileName = $("#listaBanners option:selected").attr("value");
    var newCode = '' + graphicFileName + '';
    $("#codigo2Banner").text(newCode);
 });
});
//]]>
</script>
Шаг.2. Во время написания статьи вставить код:
<form action="#" id="misBanners" style="text-align: center; text-indent: 0px;">
Размер: <select name="listaBanners" id="listaBanners">
<option value="http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s200/lestnica.jpg">200</option>
<option value="http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s300/lestnica.jpg">300</option>
<option selected="selected" value="http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s550/lestnica.jpg">550</option>
<option value="http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s1600/lestnica.jpg">исходный</option>
</select>
<div id="ejemploBanner">
<img src="http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s550/lestnica.jpg" alt="Лестница" height="375" width="550" id="redimimg"/>
</div>
Код для добавления на сайт: 
<textarea cols="45" rows="2" readonly="readonly" onclick="this.select()" id="codigoBanner">&lt;a href="адрес_страницы"&gt;&lt;img src="http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s550/lestnica.jpg" alt="Лестница" border="0" /&gt;&lt;/a&gt;</textarea>
Код для добавления на форум: 
<textarea cols="45" rows="2" readonly="readonly" onclick="this.select()" id="codigo1Banner">[url='адрес_страницы'][IMG]http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s550/lestnica.jpg[/IMG][/url]</textarea>
Ссылка
<textarea cols="45" rows="2" readonly="readonly" onclick="this.select()" id="codigo2Banner">http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s550/lestnica.jpg</textarea>
</form>
Здесь первоначальная ширина картинки, которую пользователи видят без изменения размера, равна 550px, о чём говорит s550 в URL-адресе фотографии. То, что выделено жирным стоит изменить на свои данные. А вместо адрес_страницы указываем текущий URL, например, http://shpargalkablog.ru/2011/05/kak-sdelat-galereyu-izobrazhenii.html.
С одной стороны, цель достигнута, с другой, явно есть недоработки в плане: хотелось бы в идеале уменьшить ручную работу, а URL фото добавлять только один раз. Возможно кто-то из читателей владеет свободным временем и желанием усовершенствовать данный код.

Как сделать ссылку "Сохранить" на изображения Picasa.

Эта статья была бы неполной, если бы нельзя было сделать ссылку "Сохранить" на исходное изображение. Это осуществить как оказалось очень просто. URL-адрес картинки из Picasa имеет вид:
http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s550/lestnica.jpg
Изменив его окончание, мы получим URL
http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/d/
который заключим в конструкцию
<a href="http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/d/">Сохранить</a>
Результат: Сохранить.

Третья часть вопроса: как сделать фотогалерею на Blogger.

...и приводила на другую страницу, где она крупным планом?
Я сначала хотела все фото разместить рядом друг с другом путём применения свойства float, но всё можно сделать более легко и гармонично. Для этого вспомним про новые шаблоны Blogger. То есть от нас требуется только заполнять сообщения с картинками. При этом на Главной будут отображаться их миниатюры. А с помощью ярлыков можно сгруппировать их по разделам "Машины", "Животные", "Аватары" и т.п. Красиво будет смотреться шаблон, где мы расположим сообщения в несколько столбцов - пример.
Rookee — инструменты для привлечения клиентов на сайт
в f t
наверх ↑

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

Alex Smith
С удовольствием читаю "Шпаргалку": одна статья полезней другой и это не комплимент :) Действительно оч интересно.
Скажите, пожалуйста, каким образом можно сделать так, чтобы фото - как у вас, были не кликабельны, как это обычно бывает в Блоггере?
NMitra
Спасибо) Посмотрите статьи:

1)http://shpargalkablog.ru/2011/03/pochemu-uhudshaetsya-foto-pri.html
2)http://shpargalkablog.ru/2010/09/optimizatsiya-images-blogger.html#Blogger
3)http://shpargalkablog.ru/2010/08/podpis-kartinki-html.html
Alex Smith
ОК, действительно - работает :) Жаль, что всё это вручную нужно проделывать(. Вот если бы это можно было бы автоматизировать. Неужели Блоггер'е сами не могут этого сделать?
NMitra
Пожалуй, это вопрос не ко мне))
Aльфонсо Kапоне
Фото именно в тему :)
PANIC
а можно ли сделать так, чтобы при наведении мышки на картинку появлялась надпись с размерами (шириной и высотой) исходного изображения (выложенного на picasa)? потому что в title вручную все писать не хочется.
NMitra
На данный момент соответствующего кода я не знаю. К тому же пользователь может нажать правую клавишу мышки на картинке для выяснения размера.
Тони
Это единственное место где решился написать в надежде на дельный совет. Здравствуйте, залил кучу фото в блог и теперь они не отображаются :( посмотрел исходный код изображений в блоге вот такой и по этой ссылке такое:
http://s3.amazonaws.com/data.tumblr.com/tumblr_lqco6hwdO51qcuqzso1_1280.jpg?AWSAccessKeyId=AKIAJ6IHWSU3BX3X7X3Q&Expires=1314269278&Signature=wMwb9ArNEJ5P7Mv5F5T%2FcONtAZs%3D

Изображения на сайте отображаться, а у меня в блоге нет
Вот ссылка на тоже изображение
http://s3.amazonaws.com/data.tumblr.com/tumblr_lqco6hwdO51qcuqzso1_1280.jpg?AWSAccessKeyId=AKIAJ6IHWSU3BX3X7X3Q&Expires=1314374369&Signature=bOk2zZPgd5JIOq0lwHIdYw7sHBk%3D
Подскажите в чем проблема и как ее решить
Анонимный
точно не уверен на то ли изображение ссылка
NMitra
Здравствуйте! Попробуем разобраться.

Два разных URL-адреса. См. 1314269278 и 1314374369. На тестовом блоге второй вариант работает адекватно. Пробовала по "Вставить изображение"-"По URL". Покажите, пожалуйста, ваш блог с указанным проблемным местом. Непонятно почему программа вдруг решила изменить урл изображения.
Starkkk
исправил, наверно вам будет интересно посмотреть этот фото-проект
NMitra
Красивые фото.
Smaiter
Спасибо! Информация пригодилась очень кстати.
NMitra
Рада слышать.
Starkkk
Можно ли самостоятельно выбирать атрибуты фото, то есть очень большой размер фото - для формата моего блога - маленький, а исходный слишком большой что стает причиной выхода на боковую панель изображения.
P. S. мне нужно менять размер одного, первого фото сообщений.
Я нашел выход юзать паинт и потом выставлять "исходный размер", но нет ли какого-нибудь скрипта с помощью которого можно выбирать размер отдельного фото?
NMitra
Как всегда пытаюсь сообразить, что вы имеете ввиду.))) Посмотрите для начала здесь - http://shpargalkablog.ru/2011/03/pochemu-uhudshaetsya-foto-pri.html
NMitra
Не думаю, что это возможно.
Наталка Михайлівна Зуб
Здравствуйте. Перерыла много на интернете, но так и не нашла. Может вы мне поможете. У меня есть блог "Планета географии", вот ссылка - http://revival2012nataliz.blogspot.com. И там есть страничка "Фотогалерея". Я бы хотела на этой страничке создать несколько фотоальбомов, и чтобы их можно было просматривать, чтобы картинки были кликабельны. Можно ли вообще такое сделать??? Если да - то как???
NMitra
Посмотрите на этом сайте, там много вариантов http://www.cssplay.co.uk/menu/cssplay-anysize-gallery-v2.html Вы такую хотите?
Наталка Михайлівна Зуб
Да,я именно что-то вроде этого хотела, очень интересно. Только не известно, как это сделать. Там что-то так все серьезно...Какие-то разрешения нужно и т.д...Что же делать????
NMitra
После Нового года размещу простой вариант.
Наталка Михайлівна Зуб
Спасибо большое, буду с большим нетерпением ждать.!!!!
Роман
Здравствуйте, вот я опять оказался на вашем блоге, уже с другой проблемой)
При вставке изображения в пост появляется блок "Параметры отображения файла", где в поле "Ссылка" можно указать Произвольный URL.
А при вставке изображения в галерею такого блока нет. Но мне надо создать галерею, чтобы картинки в ней не увеличивались в размере,а были ссылками на другие страницы.
Как это сделать? Буду благодарен, если подскажете. Гуглил,ничего не нашел. Или слишком просто, или запрос не могу правильный подобрать.
NMitra
Здравствуйте, перейдете на вкладку HTML

<a href="http://shpargalkablog.ru/2011/05/kak-sdelat-galereyu-izobrazhenii.html"><img src="http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s550/lestnica.jpg" alt="Лестница" /></a>< a href="http://shpargalkablog.ru/2011/05/kak-sdelat-galereyu-izobrazhenii.html"><img src="http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s550/lestnica.jpg" alt="Лестница" /></a> ...

Роман
простите, не понял..
у меня в редакторе код:
[gallery ids="1947,1944,1941"]
Роман
Оо.. сейчас перечитал статью.. я, кажется, не по адресу(
Ну, это после часа похода по гуглу, проведенных без толку, голова уже совсем не соображает(
Надя Озерянская
Вот вроде тему нашла ближе к моемй вопросу))
При создании сообщения с большим количеством картинок, внизу он вылезли за пределы основного блока , погшли поверх, комментариев, и еще ниже.
Это возможно исправить?