- 17 Июня 2009 12:29
МаксимКурочкин
2 Sergey: Всмысле? Чтобы Ваш блок картинок вертикальным был? - 17 Июня 2009 12:43
МаксимКурочкин
2 Sergey: Для этого просто нужно там, где у нас кончается одна фотография и ее описание вставить перенос строки- <br> и Ваша галерея будет вертикальной! - 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
Все хорошо в галереи но не могу найти где поменять размер контейнера при открытии где искать?
- Метки урока:
- галерея
- модальные окна
- изображения
MultiBox - новый вид галереи в модальном окне
Здравствуйте. В сегодняшнем уроке мы будем встраивать классную галерею на сайт. Называется она - MultiBox. Данный вид галереи прекрасен, по моему мнению, и может даже посоперничать с ведущими галереями - LightBox и PrettyGallery. Для начала посмотрите демо получившегося результата и скачайте исходные файлы:
Шаг 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">Здесь будет описание фотографии "Высокогорная речушка"</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">Здесь будет описание фотографии "Шан-хай"</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">Здесь будет описание фотографии "Росинки"</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
Просмотров: 102044
Правила перепечатки
5 последних уроков рубрики "Mootools"
-
Создание меню при помощи MenuMatic 0.68.3
Создание горизонтального и вертикального меню при помощи MenuMatic 0.68.3
-
Анимированные закладки с использованием MooTools
Один из возможных способов поместить много контента на одно небольшое место - это использование системы закладок. Данный урок покажет как создать систему анимированных закладок с использованием CSS, куки и анимированного переключения панелей.
-
Выезжающая панель для сайта на Mootools
Изучив этот урок, Вы научитесь делать компактную выплывающую панель для сайта. Разрабатывать ее мы будем с помощью Mootools, ну и конечно же не обойдемся и без CSS-стилей, которые будут играть здесь роль дизайнинга панели
-
Увеличение / Уменьшение текстовых полей с помощью MooTools
Короткий урок про то, как добавить к любому текстовому полю возможность увеличения или уменьшения.
-
Multi-Select c помощью MooTools
В этом уроке речь пойдет о переносе выбранных опций из одного multi-select в другой. Думаю, что подобный виджет вы уже видели. Обычно он применяется на сайтах объявлений и регистрации в каталогах, где ваше объявление (ваш сайт) подходит для размещения в нескольких рубриках. В этом уроке мы реализуем подобный виджет с помощью Mootools.
Sergey