Всем привет на сайт. Продолжаем улучшать наши блоги для заработка. Думаю ни для кого не секрет, что на сайте играют огромную роль. Конечно не все понимают каким образом и через какое время они начинают влиять, но факт остается фактом. Чтобы улучшить эти факторы нам необходимо улучшить юзабилити сайта: добавить , улучшить дизайн, сделать его привлекательным и простым. Сделать правильную обработку картинок на сайте. Многие хотели бы узнать ответ о том, как сделать на сайте картинку при нажатии на которую она увеличивалась. Этот увеличение реализовано у меня на сайте. Согласитесь достаточно приятно, что можно увеличить картинки, посмотреть всю красоту во весь экран.
Сегодня постараюсь открыть вам этот секрет увеличения. Вообще картинку можно увеличить несколькими действиями:
- Например, можно увеличить ее при наведении кнопки мыши
- Вторым вариантом может быть увеличение при нажатии
Конечно, если вы пользуетесь WordPress, то самым простым и легким вариантом будет поиск шаблона с нужной нам функцией, поверьте в интернете сейчас огромное количество таких. Так что в 95 процентах случаев вы найдете именно шаблон с увеличением картинки. Но что делать если вам нравится именно эта тема и вы хотели бы сделать увеличение картинки только на ней. Или вы вообще пишете на листке html свой первый сайт, в чем я конечно сильно сомневаюсь.
Подключаем ява скрипты для увеличения картинкиИтоговым результатом будет увеличенная картинка, по типу . Ладно, все это философия, чтобы произвести увеличение картинки нам необходимо подключить библиотеку jQuery. Не помню но вроде в каком то уроке я писал про эту библиотеку, но если вы забыли - напомню. Чтобы подключить библиотеку необходимо в сайта вставить два кода.
Следует понимать что библиотек jQuery достаточно много и в разных случаях подключаются разные библиотеки
Если же вы пишите свой сайт на голом html, то для вставки картинки вам потребуется этот код
Обратите внимание что в этом случае вам необходимо будет положить свою картинку в папку images и указать свое название картинки. Не забывайте, что файлы библиотеки ява скриптов у вас должно находится там же где и главная страница сайта, иначе просто пропишите к ним другой путь. Скачать библиотеку файлов для увеличения картинки на сайте, можете . Ну и самое главное теперь, если вы хотите увеличить свою картинку то пропишите к ней следующие свойства.
Здравствуйте уважаемые начинающие оптимизаторы.
В 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
