HTML'deki görüntüyü büyütmek için komut dosyası. WordPress'deki resimleri artırmak için komut dosyası

Bu makalede sunulan bilgiler öncelikle yeni başlayan web yöneticileri için yönlendirilir.

İki sayfada. Sayfa 1. Sonraki \u003e\u003e\u003e

Açıklama

JQuery Image Magnify V1.11 komut dosyası, sayfadaki herhangi bir görüntüyü gerekli değere çıkarmanıza olanak sağlar. Artırmak veya geri dönmek başlangıç \u200b\u200bhali Görüntüye indüklenen fare düğmesine bastığınızda oluşur. Resim, bir örnekte gerekli boyutlarla hazırlanıyor ve JQuery.magnifier.js dosyasındaki ayarlara göre artar.

Dosya indirirken sorunlar varsa, örneğin tarayıcı üzerinden, bağlantıyı kopyalayın (sağ fare düğmesi → Bağlantı adresini kopyalayın) ve dosyayı indirme master üzerinden indirin.

Arşivi indirdikten sonra, bilgisayarınızdaki geçerli klasöre açın. JQueryimagemagnify klasöründe göreceksiniz:

• jPG formatında altı resim ile görüntüler klasörü;
• jQuery.magnifier.js komut dosyası ve magnify.cur zoom imleci dosyası ile JS klasörü (tüm tarayıcılara yansıtılmıyor!);
• gösteri malzemesi Demo.html ile dosya.

Kullandığınız son tarayıcıyı açın ve demo örneğinin çalıştığından emin olun.

Aldığınız örnekte, "JQuery Image Magnify V1.11", dosyadan bu yana internet açıldığında çalışır. en son sürüm JQuery kütüphaneleri - "jquery.min.js" Google API sitesinden yüklenir.

Her şeyin çevrimdışı çalışmasını istiyorsanız, jQuery kütüphanesinin en son sürümünü resmi sitesinden indirin ve bağlayın.

Zaten en yeni veya sonraki sürümün bir jquery kütüphanesine sahipseniz (makalenin yayınlanması sırasında - sürüm 3.1.1) veya kullanırsanız uzak bağlantı Elbette JQuery veya Google API sitesindeki en son sürüm tekrar yenilenemez.

Sitede kurulum talimatları (tek resim)

Adım 1. İstediğiniz görüntüyü seçin ve sitenin kök klasöründe olan görüntüler klasörüne indirin.

Adım 2. İçerik JS Klasörü Sitenin kökündeki aynı adda klasörü indirin.

Adım 3. Aşağıdaki jquery bağlantı kodu jquery.magnifier.js java.magnifier.js java betiği, sayfanızın baş veya gövde bölümüne eklenmelidir:

4. Adım ve bu kod, sayfanızdaki vücut bölümünde bulunmalıdır:

Açıklamalar:

Seçtiğiniz görüntü dosyasının yolu.

Görüntü Boyutları Yakınlaştırmak için. Onları kendi takdirinize göre sergileyin.

Basitçe söylemek gerekirse, vücut bölümünde, her zamanki gibi görüntü kodunu takın, IT sınıfı \u003d "büyütme" atar. Görüntü açık boyutlar (genişlik ve yükseklik) özellikleri içeriyorsa, bu, kullanıcının jquery.magnifier.js komut dosyası dosyasının ayarlarını buna göre artırmasını sağlar. Boyutlar belirtilmemişse, görüntünün gerçek boyutları bir artışın temelinde olacaktır.

Sonuç olarak bakıyoruz:

Artırmak / azaltmak için, görüntüye bir tıklama yapın

Görüntü yerleştirme ile varyasyonlar

Açıklamalar:

Solda konumlandırma.

Sağa konumlandırma.

İlk görüntü boyutları, genişlik ve yükseklik öznitelikleri kullanılarak değiştirilebilir.

JQuery.magnifier.js dosyasındaki olası ayarlar

Jquery.imagemagnify \u003d (DSETTINGS: (Magnifyby: 5, // görüntü artışı oranı (varsayılan - 3) Süre: 500, // milisaniyede Animasyon Süresi (Varsayılan - 500) Imgopacity: 0.2 // büyütülmüş görüntü kaptığında kaynak görüntünün opaklık derecesi (varsayılan olarak - 0.2)

Resim çerçevesini nasıl kaldırılır?

Bu soruyu, site ziyaretçilerinden birinden kaynaklandığı gibi, bu soruyu ayrı bir alt bölümde yaptım.

Resmi daha büyükleştirmek için fareye tıkladıktan sonra, fare çerçevesiz görüntülenir, ihtiyacınız var:

• Jquery.magnifier.js dosyasını açın. Bunu herhangi bir metin düzenleyicide yapabilirsiniz, ancak Not Defteri ++ öneririm
• Kodu Bul (Not Defteri ++ 'da 51 satır olacak)
  var $ clone \u003d $ hedef.clone (). CSS (konum: "Mutlak", Sol: 0, Üst: 0, Görünürlük: "Gizli", Sınır: "1px katı gri", imleç: "Pointer")). AppendTo (Belge.body)
• Vurgulanan satırda, kenarlık değerini sıfıra eşit olarak ayarlayın veya gri (gri) rengini beyaz (beyaz) veya konuyla ilgili size uygun olan herhangi bir başkasını değiştirin. Bu kadar!

İki sayfada. Sayfa 1'in sonu.

Sitelerdeki görüntüler oldukça yaygındır ve aynı zamanda büyük boyutlarda, ancak sitelerin tasarımları her zaman tam olarak yerleştirmenize izin vermez. Bu nedenle, onları arttırmanıza izin verecek bir yoldan gelmeniz gerekir.

İlkel yöntemlerle başlayalım ve görüntüyü artırmanın en iyi yolunu bitireceğiz.

1. Bağlantı yoluyla görüntüyü artırın

adres-resim-veya daha küçük kopya"/>

Örneğin açıklama:

• - Böylece bağlantı görüntünün ağırlığını aktarmaz;
• hedef \u003d "_ boş" - Görüntü yeni sekmesinde açılır.

Son parametre oldukça önemlidir, çünkü genellikle kullanıcının deneyimsizliklerinden kaynaklandığından, aşağıdaki durum ortaya çıkabilir: Sayfayı resimle açmak, nasıl geri döneceğini bilmiyor ve bu nedenle sadece sekmeyi kapatır; bu Site. Son parametreyi konuşan, böyle bir durumdan kanıtlayacağız, çünkü başlangıç \u200b\u200bsayfasını açacaktır.

İş örneği:

Kullanım kolaylığına rağmen, bu yöntem en iyisinden uzaktır, çünkü açmanız gereken görüntüyü artırmak için yeni sayfaAncak bu yöntem, herhangi bir boyuttaki görüntülerle görüntülenebilir. Bu yüzden sonuçlandırıyoruz: Çok büyük bir boyutun görüntülerini artırmanız gerekiyorsa, bu yapmanın tek doğru yolu budur.

2. İmleci taşırken otomatik yakınlaştırma görüntüsü

Yöntemin adı, özünü açıkça yansıtıyor: Fare imlecini görüntüye vurduğunuzda otomatik olarak yakınlaştırılır. Yöntemin uygulanması temeldir, ancak yine bu yöntemi tekrar imleci imajın içinden yapmanın imkansız olmasını sevmiyorum. Sonuçta, her zaman artacak - kullanıcıyı sinirlendirmeye başlayabilir.

Aşağıdaki kod, imleci gezdirirken otomatik olarak yakınlaştırma yeteneğini uygular:

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

• 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, приступаем к его редактированию. В моем случае он выглядел так: