Викия

ru-Викия

коммент.23

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

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

Несколько таких элементов, а именно - галерею-слайдер и обычные изображения, я попытался доработать, сделать их взаимодействующими с динамическим макетом. Работа над новыми способами создания слайдера и вставки автомасштабирующихся изображений велась довольно долгое время, и наконец, я могу представить сообществу то, что получилось в итоге - проекты под названием 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) в комментариях к данному блогу или на моей стене обсуждения. Счастливого редактирования и динамичных вам праздников ;)

Викия-сеть

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