Скрипт увеличения картинки при нажатии

Определения кода цвета на экране

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

Увеличиваем картинку с помощью скрипта

Для начала скачиваем скрипт. Данный скрипт можно скачать отсюда

Далее распаковываем содержимое папки  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, сохраняете изменения.
увеличение изображенияПосле данных действий , зайдя на ваш сайт при нажатии на картинку вы должны получить такой эффект как у меня на картинке ниже.

uvelichenieВот и все,теперь Вы знаете как увеличивать картинки при нажатии благодаря данному скрипту. Всем удачи, и успехов!

Вы можете оставить комментарий, или Трекбэк с вашего сайта.

ОЦЕНИТЕ ПОЛЕЗНОСТЬ СТАТЬИ

Оценка: 4,33 ( голосов: 6)
Loading...Loading...

ПОДЕЛИТЬСЯ ССЫЛКОЙ

Комментариев к записи: 10

  1. Иван:

    шустрый скрипт, всем советую

  2. Макс:

    А как? ставить на сайт хтмл? спс за ранее!

  3. Коломиец Богдан:

    На сайте HTMl также добавляется этот скрипт в footer (подвал) сайта и затем в коде в свойствах изображения добавляется отношение вот такое rel=simplebox. Вот пример:

    <a rel="simplebox" href="ссылка на картинку" rel="nofollow"><img alt="Название картинки" src="ссылка на картинку" width="306" height="182"></a>

  4. Алексей:

    Все работает! Спасибо!

    А как уменьшить открываемое окно?

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

  5. Алексей:

    Хороший скрипт.

    А как сделать, чтобы фото открывалось не на полный экран, а меньше. То есть, чтобы можно было изменять?

  6. Сергей:

    Скрипт супер, и прост в установке, и быстро работает

  7. Оксана:

    Огромное спасибо! Просто и со вкусом!!!

  8. Роман:

    С помощью Simplebox можно только картинки увеличивать? Есть возможность в всплывающем окне отобразить контактную форму заявки?

  9. Павел:

    Хрень, уже не актуально. Открывает в этом же окне на черном фоне во весь экран.

  10. Rod_Shacler:

    Ну дак год статьи какой? х) Многие вещи в IT технологиях становятся неактуальными спустя от пары месяцев до полугода.

Оставить комментарий

Return to Top ▲Return to Top ▲