MultiBox - новый вид галереи в модальном окне

Здравствуйте. В сегодняшнем уроке мы будем встраивать классную галерею на сайт. Называется она - MultiBox. Данный вид галереи прекрасен, по моему мнению, и может даже посоперничать с ведущими галереями - LightBox и PrettyGallery. Для начала посмотрите демо получившегося результата и скачайте исходные файлы:

demosourse

Шаг 1. Описание галереи.

MultiBox - это один из современных скриптов галереи. Он имеет множество функций при просмотре. Это объясняется тем, что просматривать в нем можно практически все! Вот список того, что можно загрузить в МультиБокс для просмотра:

  • .jpg / .gif / .png - изображения;
  • .html / .htm / .php - веб-страницы;
  • .swf / .flv - флешки;
  • .mov / .wmv - видео основных форматов;
  • .mp3 - мелодии.

    • Однако главным предназначением галереи все же остается показ изображений, поэтому мы и сделаем именно такую галерею.

Шаг 2. Подключение каскадных таблиц и их описание.

Итак, начнем, я думаю, с описания каскадных таблиц стилей. В архиве присутствует сразу два файла со стилями. Они находятся в папке css. Это - multibox.css и ie6.css. Ниже я даю их описание:

  • multibox.css - в этом файле содержатся все основные стили, нужные для галереи. Без подключения этого файла к документу нашей галереи, работа ее не прекратится, однако все элементы будут некорректно отображаться.
  • ie6.css - в этом файле содержатся стили, которые нужны для правильного отображения галереи в браузере Internet Explorer 6. Без подключения этого файла к документу нашей галереи в IE6 все элементы будут некорректно отображаться.

Теперь подключим эти файлы между тегами <head> и </head> таким образом:


<link href="css/multibox.css" rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="all" />

Шаг 3. Подключение необходимых JavaScript'ов и их описание.

Теперь нам нужно к нашему документу с галереей подключить несколько JavaScript - файлов. Находятся они в папке js Это - mootools.js, multibox.js и overlay.js. Ниже я даю их описание:

  • multibox.js - основной JavaScript нашей галереи;
  • mootools.js - файл, с помощью которого сделана база нашей галереи;
  • overlay.js - JavaScript, отвечающий за правильность отображения всех элементов галереи.

Ниже я привожу код подключения всех этих JavaScript'ов, который нужно вставить между тегами <head> и </head> Вашего документа


<script type="text/javascript" src="js/mootools.js"></script> 
<script type="text/javascript" src="js/overlay.js"></script> 
<script type="text/javascript" src="js/multibox.js"></script>

Шаг 4. HTML-конструкция галереи.

Раз мы уже решили делать галерею изображений, то давайте теперь составим HTML-конструкцию, которая будет отображаться на главной странице. В принципе, если Вы хорошо понимаете языки веб-программирования, то Вы можете вместо галереи изображений сделать галерею видео например или демонстрацию каких-либо веб-страниц. Ниже расположен примерный html-код галереи, которую я использовал:


<div id="container"> 
<div id="example"> 
<a href="photos/river.jpg" id="mb1" class="mb" title="Высокогорная речушка"><img src="photos/river_mini.jpg" alt="" border="0" /></a> 
<div class="multiBoxDesc mb1">Здесь будет описание фотографии &quot;Высокогорная речушка&quot;</div> 
<a href="photos/shan-khai.jpg" id="mb2" class="mb" title="Шан-хай"><img src="photos/shan-khai_mini.jpg" alt="" border="0" /></a>
<div class="multiBoxDesc mb2">Здесь будет описание фотографии &quot;Шан-хай&quot;</div> 
<a href="photos/dew.jpg" id="mb3" class="mb" title="Росинки"><img src="photos/dew_mini.jpg" alt="" border="0" /></a>
<div class="multiBoxDesc mb3">Здесь будет описание фотографии &quot;Росинки&quot;</div><br /> 
</div> 
</div>

Шаг 5. JavaScript-доработки

Теперь для полноценной работы нашей галереи вставить перед закрытием тега body следующий JavaScript-код:

JavaScript


<script type="text/javascript">	
var box = {};			
window.addEvent('domready', function(){			
box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true});
});		
</script>

Шаг 6. Пять советов напоследок...

Что ж, наша галерея готова. Теперь я дам несколько советов по настройке изображений для показа в галерее:

  • Старайтесь не запихивать в показ галереи все подряд: флешки, видео, изображения, музыку... Лучше сделайте для каждого формата свою галерею;
  • Старайтесь добавлять в галерею изображения одного вида, т. е. или горизонтальные или вертикальные;
  • Старайтесь добавлять изображения в едином формате, например .jpg;
  • Размер изображения не должен быть очень большим. Помните, что у многих людей разрешение экрана - 1024х768. Просто уменьшите изображение например до размера 800х600;
  • Размер мини-изображений которые будут отображаться на странице Вашего сайта не должны быть большими, но и не слишком маленькими. Старайтесь в уменьшении оригинала соблюдать все пропорции изображения.

Заключение.

Вот, в принципе, и все. Я полностью рассказал Вам все, что мог знать об этом интересном варианте галереи. Думаю, урок Вам очень понравился. Спасибо за внимание, до новых встреч!

С искренним уважением, Максим Курочкин

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.phatfusion.net
Перевел: Максим Курочкин
Урок создан: 17 Июня 2009
Просмотров: 101020
Правила перепечатки

5 последних уроков рубрики "Mootools"

  • Создание меню при помощи MenuMatic 0.68.3

    Создание горизонтального и вертикального меню при помощи MenuMatic 0.68.3

  • Анимированные закладки с использованием MooTools

    Один из возможных способов поместить много контента на одно небольшое место - это использование системы закладок. Данный урок покажет как создать систему анимированных закладок с использованием CSS, куки и анимированного переключения панелей.

  • Выезжающая панель для сайта на Mootools

    Изучив этот урок, Вы научитесь делать компактную выплывающую панель для сайта. Разрабатывать ее мы будем с помощью Mootools, ну и конечно же не обойдемся и без CSS-стилей, которые будут играть здесь роль дизайнинга панели

  • Увеличение / Уменьшение текстовых полей с помощью MooTools

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

  • Multi-Select c помощью MooTools

    В этом уроке речь пойдет о переносе выбранных опций из одного multi-select в другой. Думаю, что подобный виджет вы уже видели. Обычно он применяется на сайтах объявлений и регистрации в каталогах, где ваше объявление (ваш сайт) подходит для размещения в нескольких рубриках. В этом уроке мы реализуем подобный виджет с помощью Mootools.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 17 Июня 2009 12:06
    Sergey
    А можно сделать так, чтобы MultiBox был вертикальным?
  • 17 Июня 2009 12:29
    МаксимКурочкин
    2 Sergey: Всмысле? Чтобы Ваш блок картинок вертикальным был?
  • 17 Июня 2009 12:43
    МаксимКурочкин
    2 Sergey: Для этого просто нужно там, где у нас кончается одна фотография и ее описание вставить перенос строки- &lt;br&gt; и Ваша галерея будет вертикальной!
  • 17 Июня 2009 13:29
    EasyLife
    Opera 10.00 Beta некорректно работает :-(
  • 17 Июня 2009 13:46
    МаксимКурочкин
    2 EasyLife: Что именно не работает? 2 Всем: У кого еще не работает галерея и что именно не работает? пишите полностью, пожалуйста!
  • 17 Июня 2009 19:32
    Олег
    Да в Опере не коректно. ( тегу id="container" не заданы стили. Задать{width: 500px; height: 800px; margin: auto; padding-top: 50px; padding-bottom: 50px;} и все работает.)
  • 17 Июня 2009 19:39
    Олег
    Серый фон при открытии фото по высоте 'container', если контейнер высокий, то в Опере фото улетает в низ , в других браузерах все отлично!
  • 17 Июня 2009 21:47
    Виталий
    Скрипт классный. Но правда, проблема с отображением в Опере. У меня 10. Когда ждёшь загрузки изображения, то видно половину окна. Соответственно и серый фон на треть экрана сверху.
  • 18 Июня 2009 00:41
    МаксимКурочкин
    Да, нов опере 9 таких лагов нету! Постараюсь исправить. Если что перевыложу - об этом сразу сообщу здесь же. ВНИМАНИЕ!!! Кто пользуется оперой , файлы не качайте, для Вашего браузера они нерабочие
  • 18 Июня 2009 07:02
    OrlenkoKN
    >>ВНИМАНИЕ!!! Кто пользуется оперой , файлы не качайте, для Вашего браузера они нерабочие Как отрезал блина! Внимание, уважаемые посетители моего сайта! если вы пользуете Оперу - НЕ ЗАПУСКАЙТЕ эту галерею!! бгг В 9,63 кстати тоже только пол-экрана закрашиваетса.. Fancy Box пока самая нормальная галерея на мой взляд -без лишних понтов, но весьма функционально и красиво!
  • 30 Июня 2009 10:44
    zerad
    А как сделать что бы не по 3 а больше картинок было в ряд.
  • 15 Июля 2009 22:48
    denkut
    Блин, очень красиво!!!!!!!!!
  • 21 Июля 2009 14:39
    kelebra
    я у себя наблюдаю бок с совместимостью jquery-1.3.2.min.js пишет ошибку (new Element("div")).setProperty is not a function overlay.js (line 29)
  • 9 Сентября 2009 22:17
    Zeben
    Еще одна проблема, если есть флеш объекты на экране(они не затемняются и идут поверх), как лечится не в курсе?
  • 29 Октября 2009 09:33
    danila
    на счет флеш объектов я тоже заметил,но у меня другая проблема,на крмпе все работает отлично,как только заливаю на хост,ничего не работает,что такое не могу понять.Мож кто подскажет???
  • 30 Октября 2009 20:10
    BlackGod
    а можно про mp3 пример? =) хочется сделать....
  • 31 Октября 2009 09:45
    Madagaskar
    пробовал вставить FLV. не идет. :( подскажите в чем причина
  • 24 Ноября 2009 19:53
    Smith
    Нашел ошибку которая вызывает неправильное появление контейнера в опере: в multibox.js используеться функция window.getHeight() которая в опере работает несколько иначе если имеет место прокрутка страницы. Решение проблемы состоит в том чтобы например использовать clientHeight для получения длины окна и соответсвенно заменить window.getHeight() на например функцию function getClientHeight() { return document.compatMode=='CSS1Compat' && document.documentElement.clientHeight; }
    • 14 Декабря 2010 22:02
      nikol1
      Smith, спасибо. только теперь в ie не отображает большую картинку вообще.
    • 15 Декабря 2010 10:48
      nikol1
      Я справился с задачей так: изменил multibox.js, как говорил Smith, и сохранил его как multiboxopera.js. А на странице с галереей в head ввел такой php код: if(eregi("opera",$HTTP_USER_AGENT)) {print "<script type='text/javascript' src='gallery/js/multiboxopera.js'></script>";} else {print "<script type='text/javascript' src='gallery/js/multibox.js'></script>";} Код подключает multiboxopera.js только когда посетитель пользуется opera.
      • 17 Февраля 2012 18:20
        delovely
        Ребята, пожалуйста, вы можете выложить сам файл multiboxopera.js потому что я например не знаю как правильно поменять функции...
  • 31 Января 2010 02:57
    Сергей
    Возникла небольшая проблема: я установил плагин на локальном сервере, а картинки вперед-назад и закрыть не показываются( Пути к картинкам правильные....в чем еще может быть дело? может для плагина прописаны какие-то стандартные пути размещения рабочих файлов?
  • 9 Февраля 2010 13:04
    lexoid
    Люди опишите, пожалуйста по пунктам как добиться коренной работы этой галереи? У меня при нажатии картинка появляется внизу после страницы и нет стрелок, вперед назад нет кнопки закрыть. Причем как в опере, так и в эксплороре.
  • 19 Февраля 2010 10:50
    Stefani
    вставила я галерею в таблицу а у меня при раскрытии картинки в опере затемнение и картинка снизу и при следуйщей все ниже и ниже уходит показывая белую страницу, что делать?
  • 23 Марта 2010 16:45
    miluha
    У меня в хроме нормально всё работает, а вот в других браузерах (опера, IE, мазила) картинка просто открывается в новой вкладке. И пробовал вставлять flv, ничего...
  • 10 Мая 2010 23:01
    legokoh
    Подскажите, кто знает. В Мозиле галерея работает нормально, а вот в IЕ отображает по три картинки в ряд. Как сделать, чтобы отображало все, сколько влезет. Этот вопрос уже здесь задавал zerad, но ответ, к сожалению, так никто и не дал
  • 24 Июня 2010 20:16
    ssindi
    Замечательная галерея! Сделала сайт, на котором шапка в виде слайдов, а надо было еще на странице сделать галерею из фотографий. Перебрала все галереи, которые нашла в уроках на этом сайте, на локальном компьютере работают, а в интернете нет, скрипты конфликтуют друг с другом. А эта галерея работает, и во всех браузерах, в которых я проверяла сайт - Opera, Firefox, GoogleChrome, IE8. Спасибо большое автору!!!
  • 25 Июля 2010 01:28
    zehaev
    Спасибо
  • 25 Июля 2010 01:28
    zehaev
    за урок!
  • 2 Августа 2010 14:55
    shumpk
    Прекрасная галерея, однако хотелось бы избавиться от скроллов, которые появляются и снизу и справа, небольшооое такое расстояние, но не приятно. У кого нибудь есть идеи?
  • 3 Августа 2010 00:29
    shumpk
    от вертикального скролла избавился значением height для блока галереи, а вот от горизонтального избавиться что то сложнее(
    • 3 Декабря 2015 02:59
      editorlive
      А я значением: css от обоих скроллов разом избавляет, самое главное скрипт работает, как часы =)) 
      body{overflow: hidden;}
  • 5 Августа 2010 12:54
    Роман
    Спасибо и мне пригодилось!
  • 10 Августа 2010 21:47
    mikeshema
    Может кому-то понадобится, горизонтальный скрол возникает из-за overlay.js. Если его отключить, то скрол пропадает. В multibox.js поставить useOverlay: false. Если нравится затемнение экрана, то в самом overlay.js можно выставить меньше ширину - 99%, например, но так не очень красиво получится.
    • 1 Мая 2012 05:41
      skyset
      this.container = new Element('div').setProperty('id', 'OverlayContainer').setStyles({ position: 'fixed',
  • 12 Августа 2010 14:07
    Teanna
    Вот как ни странно, в Опере все работает идеально, а вот в Мозиле такая же проблема как у Stefani, а в IE все вверх ползет! можно как то минимизировать погрешности работы галереи во всех браузерах?
  • 20 Августа 2010 21:36
    enot
    Подскажите, пожалуйста, у меня все работает отлично во всех браузерах кроме IE8 , там при открытии окно прижимается к левому верхнему углу. Как избавиться от этого дефекта?
  • 4 Сентября 2010 14:00
    ssindi
    Где же все-таки находится этот #example, который в коде div id="example"? Все таблицы стилей перерыла, ну не могу найти никак.
  • 15 Сентября 2010 19:21
    DeNiS
    В опере выезжает за верхнюю границу, видно поливину кнопки зыкрытия(крестик), нужно в файле multibox.css в стиле .MultiBoxContainer добавит margin-top:10px; но можно больше 10px
  • 15 Сентября 2010 19:33
    DeNiS
    В Opera 10.53 работает нормально
  • 21 Сентября 2010 16:29
    litelex
    у меня архиважный вопрос. иногда, именно иногда. при появлении модального окна картинка появляется полностью и сразуже исчезает. почему так? IE8
  • 25 Ноября 2010 12:38
    rix5398
    Smith 24 Ноября 2009 19:53 Нашел ошибку которая вызывает неправильное появление контейнера в опере: в multibox.js используеться функция window.getHeight() которая в опере работает несколько иначе если имеет место прокрутка страницы. Решение проблемы состоит в том чтобы например использовать clientHeight для получения длины окна и соответсвенно заменить window.getHeight() на например функцию function getClientHeight() { return document.compatMode=='CSS1Compat' && document.documentElement.clientHeight; } Cпасибо большое!!! Помогло!!!
  • 13 Января 2011 06:46
    Rinat
    В opere увеличенные изображения прилипают к верху
  • 20 Января 2011 17:56
    Zedamin
    Как сделать чтобы в правом нижнем углу было не of а 'из'?
  • 28 Февраля 2011 18:54
    AZabelin
    Доброго времени! Урок несомненно хороший, спасибо! Есть вопрос на который не смог найти ответ. Как в галерее увеличить количество фотографий в ряду? Кстати уже два человека в коментариях об этом спрашивали.
  • 21 Марта 2011 14:23
    Владимир Матвиенко
    Перекопал файл multibox.js коечто поменял под себя НО не нашел строку которая обрабативает клик по ссылке (a.mb) Задача при наведении увеличить картинку а при клике открыть полное изображение. Кто поможет?
  • 25 Марта 2011 23:34
    Stepok
    Действительно, как заменить "of" на "из"?
  • 17 Апреля 2011 15:20
    doctor_Connie
    nikol1 описал php код для исправления глюка Оперы, а вот скрипт для html <script> var s = document.createElement('script'); s.type='text/javascript'; s.src='files/js/multibox.js'; if (window.opera){ s.src='files/js/multiboxopera.js'; } document.getElementsByTagName('head').item(0).appendChild(s) </script> Спасибо автору и всему сообществу комментирующих за возможность работать с этой галереей
    • 24 Сентября 2011 20:06
      Mazur
      Привет! У меня не получается заставить работать скрипт для html. Есть ещё Варианты? Спасибо.
  • 27 Мая 2011 00:52
    senara
    Подскажите что делать? у меня swf файлы не показывают размер в размер! сами swf 512-768 а в окне просмотра их сжимает сильно, что делать? я новичок в скриптах, подскажите плиз где что нужно вписать или что сделать чтобы показывало swf как нужно. вот ссылка на пример моей галереи (видите как сжимает) - http://onlineretouch.ru/multibox/ очень уж нравится галерея а что вот делать не знаю, ребята помогите советом.
  • 2 Июля 2011 14:44
    ms_doc
    Максим... Не подскажите как например, если добавить базу, чтобы в ней были адреса к изображениям, названия , описания, и тд. Будет ли работать скрипт... И как возможно ли это вообще...?? просто через базу сайт заполнять удобней...)
  • 5 Июля 2011 16:26
    narayansin
    Столкнулся с очень не понятной для меня проблемой. Создал вот галерею http://retroauto.if.ua/test/gal1.html но проблема в том, что когда я добавляю больше 2х фото, дно сайта просто улетает. Посмотрите на полосу прокрутки. В чем может біть проблема? Ибо когда я заюзал стандартни лайтбокс такого не случилось вот пример http://retroauto.if.ua/tory/gal1.html . Буду очень благодарен за помощь, ибо ваш скрипт мне нравится намного больше. моя почта narayansin@gmail.com . Свяжитесь если вам не сложно.
  • 6 Июля 2011 10:25
    sevada
    Opera 11.50 проблема - серый фон
  • 6 Июля 2011 10:38
    narayansin
    Вопрос снят, проблему решил
  • 10 Июля 2011 11:21
    alina_n
    Замечательная галерея, только вот у меня архиважный проблема. Иногда, именно иногда. при появлении модального окна картинка появляется полностью и сразуже исчезает. почему так? И только в IE7. Помогите пожалуйста!
  • 10 Июля 2011 14:33
    alina_n
    Перепутала - IE8. HELP!
  • 11 Июля 2011 12:03
    xcreotiff
    Может кто подскажет. Есть одна галлерейка на jquery уже, хочу куда то снизу прилепить эту, все сделал все поставил, только эта галерейка открывается не в модальном окне, а в новой вкладке как картинка. Что делать не пойму. И вообще заметил если цеплять 2 разных плагина в один хтмл файл то один из них ене работает. Подскажите как быть. Спасибо!
  • 22 Июля 2011 12:28
    kilotonna
    А как сделать ссылками сами картинки в модальном окне? Мне нужно, чтобы они вели на хайрез этих изображений в отдельном окне.
  • 25 Июля 2011 03:13
    oleg000_som
    В браузерах вроде бы отображается корректно, но почему-то не совместим с jquery.min.js, а он нужен для навигации. Нашел, как обойти это, но не много помогло... вставлять код подключений перед блоком с элементами. Работают оба скрипта, но даже при модальном окне навигация вылазит...
    • 2 Августа 2011 08:10
      Kamil_G
      У меня похожая проблема , после установки галлереи , мои скрипты на js , перестают работать.
  • 8 Октября 2011 15:05
    AnnE
    Спасибо за галерею! очень помогли)))
  • 9 Ноября 2011 22:13
    Martini9
    Добрый день! Отличная галерея! Спасибо за подробное описание! Потестил ее во всех браузерах, проблема с отображением возникла только в Opere, но после обновления на последнюю версию, все стало работать! У меня вопрос такой, не могу найти код который правит расстояние между фотками, если я правильно думаю этот код должен быть в css/multibox? Заранее спасибо!
    • 27 Ноября 2011 07:01
      Erre 
      <style type="text/css">
#htmlElement {	padding: 10px;	background-color: #000;
}
</style>
  • 7 Января 2012 01:17
    Bajker
    Поставил, спасибо людям что писали выше, исрпавил проблему в опере. НО! Столкнулся с такой проблемой, на странице с галереей теперь скролл вертикалньный так работает, что можно далеко вниз листать, это срочно надо исправить. А как - незнаю. Для бади в ЦСС задаю высоту, непомогает.
    • 31 Марта 2013 20:08
      Artur1984
      Ну как решил свою проблему со скроллом, если да подскажи пожалуйста как?
  • 13 Января 2012 13:02
    webmaler
    Подскажите а как сделать так чтобы во всплывающем окошке, т.е. вместо картинки всплывала целая HTML конструкция? Т.е. Контейнер, в котором картинка, описание, ссылочка и т.п. Заранее спасибо!
  • 25 Января 2012 20:32
    СашаЖуков
    Как сделать чтоб окно в кротом оригинальная фотография не мини было по середине
  • 26 Января 2012 14:07
    merlinco
    можно ли добавить функция пролистывания с клавиатуры, чтобы можно было стрелочки "влево" - "вправо" нажимать и большие увеличенные картинки листались бы?
  • 26 Января 2012 15:18
    merlinco
    как уменьшить время переключения картинок между собой? как эффект затухания сделать для всей страницы (она длинная))? опера отображает по центру экрана, а вот эксплойрер от угла.. что необхдоимо чтобы эксплойрер тоже отображал по центру экрана?
  • 1 Декабря 2012 11:23
    den98 
    Добрый день. Прошу сильно не пинать, я только учусь, дело в том, что второй день мучаюсь все делаю как написано в уроке, а результата ноль. НЕ работает. Куда лезть где искать не пойму. Помогите советом.
  • 1 Декабря 2012 12:11
    den98
    Еще раз добрый день. Проблема в следующем: к странице подключен слайдер и подключаю multibox. Вместе они не работают. Для слайдера подключена библиотека jquery как только удаляешь подключение к jquery multibox работает, а слайдер нет и наоборот. как их заставить работать вместе??? 
    1. <link rel="stylesheet" type="text/css" href="css/style.css" />
2. <link rel="stylesheet" type="text/css" media="screen" href="css/slider.css" />
3. <link href="css/multibox.css" rel="stylesheet" type="text/css" />
4. <link rel="stylesheet" href="css/ie6.css" type="text/css" media="all" />
5. <script type="text/javascript" src="js/mootools.js"></script>
6. <script type="text/javascript" src="js/overlay.js"></script>
7. <script type="text/javascript" src="js/multibox.js"></script>
8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
9. <script src="js/jquery.js" type="text/javascript"></script>
10. <script src="js/s3Slider.js" type="text/javascript"></script>
    удаляю 8 и 9 строчку слайдер не работает за то работает multibox, а в таком варианте работает слайдер а не работает multibox. ???
  • 31 Марта 2013 20:01
    Artur1984
    Кто подскажет, я размещаю два десятка фото через данную галерею и на страничке автоматически увеличивается высота, как я понял все из-за тега <div class="multiBoxDesc mb4">Здесь будет описание фотографии;</div>. Как исправить это?
    • 23 Декабря 2013 12:32
      arkadiyxd
      Такая же ерунда
  • 9 Октября 2015 11:18
    kolaps_kol
    Все хорошо в галереи но не могу найти где поменять размер контейнера при открытии где искать?
^ Наверх ^