البرنامج النصي لتوسيع الصورة على HTML. البرنامج النصي لزيادة الصور على وورد

يتم توجيه المعلومات المقدمة في هذه المقالة في المقام الأول للمشربين المبتدئين.

على صفحتين. الصفحة 1. التالي \u003e\u003e\u003e

وصف

يتيح لك برنامج JQuery Image Minkify V1.11 Script زيادة أي صورة على الصفحة إلى القيمة المطلوبة. زيادة أو العودة إلى الحالة الأولية يحدث عند الضغط على زر الماوس الناجم عن الصورة. تستعد الصورة في حالة واحدة مع الأبعاد اللازمة والزيادات وفقا للإعدادات الموجودة في ملف JQuery.magnifier.js.

إذا كانت هناك مشاكل عند تنزيل الملفات، على سبيل المثال، عبر المتصفح، انسخ الرابط (زر الماوس الأيمن → انسخ عنوان الرابط) وتنزيل الملف من خلال تنزيل Master.

بعد تنزيل الأرشيف، قم بفك عدم فكها في المجلد الحالي على جهاز الكمبيوتر الخاص بك. في المجلد JQueryimagemagnify سترى:

• مجلد الصور مع ست صور بتنسيق JPG؛
• ملف JS باستخدام ملف البرنامج النصي JQUERY.MAGNIFIERS.JS وملف مؤشر التكبير / التصغير المضغوط (لا ينعكس في جميع المتصفحات!)؛
• ملف مع مواد مظاهرة Demo.html.

افتح المتصفح الأخير الذي تستخدمه وتأكد من أن المثال التجريبي يعمل.

في المثال الذي تلقيته، ستعمل "jQuery Image Maxify V1.11" فقط عند تشغيل الإنترنت، منذ الملف احدث اصدار JQuery Libraries - يتم تحميل "JQuery.min.js" من موقع Google API.

إذا كنت تريد أن تعمل كل شيء في وضع عدم الاتصال، فقم بتنزيل أحدث إصدار من مكتبة مسج من الموقع الرسمي.

إذا كان لديك بالفعل مكتبة مسج أحدث إصدار أو أحدث (في وقت نشر المادة 3.1.1 الإصدار 3.1.1) أو تستخدمها الاتصال عن بعد لا يمكن تجديد أحدث إصدار من موقع JQuery أو Google API، بالطبع، مرة أخرى.

إرشادات التثبيت على الموقع (صورة واحدة)

الخطوة 1. حدد الصورة المرغوبة وتنزيله إلى مجلد الصور، وهو في المجلد الجذر للموقع.

الخطوة 2. محتوى JS مجلد قم بتنزيل المجلد بنفس الاسم في جذر الموقع.

الخطوة 3. رمز اتصال المسك أدناه هو jQuery.magnifier.js يجب إضافة Java.magnifier.js النصي Java إلى قسم الرأس أو الجسم في صفحتك:

الخطوة 4. ويجب استيعاب هذا الرمز في قسم الجسم في صفحتك:

التفسيرات:

المسار إلى ملف الصورة الذي حددته.

أبعاد الصورة تصل إلى التكبير. يحملهم حسب تقديرك.

ببساطة، في قسم الجسم، تقوم بإدراج رمز الصورة المعتادة، وتعيين فئة تكنولوجيا المعلومات \u003d "mincify". إذا كانت الصورة تحتوي على سمات الأحجام الصريحة (العرض والارتفاع)، فإن هذا يسمح للمستخدم بزيادة صورة إعدادات ملف نص البرنامج النصي JQuery.magnifier.js وفقا لذلك. إذا لم يتم تحديد الأحجام، فستكون الأبعاد الحقيقية للصورة هي الأساس لزيادة.

نحن ننظر إلى النتيجة:

لزيادة / نقصان، قم بنقرة واحدة على الصورة

الاختلافات مع وضع الصورة

التفسيرات:

تحديد المواقع على اليسار.

وضع على اليمين.

يمكن تغيير أحجام الصور الأولية باستخدام سمات العرض والارتفاع.

الإعدادات الممكنة في ملف JQuery.magnifier.js

jQuery.imagemagnify \u003d (dsettings: (magnifyby: 5، // نسبة زيادة الصورة (افتراضي - 3) المدة: 500، // مدة الرسوم المتحركة في مللي ثانية (افتراضي - 500) imgopity: 0.2 // درجة عتامة الصورة المصدر عندما تغطي الصورة الموسعة (افتراضيا - 0.2)

كيفية إزالة إطار الصورة؟

أجريت على وجه التحديد هذا السؤال في مجموعة فرعية منفصلة، \u200b\u200bحيث نشأت من أحد زوار الموقع.

من أجل زيادة الصورة بعد النقر فوق الماوس، يتم عرض الماوس بدون إطار، تحتاج إلى:

• افتح ملف JQuery.magnifier.js. يمكنك القيام بذلك في أي محرر نصوص، لكنني أوصي Notepad ++
• ابحث عن الكود (في المفكرة ++ سيكون 51 صف)
  var $ استنساخ \u003d $ flone.clone. CSS (الوضع: "المطلق"، اليسار: 0، الأعلى: 0، الرؤية: "مخفي"، الحدود: "1PX الصلبة الرمادي"، المؤشر: "مؤشر")). appendto (Document.body)
• في الصف المميز، قم بتعيين قيمة الحدود تساوي الصفر، أو تغيير لون الرمادي (الرمادي) على أبيض (أبيض) أو أي شيء آخر يناسبك في الموضوع. هذا كل شئ!

على صفحتين. نهاية الصفحة 1.

الصور الموجودة على المواقع شائعة جدا وفي نفس الوقت هي بأحجام كبيرة، ولكن تصاميم المواقع لا تسمح لك دائما بوضعها بتنسيق كامل. لذلك، تحتاج إلى التوصل إلى طريقة من شأنها أن تسمح لك بزيادةها.

لنبدأ بطرق بدائية، وسننهي أفضل طريقة لزيادة الصورة.

1. زيادة الصورة من خلال الرابط

عنوان العنوان أو أصغر نسخة"/>

Explanation على سبيل المثال:

• - بحيث لا يقوم الرابط بنقل وزن الصورة؛
• الهدف \u003d "_ فارغة" - تفتح الصورة في علامة تبويب جديدة.

المعلمة الأخيرة مهمة للغاية، لأنه غالبا ما يكون في كثير من الأحيان بسبب قلة الخبرة للمستخدم قد يحدث الوضع التالي: فتح الصفحة مع الصورة، لا يعرف كيفية العودة مرة أخرى، وبالتالي يغلق علامة التبويب فقط، مما يعني أوراقا تماما الموقع. التحدث بالمعلمة الأخيرة، سنثبت ذلك من مثل هذه الحالة، لأنه سيبقى مفتوحا صفحة البداية.

مثال على العمل:

على الرغم من سهولة الاستخدام، فإن هذه الطريقة بعيدة عن الأفضل، لأن زيادة الصورة التي يجب عليك فتحها صفحة جديدةولكن يمكن عرض هذه الطريقة بواسطة صور لأي أحجام. لذلك نستنتج: إذا كنت بحاجة إلى زيادة الصور ذات الحجم الكبير للغاية، فهذه هي الطريقة الصحيحة الوحيدة للقيام بذلك.

2. صورة التكبير التلقائي عند تحوم المؤشر

يعكس اسم الطريقة بوضوح جوهره: عندما تحوم مؤشر الماوس بالصورة يتم تكبيرها تلقائيا. تنفيذ الطريقة هو أولية، ولكن مرة أخرى هذه الطريقة لا أحب حقيقة أنه من المستحيل القيام بالمؤشر ببساطة من خلال الصورة. بعد كل شيء، ستزيد دائما - يمكن أن تبدأ مزعج المستخدم.

ينفذ التعليمات البرمجية التالية القدرة على التكبير تلقائيا عند تحوم المؤشر:

Пояснения к примеру:

• img.zoom {max-width: 150px } - задает ширину изображения до увеличения;
• img.zoom:hover {max-width: none } - задает ширину изображения после увеличения (параметр none означает, что ограничение на максимальный размер отсутствует);

3. Увеличение изображения при клике

Это самый распространенный и удобный метод увеличения изображений. Причем здесь существует множество способов и вариантов реализации. Рассмотрим несколько самых популярных вариантов:

3.1. Увеличение при активном фокусе

После клика мышкой на изображение оно увеличивается, однако из-за этого съезжает текст вниз, поэтому этот способ далеко не лучший. Приведем пример кода:

Как это выглядит на странице:

3.2. Увеличение изображения поверх страницы

Ниже приведен код для реализации этого метода

большое_изображение "/>

маленькое_изображение " id ="imagenM1 " />

Как это выглядит на странице:

Варианты 3.1 и 3.2 полностью основаны на возможностях CSS, а значит являются "лайт" способами, т.к. не нагружают страницу лишними скриптами. Есть и другие варианты, которые также основаны на CSS, однако, они уже более экзотические. Я не буду рассматривать их в рамках этой статьи, поскольку некоторые браузеры не поддерживаются подобные вещи.

3.3. Красивое увеличение

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

В архиве будет одна папка содержащая изображение, два файла.js и один.css.

2) Добавьте эти файлы к себе на сайт так, как они есть в архиве (т.е. папка imgs должна лежать в директории где будут файлы.js и.css).

3) На каждой странице сайта, где будет использоваться увеличение изображения, необходимо подключить метод и стиль simplebox:

>

Я советую указывать полный путь к файлам simplebox_util.js , simplebox.css и simplebox.js , чтобы их можно было легко использовать для каждой страницы сайта.

Для использования этого метода зуммирования используется следующая конструкция:

адрес_меньшей_копии_изображения ">

Примечание
Вместо адреса меньшей копии изображения можно прописать адрес основного изображения, но при этом применить атрибут width, в котором указать небольшую ширину (читайте подробнее о ).

Всем привет на сайт. Продолжаем улучшать наши блоги для заработка. Думаю ни для кого не секрет, что на сайте играют огромную роль. Конечно не все понимают каким образом и через какое время они начинают влиять, но факт остается фактом. Чтобы улучшить эти факторы нам необходимо улучшить юзабилити сайта: добавить , улучшить дизайн, сделать его привлекательным и простым. Сделать правильную обработку картинок на сайте. Многие хотели бы узнать ответ о том, как сделать на сайте картинку при нажатии на которую она увеличивалась. Этот увеличение реализовано у меня на сайте. Согласитесь достаточно приятно, что можно увеличить картинки, посмотреть всю красоту во весь экран.

Сегодня постараюсь открыть вам этот секрет увеличения. Вообще картинку можно увеличить несколькими действиями:

• Например, можно увеличить ее при наведении кнопки мыши
• Вторым вариантом может быть увеличение при нажатии

Конечно, если вы пользуетесь WordPress, то самым простым и легким вариантом будет поиск шаблона с нужной нам функцией, поверьте в интернете сейчас огромное количество таких. Так что в 95 процентах случаев вы найдете именно шаблон с увеличением картинки. Но что делать если вам нравится именно эта тема и вы хотели бы сделать увеличение картинки только на ней. Или вы вообще пишете на листке html свой первый сайт, в чем я конечно сильно сомневаюсь.

Подключаем ява скрипты для увеличения картинки

Итоговым результатом будет увеличенная картинка, по типу . Ладно, все это философия, чтобы произвести увеличение картинки нам необходимо подключить библиотеку jQuery. Не помню но вроде в каком то уроке я писал про эту библиотеку, но если вы забыли - напомню. Чтобы подключить библиотеку необходимо в сайта вставить два кода.

Следует понимать что библиотек jQuery достаточно много и в разных случаях подключаются разные библиотеки

Если же вы пишите свой сайт на голом html, то для вставки картинки вам потребуется этот код

Обратите внимание что в этом случае вам необходимо будет положить свою картинку в папку images и указать свое название картинки. Не забывайте, что файлы библиотеки ява скриптов у вас должно находится там же где и главная страница сайта, иначе просто пропишите к ним другой путь. Скачать библиотеку файлов для увеличения картинки на сайте, можете . Ну и самое главное теперь, если вы хотите увеличить свою картинку то пропишите к ней следующие свойства.

Привет! Бывает так: заходишь на блог, видишь скрин, а что в нём — вообще не видно. Вот и думаешь, что же автор этого поста хотел показать в нём? Но выход есть — скрипт увеличения картинки при нажатии!

Очень классная штука, этот скрипт. Сами смотрите, увеличивает по клику:

(Кликабельно)

На самом деле существует много различных эффектов увеличения картинки в статье блога, но этот эффект на мой взгляд наилучший.

Кому будет полезен данный скрипт увеличения картинок?

1. В первую очередь тем, кто снимает скриншоты с пояснениями . Например, если вы решили снять объёмный скриншот для своей статьи, что — то там подрисовали, для того, чтобы материал был более понятен, закинули в статью, а он просто-напросто в полной мере на странице вашего блога не помещается, поэтому вордпресс его автоматически сжимает, да бы не выйти за границы страницы. А после сжатия видимость, читабельность сильно уменьшается. У меня так ни раз было, поэтому я и решил воспользоваться данным скриптом увеличения картинки без потери качества.
2. Если вы попросту не хотите в статье размещать объёмные изображения . Бывает так, что нужно показать много изображений в одной статье, но не хочется, чтобы эти изображения занимали много места, тогда установка скрипта — оптимальный вариант! Да и вообще, если не хотите размещать объёмные изображения, тогда данный скрипт просто необходим.

Отлично. Теперь нам нужно установить скрипт на свой сайт. Установка проходит в 3 шага:

1. Скачиваем скрипт и закидываем в корневую директорию своего сайта.
2. Устанавливаем необходимый код на свой сайт.
3. Закидываем рисунок в статью и настраиваем её отображение.

Итак, начнём.

Вторым этапом у нас идёт установка кода скрипта. Куда устанавливать код? Можно устанавливать в header.php, footer.php, function.php, index.php, но я обычно устанавливаю в footer.php, перед тегом , чтобы код последним подгружался.

Вот сам код:

А вот, что получилось у меня:

(Кликабельно)

А теперь самое интересное .

Чтобы скрипт увеличивал картинки без потери качества нужно:

1. После закачки изображения в статью необходимо открыть "Параметры изображения " и в пункте "Ссылка " выбрать "Медиафайл " .

Приветствую всех читателей блога сайт. На моём блоге колонка с публикуемыми статьями не узкая. Скриншоты и изображения можно размещать большого размера чтобы на них было все хорошо видно. И все же на днях приступив к написанию обзора программы Majento PositionMeter созданной для проверки позиций сайта в поисковых системах, мне захотелось вывести скриншот на весь экран.

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

Получилось как в «Крокодиле Данди» - прогулка затянулась. Выпал из рабочего графика, нарушил все лимиты отведённый самим собой на поиски. Ну да бог с ним, надеюсь, что не зря. Возможно, мой труд кому-нибудь пригодится. Предлагаю вашему вниманию два неплохих решения увеличения картинки при нажатии.

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

Увеличение картинки при нажатии с Highslide JS

При помощи скрипта Highslide JS разработанного норвежской компанией Highsoft AS помимо увеличения изображения при нажатии, можно создавать медиагалереи, всплывающие окна, работающие на html, ajax, Iframe и flash. Приступим к действиям. Идём на страницу загрузки скрипта http://highslide.com , скачиваем свежий архив, и распаковываем его.

Находим файл с расширением index, открываем его при помощи любого браузера, появится окно с примерами. Выбираем тот, визуальные эффекты которого больше по душе. Имеется пять готовых вариантов конфигурации скрипта для увеличения картинки при нажатии.

Создаем новый текстовый файл на рабочем столе, копируем в него части кода выделенного на скриншоте красным и зеленым квадратом на небольшом удалении друг от друга. Займемся их редактированием. Первый код нам нужно будет расположить на страницах своего сайта между тегами head. За что он отвечает? Давайте почитаем комментарии.

В комментарии под цифрой один говорится о том, что нужно указать пути к файлам js и css, и они должны непременно быть расположены на нашем сервере. Удаляем комментарии, прописываем путь, где будет находиться каталог с файлами скрипта. Все двоеточия заменяем на название скачанного каталога - highslide-4.1.13. И файл highslide.js заменим на более функциональный highslide-full.js. Вдруг в будущем захочется использовать еще какие-нибудь плюшки Highslide JS. Во втором комментарии говорится о том, что важно указать путь к каталогу с графикой скрипта. И что здесь можно производить изменение настроек. Получится должно примерно так.

< ! --Highslide JS --> < link rel ="stylesheet" type ="text/css" href ="/highslide-4.1.13/highslide/highslide.css" />

Теперь готовый код нужно разместить в секции head перед закрывающимся тегом. У себя на блоге, работающем на WordPress, я его разместил в файле footer.php используемой темы, перед закрывающимся тегом .

Приступим к редактированию второго кода, который будем вставлять непосредственно в страницы с текстом для увеличения картинки при нажатии. Приведем его для удобства использования к следующему виду:

Теперь выкинем все лишнее из каталога highslide-4.1.13.

Находим папку highslide, открываем ее и удаляем все кроме папки graphics, и подключаемых файлов highslide-full.js, highslide.css, highslide-ie6.css. Размещаем highslide-4.1.13 в корневом каталоге своего сайта. Скрипт готов к работе. Можно заливать картинки, размещать код скрипта на странице, и наслаждаться эффектом увеличения картинки при нажатии.

Для корректной работы скрипта Highslide JS в WordPress надо предварительно разрешить одну проблему. При переходе из html редактора в визуальный исчезает часть кода скрипта - onclick="return hs.expand(this)" .
Открываем файл functions.php используемой темы и добавляем следующий код внизу, перед?>.

// фильтр function change_mce_options($initArray) { $initArray["verify_html"] = false; $initArray["cleanup_on_startup"] = false; $initArray["cleanup"] = false; $initArray["forced_root_block"] = false; $initArray["validate_children"] = false; $initArray["remove_redundant_brs"] = false; $initArray["remove_linebreaks"] = false; $initArray["force_p_newlines"] = false; $initArray["force_br_newlines"] = false; $initArray["fix_table_elements"] = false; $initArray["entities"] = "160,nbsp,38,amp,60,lt,62,gt"; return $initArray; } add_filter("tiny_mce_before_init", "change_mce_options");

// фильтр function change_mce_options ($ initArray ) { $ initArray [ "verify_html" ] =false ; $ initArray [ "cleanup_on_startup" ] =false ; $ initArray [ "cleanup" ] =false ; $ initArray [ "forced_root_block" ] =false ; $ initArray [ "validate_children" ] =false ; $ initArray [ "remove_redundant_brs" ] =false ; $ initArray [ "remove_linebreaks" ] =false ; $ initArray [ "force_p_newlines" ] =false ; $ initArray [ "force_br_newlines" ] =false ; $ initArray [ "fix_table_elements" ] =false ; $ initArray [ "entities" ] ="160,nbsp,38,amp,60,lt,62,gt" ; return $ initArray ; add_filter ("tiny_mce_before_init" , "change_mce_options" ) ;

Сохраняем изменения, проблема решена.

Для удобства использования скрипта увеличения картинок при нажатии можно добавить дополнительные кнопки в html редактор WordPress.

Дополнительные кнопки в html редакторе для Highslide JS

Снова открываем файл functions.php используемой темы и вставляем следующий код, в самом низу, перед?>.

// Дополнительные кнопки html-редактор add_action("admin_print_footer_scripts", "add_sheens_quicktags"); function add_sheens_quicktags() { ?>

// Дополнительные кнопки html-редактор add_action ("admin_print_footer_scripts" , "add_sheens_quicktags" ) ; function add_sheens_quicktags () { < ? php

Обратите внимание на то, что в кнопке mo1 я проставил максимально допустимую ширину отображения миниютюры для своего блога width=»730″. Если мне требуется миниатюра меньше, я просто меняю значение. Замените допустимую ширину на своё значение. Можно также проставить и высоту.

Сохраняем, идём в текстовый редактор, видим следующее.

Используем кнопки div, mo1, mo2, float-l, float-r, нужный код скрипта Highslide JS теперь можно выводить быстро и удобно. Осталось прописать путь к картинкам, заполнить title, alt, и написать дополнительный текст к изображениям.

Можно создать собственную конфигурацию скрипта используя Highslide JS редактор. Я для своего блога именно так и поступил.

Использование редактора Highslide JS

В левой колонке открытого окна сайта разработчиков переходим в редактор Highslide JS, кликая на кнопку Editor. Перед нами откроется окно - Добро пожаловать в редактор Highslide.

Жмём на зелёную кнопку Get started!

Пошагово о том, как пользоваться редактором Highslide JS. Краткие рекомендации.

По умолчанию откроется вкладка General.

General

Language

В общей сложности языковых локалей 35 штук. Из них постсоветского пространства три. Литовский, русский, украинский. Сделать перевод на интересующий язык несложно. Переводить немного, ниже поймёте в каком файле это все находится. Выбираем нужный язык, двигаемся дальше.

Load example

Выбираем вариант отображения увеличения картинки при нажатии. Жмём на кнопку со стрелочкой, во всплывающем окне появятся варианты. Останавливаемся на понравившемся. Их всего четыре идущие первыми. Остальные для других задач - отображение галереи, всплывающих окон. Я использовал No border, simple close button.

• White rounded outline
• White border and drop shadow
• No border, simple cloze button
• No outline, coloured CSS borders

Для просмотра любого из вариантов сначала кликаем по картинке справа, а потом перебираем эффекты. Выбираем тот, который понравился и переходим на следующую вкладку. Далее, во всех настройках сначала кликаем справа на изображение, а после этого используя изменения в настройках редактора, наблюдаем как всё будет выглядеть визуально.

Gallery и HTML

Эти два пункта я пропустил так как, пока они в мои задачи не входят. Меня интересует пока только увеличение картинки при нажатии.

Style

Thumbnail
Explanation label

Настройка внешнего вида и эффектов миниатюры.

Три настройки на выбор. Можно вывести подсказки под миниатюрой.

None - без подсказки, Text bellow - с поясняющим текстом, Icon and text below - с картинкой и текстом. Мне кажется, подсказки это лишнее.

Кнопка Thumbnail border

Нажав на эту кнопку можно настроить толщину и цвет бордюров миниатюры.

Label style

Ставим галочку в предварительном просмотре, и выбираем отображение значка загрузки. Это на тот случай, если нажатие на изображение произведено, а её увеличение не спешит показываться.
Popup styles
Background

Здесь можно изменять вид всплывающего окна. Менять фон подписи изображения. Изменять ширину и цвет бордюров увеличенного изображения.
Dimming
Apply page dimming mask

Хотите чтобы при нажатии на картинку для увеличения фон страницы затемнялся, ставьте в этой настройке галочку в чекбокс. Нажав на Dimming options, настраиваем опции затемнения, выбираем цвет.

Behavior

В Behavior настраиваем поведение всплывающего окна.
Animation
Easing
Четыре варианта анимации при выводе увеличенного изображения.

Кнопка Advanced animation

Настраиваем скорость появления и исчезновения увеличенной картинки.

Hide thumbnail on expand (not gallery)

Если напротив этого пункта поставить галочку при увеличении изображения сама миниатюра будет невидимой.
Popup size and alignment
Настройка размеров увеличивающегося окна и его выравнивание.

Alignment

Выбираем вариант по умолчанию выравнивания увеличенной картинки. Я выбрал вывод увеличенного изображения на странице - avto.

Кнопка Advanced align

Нажав на эту кнопку можно выставить настройки ширины и высоты минимального, максимального и фиксированного размера изображения. Настроить отступы - top, right, bottom, left.

Overlays

Добавление текста к увеличенному изображению.
Подпись у меня на увеличенном изображении при нажатии будет отображаться внизу. Заголовок будет отображаться вверху. В обоих пунктах предложено четыре одинаковых источника с которых выводится текст с увеличенной картинкой. При помощи тайтла картинки, тайтла и альта миниатюры, и последующего самостоятельно прописанного текста, обёрнутого в div.

Заголовок у меня берётся с тайтла большого изображения, подпись с текста, обёрнутого в div.

Со следующих двух пунктов я убрал галочки. Close button - отображает крестик на закрытие в правом верхнем углу. Show credits - выводит неброскую ссылку на сайт разработчиков.

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

Редактирование файлов сайта, интеграция скрипта

Подключаем собственную конфигурацию скрипта, выполнив три рекомендуемых шага.

Сначала открываем вкладку Publish в окне с примером, жмем на Yes, скачиваем архив с собственной конфигурацией на компьютер кликнув на Download a zip archive. После этого распаковываем его, и пока оставляем в покое. Копируем содержимое Step2 и Step3 в созданный текстовый файл для последующего редактирования, закрываем окно.

Для работы скрипта нам надо указать пути к файлам непосредственно на него, папку с графикой и стили CSS прописав код в секции head на страницах сайта. Это код скопированный из Step2, приступаем к его редактированию. В моем случае он выглядел так: