От мусора и понял — ПОРА! Пора вставлять на блоге в статьи картинки так, чтобы при нажатии на них, они увеличивались и показывались в оригинальном размере.
При чем чтобы эффект увеличения был удобным для пользователя (вас), чтобы мне как автору долго в кодах (настройках) не ковыряться при вставке изображений в статьи и чтобы при этом нагрузка на блог была минимальная. Не хочется использовать всякие плагины и нагружать все ту же базу данных Mysql.
Обратился за помощью к профи и они подсказали мне, что нужно сделать и я все настроил буквально за 3 минуты. Повторюсь, без использования всяких плагинов типа Auto Highslide и т.д. Давайте не буду долго тянуть кота за я... и перейду к делу.
Я испробовал много всяких вариантов скриптов увеличения картинок, но остановил свое внимание на том скрипте, который создает вот такой эффект. Посмотрите пример, нажмите на картинку слева:
Интересный эффект. Нажимаем на изображение и оно не открывается в новом окне (что очень не удобно), а открывается на этой же странице в увеличенном виде, в красивой рамке с крестиком и ниже подставляется описание картинки.
Если вам нравится такой эффект увеличения изображений, то можете использовать его! О нем я и буду писать ниже.
Вот повторюсь в такой эффект просто необходим. Там есть изображения, в которые нужно очень внимательно присматриваться, чтобы что-то там разглядеть. У кого плохое зрение, так те вообще ни чего не увидят. Скрипт увеличения изображений будет как раз кстати!
Итак начнем. Все делается в ТРИ простых шага:
1. Скачиваем скрипт и закидываем его на свой хостинг (сервер)
2. Добавляем в файл footer.php небольшой код
3. Добавляем изображения в статьи блога.
ГОУ! Скачиваем сам скрипт . Закидываем все содержимое в корень своего блога. Корень блога — это главная директория блога где лежат такие папки как wp-admin, wp-content и т.д. Гут! Это сделали!
Вторым шагом добавляем в файл footer.php темы своего блога специальный код. Вот он:
Внимание! В коде замените site.ru на ваш домен. Добавлять код в footer.php нужно перед закрывающим тегом
Гут! Ну в принципе все! Теперь самая основная часть! Будем вставлять картинки в статьи так, чтобы при нажатии они увеличивались, как я показал выше на примере. В общем смотрите. Тут все просто, хотя сначала покажется сложно кому-то! Я вставляю картинки как обычно в пост через кнопку в текстовом редакторе — Добавить медиафайл:
Окей. Теперь я просто весь этот (что на картинке выше) html код изображения в редакторе удаляю, и на его место вставляю вот этот:
В итоге у нас получается вот что:
Мы видим, что сверху у нас ссылка на картинку оригинального размера, а снизу та же самая картинка (тот же url), но для уменьшения ей даны размеры. Кстати так же мы и про оптимизацию не забываем, alt у картинки тоже присутствует. Все круто!
ОБНОВЛЕНИЕ! В комментариях к этой статье Дмитрий Шкурин предложил еще более легкий вариант использования данного скрипта. Теперь в коде вообще ковыряться не нужно:
То есть когда мы закинули скрипт в корень блога + добавили специальный код в footer.php, нам уже не надо ни чего ковырять чтобы добавить картинку в статью. Делаем все следующим образом. Как обычно добавляем картинку в статью через функцию «Добавить медиафайл». Теперь в параметрах отображения файла указываем ссылка как — «медиафайл»:
естественно настраиваем размеры, чтобы картинка ровно влезала в статью, дальше переходим во вкладку «Дополнительно» и в графе «Отношение» пишем — — «Обновить». Готово!
Все быстро, просто и еще удобнее. Дмитрий большое спасибо! Очень помог!
Все просто! Кому что не понятно? Здесь все элементарно! Самое классное то, что я могу придавать эффект увеличения не всем изображениям, а только тем, которым хочу придать. Если, например, я вставляю картину в статью и мне ее не нужно уменьшать, чтобы она влезла в пост, то и эффект увеличения создавать не обязательно!
Вот такие дела. Пользуйтесь. А может кто-то знает способ лучше? Напишите в комментариях. Кстати этот скриптик можно использовать не только на блоге, но еще и на различных одностраничных сайтах! Ну все, всем пока!
С уважением, Александр Борисов
Информация, представленная в этой статье ориентирована в первую очередь для начинающих web-мастеров.
На двух страницах. Страница 1. На следующую >>> ОписаниеСкрипт «Jquery Image Magnify v1.11» позволяет увеличивать любое изображение на странице до требуемой величины. Увеличение или возвращение к исходному состоянию происходит при нажатии кнопки мыши наведённой на изображение. Картинка готовится в одном экземпляре с необходимыми размерами и увеличивается в соответствии с настройками в файле jquery.magnifier.js .
Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.
После скачивания архива, распакуйте его в текущую папку на компьютере. В папке jQueryImageMagnify вы увидите:
- папку images с шестью изображениями в формате jpg ;
- папку js с файлом ява-скрипта jquery.magnifier.js и файлом курсора увеличения magnify.cur (отражается не во всех браузерах!);
- файл с демонстрационным материалом demo.html .
Откройте последний в используемом вами браузере и убедитесь в работоспособности демо-примера.
В полученном вами примере «Jquery Image Magnify v1.11» будет работать только при включенном Интернете, так как файл последней версии библиотеки jQuery - «jquery.min.js» загружается с сайта Google API.
Если Вы желаете, чтобы всё работало автономно, скачайте и подключите последнюю версию библиотеки jQuery с официального сайта.
Если у Вас уже подключена библиотека jQuery последней или более поздней версии (на момент публикации статьи - версия 3.1.1) или Вы используете удаленное подключение последней версии с сайта jQuery или Google API, разумеется, вторично подключать её не стоит.
Инструкция по установке на сайт (одиночное изображение)Шаг 1. Подберите нужное изображение и загрузите его в папку images , которая находится в корневой папке сайта.
Шаг 2. Содержимое папки js закачайте в одноименную папку в корне сайта.
Шаг 3. Нижеприведенный код подключения jQuery и ява-скрипта jquery.magnifier.js необходимо добавить в раздел head или body вашей страницы:
Шаг 4. А этот код необходимо размещать в разделе body на вашей странице:
Пояснения:
Путь к файлу изображения, выбранного вами.
Размеры изображения до увеличения. Выставляйте их на своё усмотрение.
Проще говоря, в раздел body вы вставляете обычный код изображения, присваивая ему class="magnify" . Если изображение содержит явные атрибуты размеров (ширина и высота), то это позволяет пользователю увеличивать изображение соответственно настроек файла скрипта jquery.magnifier.js . Если же размеры не указаны, то реальные размеры изображения будут основой для увеличения.
Смотрим результат: Для увеличения / уменьшения сделайте щелчок мышью на изображении Вариации с размещением изображенийПояснения:
Позиционирование слева.
Позиционирование справа.
Первоначальные размеры изображения могут изменяться с помощью атрибутов width и height .
Возможные настройки в файле jquery.magnifier.js
JQuery.imageMagnify={ dsettings: { magnifyby: 5, //коэффициент увеличения изображения (по умолчанию - 3) duration: 500, // продолжительность анимации в миллисекундах (по умолчанию - 500) imgopacity: 0.2 //степень непрозрачности исходного изображения, когда увеличенное изображение покрывает его (по умолчанию - 0,2)
Как убрать рамку картинки?
Я специально вынес этот вопрос в отдельный подраздел, так как он возник у одного из посетителей сайта.
Для того, чтобы увеличенная картинка после щелчка мышью отображалась без рамки, нужно:
- Открыть файл jquery.magnifier.js . Сделать это можно в любом текстовом редакторе, но я рекомендую Notepad++
- Найти участок кода (в Notepad++ он будет на 51 строке)
var $clone=$target.clone().css({position:"absolute", left:0, top:0, visibility:"hidden", border:"1px solid gray" , cursor:"pointer"}).appendTo(document.body) - В выделенной маркером строке выставить значение border равное нулю, либо изменить цвет gray (серый) на white (белый) или любой другой, который Вам подходит по теме. Вот и всё!
На двух страницах. Конец страницы 1.
В этой статье мы расскажем о том, как сделать модальное окно с увеличенным изображением.
Порой появляется необходимость сделать увеличение изображения при нажатии на него во всплывающем окне. В итоге получаем увеличенную картинку с затемненным фоном.
Сделать такое очень просто, используя jQuery библиотеку. Нам понадобятся три файла - index.html, файл стилей в папке css с названием template.css, и файл скриптов popup_img.js. А ещё три изображения в папке images
Для начала напишем HTML-разметку страницы, не забываем подключить файл стилей и библиотеку jQuery:
Страница
Так же добавляем наши изображения на страницу. У каждого изображения добавляем класс image, при помощи которого мы в будущем будем обращаться в скрипте к изображениям.
Следующий шаг - написать скрипт, который будет добавлять затемненный фон и увеличенное изображение.
$(document).ready(function() { // Ждём загрузки страницы $(".image").click(function(){ // Событие клика на маленькое изображение var img = $(this); // Получаем изображение, на которое кликнули var src = img.attr("src"); // Достаем из этого изображения путь до картинки $("body").append(""+ //Добавляем в тело документа разметку всплывающего окна ""+ // Блок, который будет служить фоном затемненным ""+ // Само увеличенное фото ""); $(".popup").fadeIn(800); // Медленно выводим изображение $(".popup_bg").click(function(){ // Событие клика на затемненный фон $(".popup").fadeOut(800); // Медленно убираем всплывающее окно setTimeout(function() { // Выставляем таймер $(".popup").remove(); // Удаляем разметку всплывающего окна }, 800); }); }); });
Здесь всё описывают комментарии. Следующий шаг - добавить стили, для них я не буду описывать комментарии, подразумевается, что CSS вы знаете хорошо.
body { margin:0; } .image { margin:30px; float:left; cursor:pointer; max-height:100px; } .popup { position: absolute; height:100%; width:100%; top:0; left:0; display:none; text-align:center; } .popup_bg { background:rgba(0,0,0,0.4); position:absolute; z-index:1; height:100%; width:100%; } .popup_img { position: relative; margin:0 auto; z-index:2; max-height:94%; max-width:94%; margin:1% 0 0 0; }
Результат работы смотрите на демо-странице.
Конечно, способов увеличения изображений существует достаточно много. И в основном используются применения скриптов и плагинов. По-моему мнению такие методы оправданы в случае ресурсов с огромным количеством фотографий или каких-либо картинок. Мой блог не такой. И, как обычно, я иду по пути наименьшего затрат времени, знаний и ресурсов своего сайта.
Предлагаю вам способ увеличения картинки на сайте без использования каких-либо скриптов, а исключительно с помощью html.
Такой способ увеличения изображения на сайте позволит читателю быстро посмотреть картинку, ведь вашему сайту не надо будет дополнительно делать загрузку скриптов.
Увеличение изображения на сайте 1 способ – увеличение изображения на сайте при наведении курсораОчень простой, ну наипростейший способ, честное слово. Надо добавить следующий код к свойствам картинки:
Onmouseover="this.style.width="значение ширины большого изображения px"" onmouseout="this.style.width="значение ширины маленького изображения px""
При наведении курсора мыши картинка увеличивается.
Надеюсь, вы понимаете, что все это делается в текстовом редакторе.
Способ аналогичный, просто onmouseover надо заменить onclick. К свойствам картинки добавляется следующий код:
Style="width: "значение ширины маленького изображения px; border:2px solid black;" onclick="this.style.width=значение ширины большого изображения px "" onmouseout="this.style.width="значение ширины маленького изображения px""
Полностью это будет выглядеть так
Вот результат и код для картинки с киской.
При клике мыши картинка увеличивается до размеров оригинального изображения или заданных вами. Для уменьшения размеров, то есть вернуть картинку в исходный размер, просто кликните в любое место страницы.
Надеюсь вам не показалось сложным использовать такие способы – с помощью html – сделать увеличение изображения на сайте.
Вообще, я считаю, многое веб-мастера не ограничиваются просто использованием какого-либо движка и применяют html-коды на своих сайтах.
Читайте также:
2015-10-27T16:07:59+00:00 Надежда Скрипты и коды увеличение изображения на сайте,увеличение картинки на сайтеКонечно, способов увеличения изображений существует достаточно много. И в основном используются применения скриптов и плагинов. По-моему мнению такие методы оправданы в случае ресурсов с огромным количеством фотографий или каких-либо картинок. Мой блог не такой. И, как обычно, я иду по пути наименьшего затрат времени, знаний и ресурсов своего сайта. Предлагаю вам способ увеличения...
Надежда Трофимова [email protected] Administrator Блог сайт Возможно Вас также заинтересует:Как сделать тень у текста за 5 минут
Здравствуйте, уважаемый читатель моего блога. В этой статье вы научитесь создавать за 5 минут с помощью стилей css и кода html тень текста.
Как сделать кнопки вверх вниз для сайта
Эта статья написана в продолжение статьи о том, как сделать кнопку вверх для сайта.
Как убрать запись с главной страницы с помощью кода
Здравствуйте, уважаемый читатель моего блога. Возникла у меня необходимость спрятать часть статей с главной страницы. Не убрать вообще из доступа для читателей, а убрать...
Убираем с главной страницы и RSS записи рубрики
Продолжаем улучшать функционал и внешний вид сайта. Убираем ненужные записи с главной страницы и RSS.
Хлебные крошки на сайте wordpress
Здравствуйте уважаемые начинающие оптимизаторы.
В WordPress, по умолчанию, при клике на картинку, пользователь переводится на страницу картинки. Согласитесь — это очень неудобно, когда тебя вдруг перекидывает на другую страницу.
Для того, чтоб изображение увеличивалось прямо на той странице, на которой и находиться, на сайт нужно установить специальный скрипт.
Как он работает, можно посмотреть на картинке выше или на картинках в сайдбаре.
Найти его в интернете не проблема, но к сожалению у всех предложений есть один изъян. Код скрипта, при проверке в валидаторе, выдаёт ошибку.
Пришлось немного напрячься, и исправить эту ситуацию, так что дальше речь пойдёт о прекрасно работающем на всех шаблонах, и валидном скрипте.
Способ его установки, доступен даже для тех, кто ничего не знает о скриптах, и вообще о языках программирования.
Вместе с тем, он при отличном результате, позволяет обойтись без плагина, и предполагает обязательное заполнение тега alt , соответствующим текстом, а это очень хорошо скажется на оптимизации сайта.
Не секрет, что плагины тормозят скорость загрузки, так как многие из них размещают свои скрипты в блоке head .
А заполнять тег alt , зачастую просто недосуг. Тут же, хочешь не хочешь, а придётся вписать подходящий текст, так как он отобразится в виде подписи под увеличенной картинкой.
Можно просто задать нумерацию по странице, если изображений много.
Ещё одна фишка заключается в том, что скрипт увеличивает не всё подряд, а только те изображения на которые Вы укажете.
Удобно? Удобно. Ведь если картинка в оригинальном размере прекрасно умещается на странице, то зачем её увеличивать.
Переходим к установке.
Получить zip со скриптом можно совершенно бесплатно, просто скачав его с моего Яндекс Диска. Скачать
После этого его нужно закинуть в корень сайта. Коревая папка — это папка в которой находятся wp-admin, wp-content, и так далее.
Через FTP загружаем zip, распаковываем, после чего в директории появляются три файла, и одна папка.
Папку с zip нужно удалить. Так же, теперь нужно удалить, если был, плагин увеличивающий изображения.
Следующее действие, нужно сделать в файле footer.php . можно, не выходя с сервера, пройти wp-content — themes — Ваша тема — footer.php .
А можно зайти в консоль сайта, затем Внешний вид — Редактор — footer.php , или Подвал. И так и так можно.
В этом файле, в самом конце, перед тегом , нужно вставить следующий код:
(function(){
var boxes=,els,i,l;
if(document.querySelectorAll){
els=document.querySelectorAll("a");
Box..css");
Box..js",function(){
simplebox.init();
for(i=0,l=els.length;i