Простое увеличение изображений на сайте

154

S_A_N_T_A

30 октября 2018, 22:46

1349

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

HTML

CSS

.r1 .r2{background:rgba(0, 0, 0, 0.85) center no-repeat; background-origin:content-box; background-size:contain; bottom:0; display:none; left:0; padding:8%; position:fixed; right:0; top:0; z-index:999999;}

.r1 a:focus + .r1{display:block;}

Обыграл его вот так.

HTML

CSS

.r1 .r2{background:rgba(0, 0, 0, 0.85) center no-repeat; background-origin:content-box; background-size:contain; bottom:0; display:none; left:0; padding:8%; position:fixed; right:0; top:0; z-index:999999;}

.r1 .r3:focus + .r2{display:block;}

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

Вопрос: Как сделать так, чтобы большое изображение начиналось подгружаться, только после клика по маленькому.

К сожалению в js я полный нуб))

https://codepen.io/anon/pen/BqgjZg

154

S_A_N_T_A

31 октября 2018, 01:20

#1

Просто в готовые решения создают лишнюю нагрузку. Все таки надо взяться за изучение JS с целью саморазвития)

391

Апокалипсис

31 октября 2018, 01:35

#2

S_A_N_T_A:
Протестировал и понял, что большое изображение подгружается заранее, что увеличивает скорость загрузки страницы.

Грузите превьюшки. Большое изображение грузить не нужно.

ps: js я тут не увидел

Записки нищего (http://zapiskinishego.ru) - мой личный блог Услуги php программиста. Очень нужна любая работа. Не покупают? Поведенческий аудит интернет-магазина за 5000 руб. (/ru/forum/990312)

154

S_A_N_T_A

31 октября 2018, 02:17

#3

Апокалипсис:
Грузите превьюшки. Большое изображение грузить не нужно.

ps: js я тут не увидел

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

391

Апокалипсис

31 октября 2018, 02:23

#4

S_A_N_T_A, Вы неверно поняли. Отображайте маленькую превьюшку на сайте, а при клике открывайте большую.

Можете использовать jQuery чтобы меньше было кода.

154

S_A_N_T_A

31 октября 2018, 02:28

#5

Апокалипсис:
S_A_N_T_A, Вы неверно поняли. Отображайте маленькую превьюшку на сайте, а при клике открывайте большую.
Можете использовать jQuery чтобы меньше было кода.

А как это можно сделать не зная JS?))

Может есть простейшее готовое решение?

391

Апокалипсис

31 октября 2018, 02:33

#6

S_A_N_T_A, http://fancybox.net/

154

S_A_N_T_A

31 октября 2018, 02:49

#7

Апокалипсис:
S_A_N_T_A, http://fancybox.net/

Пробовал подключить. Но проблема в том, что там используется "/1.4/jquery.min.js". Если я подключаю эту версию jqwery, перестают работать модальные окна и не сворачивается мобильное меню. Если подключаю другу версию jqwery, все начинает работать кроме увеличения изображений.

391

Апокалипсис

31 октября 2018, 02:51

#8

Ну, искать нужно под более новые, да.

Вот например: https://fancyapps.com/fancybox/3/

154

S_A_N_T_A

31 октября 2018, 02:58

#9

Апокалипсис:
Ну, искать нужно под более новые, да.
Вот например: https://fancyapps.com/fancybox/3/

Громоздкое оно. Много кода слишком. Нужно как можно проще. Нацелен на максимально быструю загрузку страниц с точки зрения сео. Все равно спасибо!

Может я и заморачиваюсь, особо навыков нету, так как любитель, делаю для себя.

Буду продолжать искать решение.

391

Апокалипсис

31 октября 2018, 03:09

#10

S_A_N_T_A, Посмотрите код конкурентов вашей тематики в топе :)

И поймете что это не очень важно, наверное есть другие, более важные места.

1

Google: E-E-A-T не является фактором ранжирования

Как удалить плохие SEO-ссылки и очистить ссылочную массу сайта