То, о чём идёт речь, можно посмотреть тестовом блоге. И если появилось желание сделать такой же эффект увеличения миниатюр - описание ниже.
Шаг 1. Javascript. Заходим во вкладку шаблон - изменить HTML. находим закрывающийся тег </body> и сразу над ним устанавливаем этот код.
<script src='https://sites.google.com/site/kangistea/js/imgpreview.js' type='text/javascript'/>
Не забудьте сохранить шаблон.
Шаг 2. CSS. При написании сообщения, переходим в режим HTML и в нужном месте вставляем этот код.
<style>.#preview{
position:absolute;
border:1px solid #ddd;
background:#eee;padding:5px;
display:none;color:#333;
}</style>
position:absolute;
border:1px solid #ddd;
background:#eee;padding:5px;
display:none;color:#333;
}</style>
Шаг 3. HTML. Сразу под кодом CSS (шаг 2) пишем это.
<a class="preview" href=" путь к изображению (адрес картинки) " title="самурай"><img alt="самурай" src=" путь к изображению (адрес картинки) " width="150" /></a>
В двух местах синим цветом вставляем адрес картинки. Первым будет размер миниатюры, вторым - полный размер изображения. Здесь я вам посоветую прочитать статью как работать с изображениями в блоге.
Если нужно сделать галерею из фотографий, как на примере тестового блога, вставляйте ещё код HTML с другими картинками.
Если предполагается часто использовать увеличение миниатюр при наведении на них курсора, то удобнее код CSS вставить в шаблоне блога перед строкой ]]></b:skin> (статья для начинающих блогеров). Но предварительно уберите из него теги <style> и </style>. И тогда остаётся только вставлять в посте код HTML.
А у меня сегодня всё. Спасибо за ваш визит и удачи всем.
Если нужно сделать галерею из фотографий, как на примере тестового блога, вставляйте ещё код HTML с другими картинками.
Если предполагается часто использовать увеличение миниатюр при наведении на них курсора, то удобнее код CSS вставить в шаблоне блога перед строкой ]]></b:skin> (статья для начинающих блогеров). Но предварительно уберите из него теги <style> и </style>. И тогда остаётся только вставлять в посте код HTML.
А у меня сегодня всё. Спасибо за ваш визит и удачи всем.
здесь можно оформить подписку на новые шпаргалки
Выглядит прикольно, но лично меня раздражает, так как при чтении текста случайно попадаешь мышью на картинку и она перекрывает читаемый текст. Так что тут на любителя.
ОтветитьУдалитьkiovo, согласна, что на любителя. Но иногда , например для создания галереи фотографий на отдельной странице вполне подходящий вариант.
УдалитьЗачем все книги читать по кодам и т.д. Достаточно внимательно Ваш блог читать... Вика, Вы программист? Море информации.
ОтветитьУдалитьЯ геолого-разведчик в отставке. Блог это хобби. Спасибо Семён.
УдалитьДля галереи самое то, что бы не кликать по каждой фотографии. Полезняшка!
ОтветитьУдалитьНаташа. тебе бы конкурс провести на блоге. Типа выберите 3 или 5 или 10 самых понравившихся вам фотографий за месяц или по теме какой. И по результатам вывести их в виде галереи на отдельную стрницу. Вообще его можно с какой-то периодичностью проводить.
УдалитьИнтересная идея, Вика. Спасибо!
УдалитьПодумай над этим.
УдалитьВидел в интернет-магазинах подобное, только там открывается не все изображение, а только тот кусок, на который наведена мышка. Очень полезная штука, когда нужно рассмотреть все детали заинтересовавшего товара.
ОтветитьУдалитьДа, Иван. Есть такой вариант, но почему-то я сколько не тестировала на своих тестовых блогах ни как не проходит. Скорее всего они перепичканы всякими скриптами. Создам когда новый тестовый сразу испробую. Но не думаю, что кому-то из моих подписчиков он подойдёт. Но всё же.
Удалить