Викия

ru-Викия

коммент.23

Два скрипта для динамического макета

Обнаружено использование расширения AdBlock.


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

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

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

Несколько таких элементов, а именно - галерею-слайдер и обычные изображения, я попытался доработать, сделать их взаимодействующими с динамическим макетом. Работа над новыми способами создания слайдера и вставки автомасштабирующихся изображений велась довольно долгое время, и наконец, я могу представить сообществу то, что получилось в итоге - проекты под названием FluidImage и FluidSlider. Оба расширения созданы с использованием JQuery, CSS и шаблонов и подключаются обычным импортом кода в общий JavaScript-файл википроекта.

Рассмотрим каждое из расширений подробнее.

FluidImage

FluidImage - это шаблон, позволяющий вставлять на страницу автомасштабирующиеся изображения, то есть такие, которые сами изменяют свои размеры при изменении размера окна:

Обычное изображение:


FluidPlaceholder.JPG


Изображение, добавленное с помощью шаблона FluidImage (измените масштаб страницы, чтобы увидеть разницу):

 


Код шаблона можно просмотреть здесь. Для вставки изображения необходимо указывать полный url изображения. С помощью шаблона можно задать максимальный размер изображения и его расположение на странице (справа или слева):

 


Код для вставки изображения:

{{FluidImage|url=http://static1.wikia.nocookie.net/__cb62487/wikia/ru/images/thumb/d/d1/FluidPlaceholder.JPG/670px-0%2C670%2C72%2C295-FluidPlaceholder.JPG|width=30%|float=left}}

Максимальная ширина изображения задаётся в процентах, параметру float можно придавать значения left и right, или вообще исключить этот параметр, тогда изображение будет выравниваться по центру.

Для применения FluidImage на своей вики скопируйте данный шаблон, и поставьте импорт кода в MediaWiki:Common.js:

importScriptPage('User:Wildream/FluidImage/code.js', 'ru.community');
FluidSlider

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

Обычный слайдер:



FluidSlider:

Динамический макет

Дата релиза - 4 декабря

Скорость!

Свежие обновления для ускорения Викия

Участники Викия

Интервью с участниками Викия из разных стран

Обновления Викия

Еженедельный отчёт от инженеров Викия


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

importScriptPage('User:Wildream/FluidSlider/code.js', 'ru.community');

нужно поставить в общий JаvaScript-файл вики. Для вставки изображения также необходим его полный url, кроме того, для каждого слайда нужно указать название страницы, на которую будет вести кнопка "Подробнее", а также текст заголовка и текста под заголовком. Код слайдера, показанного выше:

{{FluidSlider|
{{FluidSlider/Slide
|link=Блог участника:Kuzura/Динамический макет для всех википроектов
|heading=Динамический макет
|main text=Дата релиза - 4 декабря
|url=http://static1.wikia.nocookie.net/__cb20130822155046/wikia/ru/images/d/d1/FluidPlaceholder.JPG
}}
{{FluidSlider/Slide
|link=Блог участника:Kuzura/Повышение производительности Викия
|heading=Скорость!
|main text=Свежие обновления для ускорения Викия
|url=http://static3.wikia.nocookie.net/__cb62481/wikia/ru/images/thumb/b/b6/%D0%9F%D0%BE%D0%B2%D1%8B%D1%88%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BF%D1%80%D0%BE%D0%B8%D0%B7%D0%B2%D0%BE%D0%B4%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D1%81%D1%82%D0%B8_%D0%92%D0%B8%D0%BA%D0%B8%D1%8F.jpg/670px-0%2C1024%2C0%2C674-%D0%9F%D0%BE%D0%B2%D1%8B%D1%88%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BF%D1%80%D0%BE%D0%B8%D0%B7%D0%B2%D0%BE%D0%B4%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D1%81%D1%82%D0%B8_%D0%92%D0%B8%D0%BA%D0%B8%D1%8F.jpg
}}
{{FluidSlider/Slide
|link=Категория:Интервью участников
|heading=Участники Викия
|main text=Интервью с участниками Викия из разных стран
|url=http://static1.wikia.nocookie.net/__cb62481/wikia/ru/images/thumb/9/98/%D0%A1%D0%BB%D0%B0%D0%B9%D0%B4%D0%B5%D1%80_%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%B2%D1%8C%D1%8E.jpg/670px-0%2C671%2C0%2C384-%D0%A1%D0%BB%D0%B0%D0%B9%D0%B4%D0%B5%D1%80_%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%B2%D1%8C%D1%8E.jpg
}}
{{FluidSlider/Slide
|link=Блог:Технические новости
|heading=Обновления Викия
|main text=Еженедельный отчёт от инженеров Викия
|url=http://static3.wikia.nocookie.net/__cb62481/wikia/ru/images/thumb/b/b2/Slider_%D0%A2%D0%9E.jpg/670px-2%2C675%2C0%2C410-Slider_%D0%A2%D0%9E.jpg}}
}}

Надеюсь, данные расширения понравятся вам, и вы захотите их использовать. Пожалуйста, оставляйте ваши отзывы, пожелания по улучшению и просто комментарии, а также - сообщения о багах (надеюсь, обойдемся без них :D) в комментариях к данному блогу или на моей стене обсуждения. Счастливого редактирования и динамичных вам праздников ;)

Викия-сеть

Случайная вики