Логотип
Маковецкий.RU
Ссылка на твиттер

52 комментария к записи "Увеличение изображения на сайте с помощью html и CSS"

  1. Ольга от пишет:

    Давно хотела сделать подобное увеличение изображений. Сначала попробую использовать html и CSS. А потом ещё и скриптами займусь.

    • Никита от пишет:

      С использованием скриптов красивее. Только и всего, а на html и CSS проще.

      • Руслан от пишет:

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

        • Никита от пишет:

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

          • Руслан от пишет:

            Ага спасибо, нашел.

  2. Руслан от пишет:

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

  3. Нина от пишет:

    Спасибо вам огромное, все работает. Очень помогают разобраться в скрипте ваши комментарии, это при том, что я очень далека от веб программирования и ничего кроме html никогда не использовала. Вы не любитель, вы настоящий сенсей)))

  4. Александр от пишет:

    Спасибо! Очень классная и простая фишка, без скриптов и лишней нагрузки на сервер Спасибо!!!

  5. Дмитрий от пишет:

    Отличная статья, даже не думал что так просто всё можно сделать через код!

  6. алексей от пишет:

    Спасибо!!!!!!!

  7. Иван от пишет:

    второй день ищу самый простой способ сделать галерею с помощью css, везде все оч сложно много всего непонятного, Наткнулся на ваш сайт… Просто не нарадуюсь спасибо!

  8. Иван от пишет:

    Единственное. как сделать чтобы увеличенная картинка просто в момент увеличения поверх всего была. чтобы не сдвигала своим увеличением другие картинки

    • Никита от пишет:

      Такой вариант возможен. Видел на каком-то сайте подобное решение, но не помню на каком…

  9. Василий от пишет:

    Для меня это очень нужная информация. Только у меня не получается первым методом увеличить изображение.

    • Никита от пишет:

      Попробуйте другие методы. Может получится. Может быть такое, что сам wordpress не воспринимает должным образом этот код.

  10. Роман от пишет:

    Подскажите пожалуйста как добавить надпись в рамке под картинкой при увеличении по клику, так же как в случае с увеличением при наведении.

    • Никита от пишет:

      Попробуйте поиграться со span-ом — добавить надпись и стили как и в примере с наведением.

  11. Костя от пишет:

    У меня последний вариант увеличения картинки работает в «Opera», «Firefox». В «Internet Explorer» почему то не работает. Подскажите пожалуйста, что дописать в коде.

  12. Vladimir от пишет:

    Мне надо, чтоб картинка-мини стояла в левом сайтбаре. Но при увеличении она накрывает страницу с контентом (контент – справа). Все мне нравиться, но контент просвечивается сквозь увеличенную картинку – очень некрасиво! Как исправить? Спасибо!

  13. Роман от пишет:

    Подскажите, почему не получается вывести несколько картинок на одной странице? Все миниатюры видны, но по клику на любой из них увеличивается только первая картинка. Все пути прописаны правильно.

    • Никита от пишет:

      Посмотрите внимательно исходный код страницы на моем блоге, где приведен пример с несколькими миниатюрами.

      • Роман от пишет:

        А какую именно страницу смотреть, киньте ссылку если не затруднит.

        • Никита от пишет:

          Извините, перепутал. Нет на блоге такой страницы.

          • Макс от пишет:

            Не могли бы вы подсказать, как сделать увеличение нескольких картинок, последним способом? спасибо!

          • Никита от пишет:

            Попробуйте продублировать данную конструкцию:

            <div class="blokimg">
            <div class="overlay" id="open">
            <div class="overlay_container">
            <a href="#close">
            <img src="путь к изображению"/>
            </a>
            </div>
            </div>
            <a href="#open">
            <img style="width:ширина в px уменьшенного изображения" src="путь к изображению" />
            </a>
            </div>
          • Роман от пишет:

            Все равно ничего не получается, даже продублировав. Выводится только первая картинка.

  14. Андрей от пишет:

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

  15. Азат от пишет:

    Спасибо! Самое лучшее описание. Просмотрел несколько сайтов с подобной темой, но здесь описано и преподнесено — на уровне! Спасибо!

  16. Наталья от пишет:

    Спасибо огромное!!!!
    Несказанно помогли.
    Давно искала что-то простое т.к. у меня нет доступа в корневую папку сайта.
    Теперь буду ваять :roll:

  17. Алексей от пишет:

    клик по картинке и закрытие при клике в любом месте — даже близко не работает! автор хрень какую то скопировал с других сайтов!

  18. Александр от пишет:

    Самый лучший вариант из всех найденных мною. Простой код, прекрасная работа.
    Но есть вопрос:
    Как сделать так, чтобы картинка сворачивалась при повторном клике на нее?

    • Никита от пишет:

      А какой вариант именно? В статье просто несколько вариантов.

      • Александр от пишет:

        Вот в этом варианте:

        .click {width: ширина изображения в уменьшенном виде в px; cursor:pointer; display:inline;}
        .click:focus {width: ширина оригинального изображения в px (или auto); z-index:100;}
        

        Что изменить, чтобы изображение сворачивалось при клике не в любом месте страницы, а только при клике на изображении?

  19. Сергей от пишет:

    Спасибо! Очень помогло!

  20. Жека от пишет:

    Помогло спасибо админу!!!

  21. Владимир от пишет:

    Никита добрый день.
    Картинка увеличивается но назад по клику не возвращается?

  22. feuer81 от пишет:

    Последний вариант очень кстати, только он с ID, а если несколько картинок на странице?

  23. Татьяна от пишет:

    Здравствуйте!
    Подскажите, пожалуйста, куда и как правильно вставить код для увеличения картинки на сайте — при одном наведении курсора изображение станет большим.

    • Никита от пишет:

      Вставляете в нужное место на странице этот код:

      <img src="http://путь к изображению" style="width:100px;" onmouseover="this.style.width='431px'" onmouseout="this.style.width='100px'" />
  24. Владимир от пишет:

    Здравствуйте Никита. Я вставил в свой блог ваш скрипт: http://pastebin.com/LnSNW4SJ
    На странице: http://oco.su/glavnaya/servis-besplatnoy-raskrutki-sayta-na-avtomate/ чтобы картинка увеличивалась при клике на нее. Картинка увеличивается, но почему то не по центру, а смещается вверх и вправо, смотрится некрасиво. Подскажите пожалуйста, что сделать, чтобы картинка увеличивалась ровно по центру?

    • Никита от пишет:

      Странно. Я посмотрел. Картинка открывается по центру, но есть небольшое смещение из-за рамки вокруг нее.

Добавить комментарий

  1. Комментарии, содержащие нецензурную брань, грубейшие грамматические ошибки, или албанскую лексику, удаляются.
  2. В поле "Сайт" можно указывать только ссылку на главную страницу вашего сайта/блога. Ссылки на прочие веб-ресурсы, или партнерские ссылки будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, адреса сайтов. Просьба указывать нормальное имя или ник.
  4. Короткие, бессмысленные кoммeнтapии типа "Спасибо!", "Интересная статья", будут удалены.
  5. Комментарии не по теме, спам, любая реклама в сообщениях будут удалятся.

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: