
Когда на сайте очень большое количество картинок в которых необходимо внимательно рассматривать детали, встает вопрос как увеличивать необходимое изображение при нажатии? Так как не очень удобно на сайте использовать оригинальные изображения прямиком,это очень плохо будет сказываться для загрузки страницы сайта в целом. Для этого я предлагаю использовать такой скрипт
Увеличиваем картинку с помощью скрипта
Для начала скачиваем скрипт. Данный скрипт можно скачать отсюда
Далее распаковываем содержимое папки Simplebox в корень вашего сайта,там где лежат все файлы для вашего сайта
После этого копируем код самого скрипта и вставляем его перед закрывающим тегом body, обычно он находится в футере (footer).
<script src="http://site.ru/simplebox_util.js" type="text/javascript"></script><script type="text/javascript">// <![CDATA[ (function(){ var boxes=[],els,i,l; if(document.querySelectorAll){ els=document.querySelectorAll('a[rel=simplebox]'); Box.getStyles('simplebox_css','http://site.ru/simplebox.css'); Box.getScripts('simplebox_js','http://site.ru/simplebox.js',function(){ simplebox.init(); for(i=0,l=els.length;i<l;++i) simplebox.start(els[i]); simplebox.start('a[rel=simplebox_group]'); }); } })(); // ]]></script>
Сразу же в этом скрипте заменяем пути в этих строчках и указывайте вместо site.ru название своего сайта:
<script type="text/javascript" src="http://site.ru/simplebox_util.js"></script> Box.getStyles('simplebox_css','http://site.ru/simplebox.css'); Box.getScripts('simplebox_js','http://site.ru/simplebox.js',function(){
После этого заходите в статью в свойства вашей картинки и в отношении пишите Simplebox, сохраняете изменения.
После данных действий , зайдя на ваш сайт при нажатии на картинку вы должны получить такой эффект как у меня на картинке ниже.
Вот и все,теперь Вы знаете как увеличивать картинки при нажатии благодаря данному скрипту. Всем удачи, и успехов!
шустрый скрипт, всем советую
А как? ставить на сайт хтмл? спс за ранее!
На сайте HTMl также добавляется этот скрипт в footer (подвал) сайта и затем в коде в свойствах изображения добавляется отношение вот такое rel=simplebox. Вот пример:
<a rel="simplebox" href="ссылка на картинку" rel="nofollow"><img alt="Название картинки" src="ссылка на картинку" width="306" height="182"></a>
Все работает! Спасибо!
А как уменьшить открываемое окно?
В CSS, как я понял, можно уменьшить только накладываемую картинку, а не весь блок.
Хороший скрипт.
А как сделать, чтобы фото открывалось не на полный экран, а меньше. То есть, чтобы можно было изменять?
Скрипт супер, и прост в установке, и быстро работает
Огромное спасибо! Просто и со вкусом!!!
С помощью Simplebox можно только картинки увеличивать? Есть возможность в всплывающем окне отобразить контактную форму заявки?
Хрень, уже не актуально. Открывает в этом же окне на черном фоне во весь экран.
Ну дак год статьи какой? х) Многие вещи в IT технологиях становятся неактуальными спустя от пары месяцев до полугода.
Ничего не хрень. вчера подключил — все работает. Пути к скрипту правильно пропиши и убедись в наличии файлов и будет тебе счастье