Пятница, Март 05, 2021

Звоните нам: (067) 440 4664

RSS Vimeo Skype Google Plus LinkedIn Twitter Facebook

  • FUNTOPIA

    Это…

  • ROCKTOPIA

    Реальна…

  • ROLLGLIDER

    Когда…

  • WALLTOPIA

  • БЕЗОПАСНОСТЬ

  • ДИЗАЙН

    Команда…

  • ИННОВАЦИИ

  • ПРОЕКТИРОВАНИЕ

    Наши…
› ‹
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Последние работы

  • Скалодромы

Построили новый скалодром SPACE DESIGN

Read More

Услуги

  • Консультации +

    WALLTOPIA осуществляет консультационные услуги для стартирования бизнеса Read More

  • Дизайн +

    Команда дизайнеров WALLTOPIA имеет более тысячи художественных проектных решений Read More

  • Инженеринг +

    Walltopia гордится командой из 11 собственных полностью сертифицированных инженеров Read More

  • Трансформируемые стены +

    Walltopia является первым и единственным производителем стен для скалолазания, которые являются ТРАНСФОРМИРУЕМЫМИ Read More

  • Сборная технология +

    Скалодромы WALLTOPIA полностью сборные Read More
  • 1

Новости

Наш сайт заработал

Magnus BlogЗдесь вы можете ознакомиться с новейшими технологиями скалодромов, заказать строительство, а также многое и многое другое

Widgetkit Spotlight

  • Печать
Подробности
Категория: Features
Опубликовано: 22.01.2013 11:25
Автор: Super User
Просмотров: 1595

The Widgetkit Spotlight allows you to add an overlay to your images which fades or moves in on mouse hover. The overlay can be an image or HTML content. The default magnifier spotlight is a perfect match to be used with a lightbox.

Features

Create nicely animated image overlays
Supports custom image or HTML content overlays
5 different animation modes
Build on the latest jQuery version
Works with Joomla and WordPress

Examples

If no custom overlay is set the default spotlight fades in an overlay with an magnifier image. If you define a custom overlay you can choose between different animations - fade, bottom, top, right and left.

fade elastic Custom Overlay (Bottom) none Custom Overlay (Right)

fade fade Custom Overlay (Top) fade Custom Overlay (Left)

How To Use

Use the HTML5 custom data attribute data-spotlight to activate the spotlight.

<a data-spotlight="on" href="/mypage.html">
	<img src="/image.jpg" width="180" height="120" alt="" />
</a>

To create a custom overlay use a div element with the CSS class overlay. You can set the effect parameter to the data attribute. For example:

<a data-spotlight="effect:bottom;" href="/mypage.html">
	<img src="/image.jpg" width="180" height="120" alt="" />
	<span class="overlay">Custom Overlay</span>
</a>

You can set the effect parameter to fade, bottom, top, right and left.

Widgetkit Lightbox

  • Печать
Подробности
Категория: Features
Опубликовано: 22.01.2013 11:24
Автор: Super User
Просмотров: 952

The Widgetkit Lightbox allows you to view images, HTML and multi-media content on a dark dimmed overlay without having to leave the current page.

Features at a glance

Display images, videos, HTML, Iframes, Ajax requests and SWF
Supports YouTube, Vimeo, MP4 (h.264), WebM and FLV movies
Group lightboxes and mix different content types
Responsive design to fit images great on mobile devices
Load other widgets in lightbox
3 different opening and closing transitions
4 different caption styles
Keyboard and mouse scroll wheel navigation
Build on the latest jQuery version
Works with Joomla and WordPress

Examples

Different animations - fade, elastic and none

fade elastic none

<a data-lightbox="transitionIn:fade; transitionOut:fade;" href="/images/sampledata/lightbox/lightbox_01_big.jpg"><img src="/images/sampledata/lightbox/lightbox_01.jpg" border="0" alt="fade" /></a>

Different title positions - float, inside and over

fadefade fade

<a data-lightbox="transitionIn:elastic; transitionOut:elastic; titlePosition:float;" href="/images/sampledata/lightbox/lightbox_01_big.jpg" title="Donec augue felis, aliquet sit amet tempor vel, sollicitudin nec sem."><img class="pic3d" src="/images/sampledata/lightbox/lightbox_01.jpg" border="0" alt="fade" width="190" height="119" /></a>

You can use it in a gallery

fade fade fade

<a data-lightbox="transitionIn:elastic; transitionOut:elastic; titlePosition:float; group:gallery1" href="/images/sampledata/lightbox/lightbox_01_big.jpg" title="Donec augue felis, aliquet sit amet tempor vel, sollicitudin nec sem."><img class="pic3d" src="/images/sampledata/lightbox/lightbox_01.jpg" border="0" alt="fade" width="190" height="119" /></a>

Various examples in one gallery (try also using the keyboard and mouse scroll wheel)

Donec sit amet posuere odio. In vel ipsum id augue hendrerit porta sed a magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum facilisis hendrerit urna vel hendrerit. Duis in urna nulla, ac volutpat tortor. Vivamus eget sem nunc. Suspendisse potenti. Donec rhoncus erat at risus blandit sed pharetra nulla scelerisque. Nulla quis nisi odio. Quisque nec orci erat, ac tempus justo. Curabitur facilisis tincidunt molestie. Cras eros ligula, facilisis sit amet vulputate eget, ullamcorper eget lorem. Donec faucibus pulvinar metus, ut facilisis lectus luctus eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque interdum placerat pretium.

Load Widgets In A Lightbox

Use #wk-ID to load widgets like slideshows or galleries in a lightbox. For example: Widgetkit Slideshow

<a data-lightbox="width:600;height:375;" href="#wk-1">Lightbox</a>

How To Use

Use the HTML5 custom data attribute data-lightbox to activate the lightbox. You can set various lightbox parameters to the data attribute. For example:

<a data-lightbox="width:1000;height:600;" href="http://www.wikipedia.org">Lightbox</a>

Here is a list of the most common parameters:

  • titlePosition - How should the title show up? (float, outside, inside or over)
  • transitionIn - Set a opening transition. (fade, elastic, or none)
  • transitionOut - Set a closing transition (fade, elastic, or none)
  • overlayShow - Set to true or false
  • scrolling - Set to yes or no
  • width - Set a width in pixel
  • height - Set a height in pixel
  • padding - Set a padding in pixel

Offline Page

  • Печать
Подробности
Категория: Features
Опубликовано: 22.01.2013 11:23
Автор: Super User
Просмотров: 137

Offline Page

Module Variations

  • Печать
Подробности
Категория: Features
Опубликовано: 22.01.2013 11:23
Автор: Super User
Просмотров: 216

There are 18 stylistic module class suffixes, these add a unique style variation to the module: box1-6 and title1-12; and 18 structural suffixes, these affect the layout and metrics of the module.

Enter any available suffixes at Extensions → Module Manager → Module → Module Class Suffix.

You can compound multiple suffixes together such as: box1 title3.

Structural Suffixes

 

18 structural suffixes, these affect the layout and metrics of the module.

rounded, square, basic, standardcase, lowercase, uppercase, flush, flushtop, flushbottom, shadow2, shadow3, shadow4, shadow5, shadow6, shadow7, shadow8, shadow9, shadow10

  • Вы здесь:  
  • Home
  • Features
Наверх