Loading...
 
Skip to main content
6
Page actions
PDF Print Get a short URL Open in WebDAV

ColorBox for JQuery

 Outdated!
External link using wiki syntax are not working anymore with the colorbox. (tested with Tiki21) IE: 
[url|text|shadowbox or box]


Since Tiki 4.0 ColorBox is a new jQuery plugin which is replacing ShadowBox visual effects.


screenshot will come here

Usage Examples

this code:

Copy to clipboard
{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"}


produces:
Image

ColorBox "Gallery"

and this way you can have more images in wiki page displayed in the shadowbox as a gallery:

Copy to clipboard
{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]"}


results in:
Image Image Image

Using html code with SEURL activated

Note: due to specific settings at doc it is not possible to call images directly using displayfileId or tiki-download_file.php?fileId=fileId&display. It should work fine on your Tiki.

Copy to clipboard
<a href="display109" data-box="box[g]">Using html code</a>

Wanna YouTube video in the box ?

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


watch it here:
You Tube video in their flash player

A button opens content in a box

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


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

Go there

Inline content in a *box trick

Copy to clipboard
[#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}


looks like:

Click Me !

Hello world !

Thank you for trying me !

Content loaded using Ajax

Example1

 Please Note
Content can't be loaded via Ajax from a different site/domain.

Code:

Copy to clipboard
{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}


Result:

Example2

 Please Note
Content can't be loaded via Ajax from a different site/domain.

Code:

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


Result:

Content of a wiki page in ColorBox

Related Links

ColorBox website

History Source Comments
Slideshow