Эффект увеличения миниатюр в блоге

увеличение миниатюры
Доброго времени суток, дорогие друзья, читатели и гости блога. И опять разговор про изображения. Никуда от них при ведении блога не денешься. Сегодня у меня для вас эффект увеличения миниатюры при наведении на неё курсора мыши. Да ещё с подписью к изображению. В этой шпаргалке уже были предложены некоторые варианты.
То, о чём идёт речь, можно посмотреть здесь тестовом блоге. И если появилось желание сделать такой же эффект увеличения миниатюр - описание ниже.

Шаг 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>

Шаг 3. HTML. Сразу под кодом CSS (шаг 2) пишем это.
<a class="preview" href=" путь к изображению (адрес картинки) " title="самурай"><img alt="самурай" src=" путь к изображению (адрес картинки) " width="150" /></a>
В двух местах синим цветом вставляем адрес картинки. Первым будет размер миниатюры, вторым - полный размер изображения. Здесь я вам посоветую прочитать статью как работать с изображениями в блоге.

Если нужно сделать галерею из фотографий, как на примере тестового блога, вставляйте ещё код HTML с другими картинками.

Если предполагается часто использовать увеличение миниатюр при наведении на них курсора, то удобнее код CSS вставить в шаблоне блога перед строкой ]]></b:skin> (статья для начинающих блогеров). Но предварительно уберите из него теги <style> и </style>. И тогда остаётся только вставлять в посте код HTML.

А у меня сегодня всё. Спасибо за ваш визит и удачи всем. 

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

  1. Выглядит прикольно, но лично меня раздражает, так как при чтении текста случайно попадаешь мышью на картинку и она перекрывает читаемый текст. Так что тут на любителя.

    ОтветитьУдалить
    Ответы
    1. kiovo, согласна, что на любителя. Но иногда , например для создания галереи фотографий на отдельной странице вполне подходящий вариант.

      Удалить
  2. Зачем все книги читать по кодам и т.д. Достаточно внимательно Ваш блог читать... Вика, Вы программист? Море информации.

    ОтветитьУдалить
    Ответы
    1. Я геолого-разведчик в отставке. Блог это хобби. Спасибо Семён.

      Удалить
  3. Для галереи самое то, что бы не кликать по каждой фотографии. Полезняшка!

    ОтветитьУдалить
    Ответы
    1. Наташа. тебе бы конкурс провести на блоге. Типа выберите 3 или 5 или 10 самых понравившихся вам фотографий за месяц или по теме какой. И по результатам вывести их в виде галереи на отдельную стрницу. Вообще его можно с какой-то периодичностью проводить.

      Удалить
    2. Интересная идея, Вика. Спасибо!

      Удалить
    3. Подумай над этим.

      Удалить
  4. Видел в интернет-магазинах подобное, только там открывается не все изображение, а только тот кусок, на который наведена мышка. Очень полезная штука, когда нужно рассмотреть все детали заинтересовавшего товара.

    ОтветитьУдалить
    Ответы
    1. Да, Иван. Есть такой вариант, но почему-то я сколько не тестировала на своих тестовых блогах ни как не проходит. Скорее всего они перепичканы всякими скриптами. Создам когда новый тестовый сразу испробую. Но не думаю, что кому-то из моих подписчиков он подойдёт. Но всё же.

      Удалить

Пользовательский поиск
Foto Saya
My Photo