History: ColorBox

Source of version: 24 (current)

! ColorBox for JQuery

{REMARKSBOX(type=warning title=Outdated! close=n)}
External link using wiki syntax are not working anymore with the colorbox. (tested with Tiki21) IE: ~pp~[url|text|shadowbox or box]~/pp~
{REMARKSBOX}

Since ((Tiki4|Tiki 4.0)) ColorBox is a new ((jQuery)) plugin which is replacing ((ShadowBox)) visual effects.


''screenshot will come here''

!! Usage Examples
this code:
{CODE(wrap=1)}{img src="http://farm3.static.flickr.com/2091/1532249675_5f917a49ac_s.jpg" link="http://farm3.static.flickr.com/2091/1532249675_5f917a49ac_b.jpg" title="Some Image from flickr.com site... bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla" rel="shadowbox"}{CODE}

produces:
{img src="http://farm3.static.flickr.com/2091/1532249675_5f917a49ac_s.jpg" link="http://farm3.static.flickr.com/2091/1532249675_5f917a49ac_b.jpg" title="Some Image from flickr.com site... bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla" rel="shadowbox"}

!!! ColorBox "Gallery"
and this way you can have more images in wiki page displayed in the shadowbox as a gallery:
{CODE(wrap=1)}{img src="http://farm3.static.flickr.com/2091/1532249675_5f917a49ac_s.jpg" link="http://farm3.static.flickr.com/2091/1532249675_5f917a49ac_b.jpg" title="Some Image from flickr.com" rel="shadowbox[gallery]"} {img src="http://farm2.static.flickr.com/1185/1467868764_898ec5daf3_s.jpg" link="http://farm2.static.flickr.com/1185/1467868764_898ec5daf3_b.jpg" title="Old Port in Trogir by luci" rel="shadowbox[gallery]"} {img src="http://farm3.static.flickr.com/2212/1532365551_6856d00717_s.jpg" link="http://farm3.static.flickr.com/2212/1532365551_a1ad132f1c_o.jpg" title="Sun Going Down by luci" rel="shadowbox[gallery]"}{CODE}

results in:
{img src="http://farm3.static.flickr.com/2091/1532249675_5f917a49ac_s.jpg" link="http://farm3.static.flickr.com/2091/1532249675_5f917a49ac_b.jpg" title="Some Image from flickr.com" rel="shadowbox[gallery]"} {img src="http://farm2.static.flickr.com/1185/1467868764_898ec5daf3_s.jpg" link="http://farm2.static.flickr.com/1185/1467868764_898ec5daf3_b.jpg" title="Old Port in Trogir by luci" rel="shadowbox[gallery]"} {img src="http://farm3.static.flickr.com/2212/1532365551_6856d00717_s.jpg" link="http://farm3.static.flickr.com/2212/1532365551_a1ad132f1c_o.jpg" title="Sun Going Down by luci" rel="shadowbox[gallery]"}

!!! Using html code with SEURL activated
Note: due to specific settings at doc it is not possible to call images directly using display''fileId'' or tiki-download_file.php?fileId=''fileId''&display. It should work fine on your Tiki.

{CODE(wrap=1)}
<a href="display109" data-box="box[g]">Using html code</a> 
{CODE}

!!! --Wanna YouTube video in the box-- ?
{CODE(wrap=1)}[http://www.youtube.com/v/KBewVCducWw&amp;autoplay=1|You Tube video in their flash player|shadowbox;width=405;height=340;]{CODE}

watch it here:
[http://www.youtube.com/v/KBewVCducWw&amp;autoplay=1|You Tube video in their flash player|shadowbox;width=405;height=340;]

!!! A button opens content in a box

{CODE()}
{BUTTON(href="HomePage",_rel="box",_text="Go there")}{BUTTON}
{CODE}

willcreate a button that opens the ))HomePage(( in a colorbox:

{BUTTON(href="HomePage",_rel="box",_text="Go there")}{BUTTON}

!!! --Inline content in a *box trick--
{CODE(wrap=1)}
[#helloworld|Click Me !|shadowbox;width=280;height=180;title=Login Box]

{BOX(id=helloworld,class=wiki-edithelp)}{TAG(tag=div,style=background-color: white !important;)}
---
::__Hello world !__::

{MODULE(module=login_box)}{MODULE}

::Thank you for trying me !::
---
{TAG}{BOX}
{CODE}

looks like:

[#helloworld|Click Me !|shadowbox;width=640;height=480;title=Login Box;type=inline;]
{DIV(class=wiki-edithelp)}
{BOX(id=helloworld)}
---
::__Hello world !__::

{MODULE(module=login_box)}{MODULE}

::Thank you for trying me !::
---
{BOX}{DIV}

!!! Content loaded using Ajax
!!!! Example1
{REMARKSBOX(type="note",title="Please Note")}Content can't be loaded via Ajax from a different site/domain.{REMARKSBOX}
Code:
{CODE(wrap=1)}
{JQ()}$jq("#ajaxload a").colorbox({
                        href: function(){
                                return $jq(this).attr('href')+' .wikitext';
                        }
}
);{JQ}{DIV(id="ajaxload")}[tiki-index_raw.php?page=HomePage|Content of a wiki page in ColorBox]{DIV}{CODE}

Result:
{JQ()}$jq("#ajaxload a").colorbox({
                        href: function(){
                                return $jq(this).attr('href')+' .wikitext';
                        }
}
);{JQ}{DIV(id="ajaxload")}[tiki-index_raw.php?page=HomePage|Content of a wiki page in ColorBox]{DIV}

!!!! Example2
{REMARKSBOX(type="note",title="Please Note")}Content can't be loaded via Ajax from a different site/domain.{REMARKSBOX}
Code:
{CODE(wrap=1)}
[http://zukakakina.com/tiki-index_raw.php?page=HomePage|Content of a wiki page in ColorBox|box]
{CODE}

Result:

[http://zukakakina.com/tiki-index_raw.php?page=HomePage|Content of a wiki page in ColorBox|box]

!! Related Links
[http://colorpowered.com/colorbox/|ColorBox website|box]
History: ColorBox

Source of version: 24 (current)

About Tiki

Support

Community

Documentation

Development

Legal

Tiki Project Sites

Networks

Navigation and related functionality and content

Related content

History: ColorBox

Source of version: 24 (current)

Related content
