Widgetkit

on on . . Hits: 1693

Article Index

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

fade

fade

markup
<a data-lightbox="transitionIn:fade; transitionOut:fade;" href="/images/demo/sample_big.jpg"><img src="/images/demo/sample.jpg" alt="fade" width="250" height="165" /></a>

Different title positions- float and over

fade

fade

markup
<a data-lightbox="transitionIn:elastic; transitionOut:elastic; titlePosition:float;" href="/images/demo/sample_big.jpg" title="Lorem Ipsum is simply dummy text of the printing and typesetting industry"><img src="/images/demo/sample.jpg" alt="fade" width="250" height="165" /></a>

You can use it in a gallery

fade

fade

fade

markup
<a data-lightbox="transitionIn:elastic; transitionOut:elastic; titlePosition:float; group:gallery1" href="/images/demo/sample_big.jpg" title="Lorem Ipsum is simply dummy text of the printing and typesetting industry"><img src="/images/demo/sample.jpg" alt="fade" width="250" height="165" /></a>

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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:945;height:637;" href="#wk-2">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

Reveal Lightbox

Use the [modal_box] shortcode to show a popup box with overlay. The [modal_box] shortcode can also be linked with these module positions: reveal-a, reveal-b and reveal-c. By using one of these positions as your target, the modal box will show a popup of the modules that have be placed in these positions and assigned to the corresponding menu.

target Description
reveal-a show modal box for modules in reveal-a position
reveal-b show modal box for modules in reveal-b position
reveal-c show modal box for modules in reveal-c position

For each module linked to reveal-a, reveal-b or reveal-c, you can use Module Class Suffix to style it just like a normal module. The target parameter can also be the id of a content section.

Size modifier

To adjust the size (width) of the modal box, add modal-small or modal-large to the Module Class Suffix of the module.

Trigger a modal box from link


reveal-a   reveal-b   reveal-c
markup
[modal_box link target="reveal-a"]reveal-a[/modal_box] 
[modal_box link target="reveal-b"]reveal-b[/modal_box] 
[modal_box link target="reveal-c"]reveal-c[/modal_box]

Toggle modal box from buttons


reveal-a   reveal-b   reveal-c

markup
[modal_box button style="color" target="reveal-a"]reveal-a[/modal_box]
[modal_box button style="color" target="reveal-b"]reveal-b[/modal_box]
[modal_box button style="color" target="reveal-c"]reveal-c[/modal_box]

Toggle modal box for inline content


The [modal_box] shortcode can also be used for inline content by using the following sytnax:

markup
<!-- create a link that will trigger the pop-up modal box -->
[modal_box link target="mycontent"]my link[/modal_box] 

<!-- create the content of the modal box -->
[modal_box content target="mycontent" style="mod-color"]
...
[/modal_box]

Popup content

Inline content

Throughout life people will make you mad, disrespect you and treat you bad. Let God deal with the things they do, cause hate in your heart will consume you too. Be kind whenever possible. It is always possible.



Tags: Widgetkit slideshow spotlight lightbox

Words of Wisdom

johnwesley3

Do not allow yourself one thought of separating from your brothers and sisters, whether their opinions agree with yours or not. John Wesley

motherteresa1

Mother Teresa replied, “I don’t talk, I simply listen.....[God] doesn’t talk. He also simply listens."

Kau Unga Ngāué

  • 1. Ke ke fai manava-kavakava. ‘Oua na‘a ke nofo noa ‘i ha taimi. ‘Oua na‘a ke ngāue ta‘e ‘aonga. ‘Oua na‘a ke maumau‘i ha taimi, pe te ke li‘aki ia ‘i ho‘o nofo noa pē ‘i ha potu.
  • 2. Ke ke mo‘ui fakama‘uma‘u. Ke ke kaveinga‘aki ‘a e mā‘oni‘oni ki he ‘Eikí. Faka‘ehi‘ehi koe mei he fakavā ta‘e ‘aongá mo e ngaahi lea ta‘e taaú
  • 3. Ke si‘i ho‘o fa‘a talanoa mo e kakai fefiné, kae ‘uma‘ā mo e kau finemuí ‘a e kau faifekau tangatá, pea ki he kau faifekau fefiné ke si‘i ho‘o fa‘a talanoa mo e kakai tangatá, kae ‘uma‘ā mo e kau talavoú.
  • 4. ‘O ka hokosia ha‘o teu mali, fai mo lotu ki he ‘Eikí, pea fakahā ki he Kau Faifekaú, he ko e me‘a ia ke fai tokanga pea fakakaukau‘i ‘i he loto ‘apasia ki he ‘Otuá.
  • 5. ‘Oua na‘a ke mahalo kovi ki ha taha kae ‘oua ke hā mo‘oni mai hono fakamo‘oní. Vakai ke ‘oua na‘a ke tui ngofua ki ai. Ke ke feinga ke ke mahalo lelei ki he me‘a kotoa pē. Ke ke ‘ilo ‘oku tau pehē, ‘oku kau tokua ‘a e fakamaaú kiate ia ‘oku faingata‘a‘iá.
  • 6. ‘Oua na‘a ke lau‘ikovi‘i ha taha: ‘o ka ke ka fai pehē, ‘e keina koe ‘e ho‘o leá ‘o hangē ko ha kainiloto: fakama‘uma‘u ‘i ho lotó ho‘o laú kae ‘oua ke mo fe‘iloaki mo ia ‘a ia ‘oku kau ki ai ho‘o laú.
  • 7. Tala kiate kinautolu ‘a e me‘a ‘oku ‘iate koe ‘oku nau faihala aí kae fai pē ‘i he ‘ofa pea fai ‘i he totonu pea fai ke vave telia na‘a nofo ia ‘o fakakovi‘i ho loto ‘o‘oú. Fai ke vave ke li‘aki ‘a e fai mei he lotó.
  • 8. ‘Oua na‘a ke fie‘eiki. Ko ia ‘oku malanga‘aki ‘a e Kosipelí ko e tamaio‘eiki ia ki he kakai kotoa pē.
  • 9. ‘Oua na‘a ke mā ‘i ha me‘a, ka ko e angahalá pē. ‘Oku ‘ikai ha kovi ‘i ha ngāue ‘e taha, pe ko e tā fefie, pe ko e ‘utu vai ‘o ka fai mo e loto lelei.
  • 10. Fai ‘a e ngaahi me‘a ‘i hono taimi totonu. Tokanga ki he fai‘anga ‘o e me‘a kotoa pē. Pea ‘oua na‘a ke feinga ke fakatonutonu ‘etau ngaahi tu‘utu‘uní kae fai mo‘oni ki ai ke ‘ata‘atā ho konisēnisí.
  • 11. Ko ho‘o ngāue totonú ke fakamo‘ui ‘a e ngaahi laumālie ‘o e kakaí, ko ia ke ke nima mo e va‘e pea fai fiefia. ‘Alu kiate kinautolu ‘oku masiva fakalaumālié kae fuofua fai kiate kinautolu ‘oku masiva tahá.
  • 12. ‘Oua na‘a ke fai ha me‘a ‘o hangē ko ho loto ‘o‘ou kae fai ‘a e me‘a kotoa pē ke ngali ko e foha koe ‘o e Kosipelí, pea fai fakataha mo ho kaungā lotú. Kapau ko e foha koe, pea tā ‘oku ngali ke ke ngāue‘aki ho taimí ‘o fakatatau mo e ngaahi me‘a kuo tu‘utu‘uní: ‘io, ‘i ho‘o fa‘a malanga mo e ‘a‘ahi ki he kakaí, pea mo e fa‘a lautohi mo e fakalaulauloto pea mo e fa‘a lotu.

Tohi Fakafeangaí

  • Sāpate TOHI FANONGONONGÓ, ʻOkatopa 13, 2019
    Saame 66:1-12
    Selemaia 29:1,4-7
    2 Timote 2:8-15
    Luke 17:11-19
  • Sāpate ʻEVANGELIOÓ, ʻOkatopa 20, 2019
    Saame 119:97-104

    Selemaia 31:27-34
    2 Timote 3:14-4:5
    Luke 18:1-8
  • Sāpate, ʻOkatopa 27, 2019
    Saame 65 

    Sioeli 2:23-32
    2 Timote 4:6-8,16-18
    Luke 18:9-14

Jesus, the ONLY way!

  • sinseparates
  • gooddeeds
  • bridge

"Grace"

Grace is the “the free and unmerited act of God through which we, the fallen creatures are restored to God’s original favour” -- John Wesley.