Nervi Roberto

Consulente Informatico

This is a mod for joomla system.and it's useful.


All code below will need to be entered into your content or you custom module code, don’t forget if
you are using a WYSIWYG editor, you will need to turn off code cleanup and enter this into the
html view.

Please also note, that you will need to change the URL to the images you wish to display.


{tab=Single Linked Image}

Single Linked Image

Below, you will find the code that will help you display a single image when a userclicks on a text link.

<a href="" rel="shadowbox">Link Text</a>

{tab=Linked Image Gallery}

Linked Image Gallery
This code will allow you to display a gallery of images when a user clicks on your text link.
Note here we use a CSS class of “hidden”, for the 2nd and 3rd image, this will allow us to hide
these two links, and only display the first one. When working with galleries we use [galleryname] to
help shadowbox distinguish between multiple galleries, this is very important

<a href="/" rel="shadowbox[mygallery]">Link Text</a>
<a class=”hidden” href="/" rel="shadowbox[mygallery]">Link
<a class=”hidden” href="/" rel="shadowbox[mygallery]">Link

{tab=Thumbnail Gallery}

Thumbnail Gallery

Unlike the code above the following code will display you gallery images and thumbnails.
The first part of the code is the main image, the second part “img alt=” is the thumbnail image.

<a href="/images/red.jpg" rel="shadowbox[colorThumbs]"><img alt="Red" src="/gallery/red­
<a href="/images/blue.jpg" rel="shadowbox[colorThumbs]"><img alt="blue" src="/gallery/bluw­
<a href="/images/green.jpg" rel="shadowbox[colorThumbs]"><img alt="green" src="/gallery/green­

{tab=Area Mapping}

Area Mapping

Shadowbox allows you to pin point specific areas of large images, through the use of area tags

<div id="hongkong">
<img width="600" height="82" usemap="#hongkongmap" alt="Hong Kong" src="/gallery/hongkong.jpg"/>
<map name="hongkongmap" id="hongkongmap">

<area alt="" href="/gallery/hongkong­1.jpg" coords="43,27,135,77" shape="rect"/>

<area alt="" href="/gallery/hongkong­2.jpg" coords="191,11,286,74" shape="rect"/>
<area alt="" href="/gallery/hongkong­3.jpg" coords="419,2,502,81" shape="rect"/>

{tab=Flash Media – SWF}Flash Media – SWF
You can display .swf files with Ninja Shadowbox, however with this more advanced functionality
comes a little more code, to be specific we need to tell shadowbox the height and width of out
container, this is easily accomplished, like so.
<a href="/gallery/mymedia.swf" title="My Title"
rel="shadowbox;width=400;height=300">Single SWF</a>

{tab=Flash Media – SWF Gallery}Flash Media – SWF Gallery
Similar to the linked gallery we had above, the .swf gallery also uses the CSS class “hidden” to
hide the 2nd and 3rd links. New to this code is the use of ids, this should be something unique

<a href="/gallery/mymedia.swf" title="My Media" rel="width=400;height=450" id="flash1">SWF
<a href="/gallery/mymedia1.swf" title="My Media 1" rel="width=400;height=450"
id="flash2">SWF Gallery</a>
<a href="/gallery/mymedia2.swf" title="My Media 2" rel="width=400;height=450"
id="flash3">SWF Gallery</a>

{tab=Flash Video – FLA}Flash Video – FLA
You can also include .fla files if you so wish.

<a href="/gallery/mymedia.flv" title="My Media"
rel="shadowbox;width=600;height=450">Flash Video</a>

Including movies is also very simple using Ninja Shadowbox, there are some advanced options
that can be used here, but I will cover them later in the tutorial. For now we will learn how to
include them.

{tab=Movies – .mov}Movies – .mov
Display just a single .mov movie on click, again we have to specify the width and height.

<a href="/gallery/" title="My Movie" rel="shadowbox;width=292;height=218">Single Movie (mov)</a>

{tab=Movies - .mp4}Movies - .mp4
Display an mpeg4 movie on click.
<a href="/gallery/mymovie.mp4" title="My Movie" rel="shadowbox;width=292;height=218">Single Movie (mpeg­4)</a>

{tab=Movies - .wmv}Movies - .wmv
For those of you who are using .wmv videos.

<a href="/gallery/mymovie.wmv" title="My Movie" rel="shadowbox;width=320;height=240">Single Movie (wmv)</a>

{tab=Movies –}Movies –
One of the best features of Ninja Shadowbox in my opinion is the ability to display movies for other
websites, below is an example from

<a href="/­" title="Beowulf Trailer"
rel="shadowbox;width=640;height=272"> Trailer</a>

{tab=Movies – YouTube}Movies – YouTube
Displaying videos from YouTube is just as easy.

<a href="/" title="David
Beckham" rel="shadowbox;width=405;height=340">YouTube</a>

{tab=Movies – Google}Movies – Google
Example code for displaying videos from Google.

<a href="/
play=1" title="While My Ukulele Gently Weeps"
rel="shadowbox;width=405;height=340">Google Video</a>

{tab=Movie Gallery}Movie Gallery
Yet another wonderful little feature for you to play around with, is the ability to have a movie
gallery. It’s almost too simple to be true. Here we use our good friend, CSS style “hidden” again.

<a href="/" title="YouTube"
rel="shadowbox[Movies];width=405;height=340">Movie Gallery</a>
<a href="/gallery/" title="QuickTime"
<a href="/gallery/cat.wmv" title="Windows Media"

{tab=Gallery Mixed Content}Gallery Mixed Content
And finally in movie related tutorials, the following code will show you how to mix up your gallery
with different content, using a movie file an IFRAME as well as an image.

<a href="/" title="YouTube"
rel="shadowbox[Mixed];width=405;height=340">Movie Gallery</a>
<a href="/" title="IFRAME"
<a href="/gallery/cat.jpg" title="My Image"
rel="shadowbox[Mixed]">My Image</a>

Ninja Shadowbox can also be used to display other websites, or other pages from your own
website or even hidden content from your site.
It follows the same conventions as all the other links, you can find the code below.

{tab=Inline Content}Inline Content
Inline content will display content from your website. The content has to be inside a <div> and can
be hidden or visible. Shadowbox will then load the div into the shadowbox pane.
For inline content we must specify a width and height, otherwise Shadowbox will just fill the
Note: make sure you use the correct <div> id when typing your link for shadowbox, otherwise you
will receive an error

<div id=”hiddendiv” class=”hidden”>
This is an invisible div that will only be seen when the user clicks the shadowbox link
<a href="#hiddendiv" title="Inline content"

{tab=External Page}External Page
Linking to other website is a useful function, and can be for a variety of reasons, be it for your
online portfolio, or just to display your favourite websites.
<a href="/" title="" rel="shadowbox">External

{tab=This Page}This Page
Perhaps you would like to show the same page your link is displayed on, or perhaps another part
of your website, you can do this too with shadowbox

<a href="/index.php" title="This Page" rel="shadowbox">This Page</a>



Helps source: