How to Insert Iframe Code in Joomla Module

Sometimes when you wanna use Iframe code (HTML) in joomla module. Joomla always removes your code which you just inserted. For example, this code...

<IFRAME src="http://financialtools.stockgroup.com/charts/SGChartDB.asp" 
frameBorder=0 width=200 scrolling=no height=227></IFRAME>

This code should show this:

But in Joomla! if you insert the iframe code directly: (see the picture below)

When you click update button. What happen!! The code's suddenly removed!!! Nothing appear in Editor Space.

Don't worry, That is not a problem. Joomla WYSIWYG Editor always remove some HTML code for security. (For more details read here - Joomla Filtering Options)

So, Is it possible to insert iframe code in Joomla?

Sure, Let's see how to do it!

For inserting iframe code in joomla module, You have to choose new wrapper module instead of custom HTML module.

- Go to Admin Page => Extensions=>Modules Manager=> New and then Choose wrapper

- There are some parameters here:

- If you don't know what to insert there, just look at your iframe code again:

<IFRAME src="http://financialtools.stockgroup.com/charts/SGChartDB.asp" 
frameBorder=0 width=200 scrolling=no height=227></IFRAME>

- Insert the parameters by following your iframe code

Module Class Suffix - Leave it blank (You can read more detail of module class suffix here)

URL - Depend on your iframe code

Scroll Bars - Depend on your iframe code

Width - Depend on your iframe code

Height - Depend on your iframe code

Auto Height - Yes or No is no effect here

Auto Add - Yes

Target Name - Name of The Iframe - (More explanation of iframe name available here)

- After finishing insert the parameters save the module and publish it.

- The iframe module will show on your Joomla site!

Webmaster of Thai Othello Page

Read more...

Using Lightbox to Make Your Website More Interesting

Now a day, many new websites are using lightbox effect for doing gallery or just using on the images with in the content.
If you have no idea about what lightbox is? just click on this sample picture below...

It looks very interesting, Right? Okay, I will tell you how to do it!

Step 1. Firstly, You have to go to this website. And download lightbox.(Zip file)

http://www.huddletogether.com/projects/lightbox2/

Step 2. After you get the lightbox2.04.zip(Zip file) on your computer. Extract it!

Step 3. You will see the folder name lightbox2.04Open it and there is the index.html which has the instruction there. If you understand it clearly, No more reading here! But if you don't, You might follow my next step. :)

Step 4. For understanding how to use it. You might have to prepare 3 sample pictures(or more). And just name them as picture01.jpg, picture02.jpg, picture03.jpg

Step 5. Resize them and name them as picture01-thumbnail.jpg, picture02-thumbnail.jpg, picture03-thumbnail.jpg
Here you get 6 pics: 3 pics in the full resolution and 3 pics are the thumbnail. Put them all in the same folder. (for this example I use the folder name example-pics)
Step 6. Upload the example-pics folder to your website. I assume you upload to this location.

Root/example-pics

The picture shows how to upload the example-pics folder to your website by using filezilla

Step 7.Back to your lightbox2.04 folder , I recommend you to rename the folder name to be lightbox
Step 8.Upload thelightbox folder to your website. I assume you upload to this location.

Root/lightbox

Step 9. Okay, put this code in your template html between your <head>...</head> tag.


<link rel="stylesheet" href="Your Website URL/lightbox/css/lightbox.css" type="text/css"
media="screen" />
<script src="Your Website URL/lightbox/js/prototype.js" type="text/javascript">
</script>
<script src="Your Website URL/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript">
</script>
<script src="Your Website URL/lightbox/js/lightbox.js" type="text/javascript">
</script>

Don't forget to change Your Website URL in the code :)

Step 10. And when you want to use the lightbox just use this code


<a href="Your full resolution picture url" rel="lightbox" title="your title">
<img src="Your thumbnail location url" alt="your title" /></a>

For this example (6 pics which you prepare on Step 4-5) the code should be:


<a href="http://www.yourwebsite.com/example-pics/picture01.jpg" rel="lightbox" title="picture01">
<img src="http://www.yourwebsite.com/example-pics/picture01-thumbnail.jpg" alt="picture01" /></a>

<a href="http://www.yourwebsite.com/example-pics/picture02.jpg" rel="lightbox" title="picture02">
<img src="http://www.yourwebsite.com/example-pics/picture02-thumbnail.jpg" alt="picture02" /></a>

<a href="http://www.yourwebsite.com/example-pics/picture03.jpg" rel="lightbox" title="picture03">
<img src="http://www.yourwebsite.com/example-pics/picture03-thumbnail.jpg" alt="picture03" /></a>

Step 11.Open your page and see the lightbox sample :)

Note:

If you have a set of related images that you would like to group, You should put [groupname] after the code rel="lightbox[groupname]". It will allow you to use arrow key on the keyboard for moving to next or previous image.
You can apply this method with photoshop automate web photo gallery.

Webmaster of Thai Othello Page

Read more...