Using image pop ups is another way of making our site interesting, and is very common these days. You can see this effect in almost every site. So our site is not going to be lighter on effects than others; we are going to incorporate image pop ups, and in an easy way as you will see.
First we are going to download the module from http://extensions.joomla.org/extensions/multimedia/multimedia-display/4577.
You can also search the JED for "Ninja ShadowBox". Once we have
downloaded the file, we can install it, as always, by navigating to Extensions | Install/Uninstall. In the field where it
says Package File you will click on Select file. In my installation, the file is
called mod_ninja_shadowbox-2.0.9.zip
. Select the file and
click on Upload File and Install. Although the
version number can change, the installation process will remain the same.
When the installation process finishes, we can find this extension under Extensions | Module Manager. At first, we may assume that this extension, as it behaves more like a plugin, would be found in the Plugin Manager, but no, this extension can be found in the modules section.
In this section, we will find a module called Ninja ShadowBox. Click on it to open its admin section (shown in the following screenshot):
We could leave these parameters at their default values, and the module would work correctly. However, let's take a look at them:
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />
So our browser will try to emulate IE 7's way of rendering pages.
Let's continue and see what we need to do in our articles to get this module to work. You may be thinking "But Jose, there's an Advanced Parameters tab!"—I know my friends, it's just that I want to show you many other things and don't have the space for all of it!
Anyway, the advance options are to be left at the default values. You need to enable them by selecting True in Use Advanced Mode. Later, when we finish this topic, I recommend you come back here and try all of these options. We don't need them now, but they can be interesting if you wish to give them a try.
Now save the module and go to Content | Article Manager.
Remember that in order for the module to work, we have to enable it. The position doesn't really matter as the module is not going to show anything in the module position.
Any article would be good for us. However, I'm going to use the one we created previously—you can use any other one though. After opening the article, add the following text to the end of it:
Click to open the image
Then click on the Insert/edit link button. A form similar to the following screenshot will open:
In the Link URL field we will enter the following path:
images/stories/image_1.png
This will create the link to the image, as we can see in the following screenshot.
However, when we click on this link we will be directed to another page, where we will be able to see the image. This is not the expected result, and that's because we still need to perform some tasks.
Well, in fact, we only need to modify the link code generated by the editor. So go back to the article editor, and click on the HTML button, as shown in the following screenshot:
This will open the source code editor, but don't worry, the changes needed are very easy to achieve. First, we need to find the link code. As of now, it will look more or less similar to the following:
<p><a href="images/stories/image_1.png">Click to open the image</a> </p>
The tiny change required in this code is as follows:
<p><a href="images/stories/image_1.png" rel="shadowbox">Click to open the image</a></p>
That's it, we have only added rel="shadowbox
".
Now apply the changes or save the article, go to the frontend, refresh the page, and click on the link again. If all has gone OK—and it should have—the image will pop up over the article. It should look similar to the following screenshot:
Remember that we can change the CSS skin and thus change the way the pop up will look. In order to do so, we only need to go back to the module admin skin, and select a different one.
Looks nice doesn't it? But we are not limiting the possibilities to only pop-up images. For example, take a look at the following code:
<p><a href="images/stories/image_1.png" rel="shadowbox[gallery]">Click to open the image</a></p>
Using this code, in more than one image, we can create an image gallery with arrows to browse the images both forwards and backwards. However, try writing the following code:
<p><a href="http://www.google.com" rel="shadowbox">Click to open google</a></p>
A pop up with the Google website inside will appear. As you can see, the possibilities are almost endless.
Of course, Ninja Shadowbox is not the only module that can help us with image pop ups. If we search the JED, we will find many other modules that can suit our needs. Take a look at the following modules:
3.129.217.5