Перейти к содержимому






* * * * * 1 голосов

Галерея. Как ее быстро исправить. Инструкция

Написано SeregaKR, 27 мая 2013 · 1 200 просмотры

Опрос: Галерея. Как ее быстро исправить. Инструкция (9 пользователей проголосовало)

Полезна статья?

  1. Да (9 голосов [100%])

    Соотношение голосов: 100%

  2. Нет (0 голосов [0%])

    Соотношение голосов: 0%

Голос Гости не могут голосовать
Многие пользователи с небольшим разрешением экрана (меньше 1920х1080) уже заметили, что всплывающее окошко при просмотре картинки выходит за пределы экрана. В этой записи я представлю быстрый способ это поправить.
P.S. Пост обновлен - теперь изображение задается только по высоте => не будет вытянутых непропорциональных изображений

Инструкция ниже.
(см под кат)

Вам понадобится скрипт ниже (шаг 1) и немного терпения
  • Шаг 1

Где Width - ширина экрана(например 1600)
Height - высота экрана (например 900)
Вносим в него точные числа вместо текста в круглых скобках.

На этом первый этап закончен.
  • Шаг 2
Сохраняем его в файл с раширением .css в любой папке по вашему выбору (лучше если это будет папка, куда установлен ваш браузер)
  • Шаг 3 (Opera 11-12)
  • Заходим на сайт tesall.ru
  • Нажимаем правую кнопку мыши -> Настройки для сайта -> Вид
  • В графе Моя таблица стилей выбираем наш скрипт
  • Получаем нечто похожее
  • Шаг 3 (Opera 15)
​В связи с переделкой Opera в новых версиях для работы исправления придется все сделать чуть по-другому.
  • Заходим на сайт Opera и скачиваем расширение, которое позволяет нам ставить их с магазина Web Chrome store
  • Заходим в магазин и ставим расширение Stylish
  • Следуем инструкциям для Chrome
  • Шаг 3 (Chrome)
  • В Интернет магазине Расширений ищем и устанавливаем Stylish
  • Нажимаем на иконку Stylish -> Управление установленными стилями -> Создать
  • Вставляем скрипт в раздел Код,
    Ставим галочку Включено,
    Выбираем Применить к URL в домене tesall.ru
    Сохраняем
  • В итоге должно получиться что-то похожее
  • Шаг 3 (Firefox) - спасибо пользователю applepie за правку
  • Устанавливаем Аддон Stylish из
  • Заходим в Firefox -> Управление дополнениями - > Стили
  • Нажимаем на кнопку Создать новый стиль
  • Перед скриптом вставляем 3 строчки:

  • Получаем что-то вроде такого
Для других браузеров инструкции можете попытаться поискать например здесь. Или ввести в любой поисковик запрос "Установка User CSS в браузер такой-то"

Удачи!




Очень полезно)Мне помогло.Благодарю.

Если от них избавиться - они будут наплывать "сверху" на imageDataContainer, где располагаются кнопочки "сохранить" и "закрыть", перекрывая к ним доступ. Ну, по крайней мере на некоторых изображениях.

cпасибо. вспомнил теперь

не понял пока нужно ли оставить prevlink и nextlink или вообще можно избавиться. это надо смотреть

Если от них избавиться - они будут наплывать "сверху" на imageDataContainer, где располагаются кнопочки "сохранить" и "закрыть", перекрывая к ним доступ. Ну, по крайней мере на некоторых изображениях.

Вот:


Опробуешь? У меня вроде пока работает. Циферки я оставил свои :) А вообще, с жесткими предустановленными размерами - как-то не очень. На нексусе, вот, окошко с картинкой масштабируется в соответствии с размером самого окна браузера. Но пока и так сойдет: все равно большинство сидит в максимизированном браузере.

Попробовал в разных браузерах. Мне показалась неудобной идея, когда размер самого окна меняется в зависимости от картинки - надо двигать мышкой в таком случае, что не совсем удобно. Оказалось, что достаточно применить max-height max-width только для изображения внутри - то есть lightbox-image. 2 стиля я объединил - не понял пока нужно ли оставить prevlink и nextlink или вообще можно избавиться. это надо смотреть  

Вот:

Опробуешь? У меня вроде пока работает. Циферки я оставил свои :) А вообще, с жесткими предустановленными размерами - как-то не очень. На нексусе, вот, окошко с картинкой масштабируется в соответствии с размером самого окна браузера. Но пока и так сойдет: все равно большинство сидит в максимизированном браузере.

Это опять я :)
Нашел еще один нюанс. Не знаю, как в других браузерах, но в огнелисе один из скриншотов (четвертый) на этой странице вписывается не особо корректно. Я пробовал кое-где заменить height/width на max-height/max-width - данному скрину помогло, но в целом появилась необходимость дорабатывать css. Я не большой специалист в оном, так что все делаю исключительно методом тыка. Немного потыкал - и лень пока одолела. В общем, как-то так :)

Это не только в firefox - это и в других браузерах. Дело в том, что некоторые картинки неформат - то есть либо по ширине, либо по высоте большие слишком. Чтобы все это входило в экран можно задать ширину и высоту абсолютную, но тут картинки могут быть непропорциональны, либо только одну из величин как задал в css я. Я  задавал высоту только -  проблема решается добавлением строчки:

 

 

width:(Width-270)px !important;
 

в lightbox-image

 

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

 

P.S. Даже не знаю как это можно поправить. Только если скриптом каким, например условие: если картинка большая, то ...

 

Но в CSS это не знаю как сделать.

 

Видимо придется ждать пока администрация поправит lightbox

Это опять я :)
Нашел еще один нюанс. Не знаю, как в других браузерах, но в огнелисе один из скриншотов (четвертый) на этой странице вписывается не особо корректно. Я пробовал кое-где заменить height/width на max-height/max-width - данному скрину помогло, но в целом появилась необходимость дорабатывать css. Я не большой специалист в оном, так что все делаю исключительно методом тыка. Немного потыкал - и лень пока одолела. В общем, как-то так :)