Description
FancyBox for WordPress is a WP plugin that uses jQuery to display images when clicked, without reloading the page. It uses FancyBox by Janis Skarnelis.
Installation
- Decompress fancybox-for-wordpress.zip to your desktop.
- Upload fancybox-for-wordpress folder to the plugins directory in your blog’s FTP, like this:
yourblog.com/wp-content/plugins/fancybox-for-wordpress/ - Activate the plugin.
How to use the plugin
Actually you’re done! Once activated, each time you load your blog, the plugin will your search for direct links to JPG, PNG or GIF images and will apply the effect on them. The FancyBox effect won’t be applied to text link though, only images linking to images.
More info
For a changelog, todo list, and more information, go to the plugin page in WordPress.org.
Images Demo
Here’s simple WordPress gallery, no code has been edited, the FancyBox for WordPress looks the code generated by WordPress and figures the rest out based on the options you set in the plugin’s admin page.
Content Demos
And here there are a few links featuring other FancyBox uses: Iframe content, Inline content and Ajax calls. Below each link you will find the code used to make it happen.
This link displays some Ajax data
<a href="../../../descargas/ajax.txt">This link displays some Ajax data</a>This link opens another page in an Iframe
<a href="http://www.google.com/">This link opens another page in an Iframe</a>This link shows some inline content in a FancyBox window
<a href="#testube">This link shows some inline content in a FancyBox window</a>
<div style="display:none" id="testube">
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/01C4RPEinM4&hl=es&fs=1&color1=0x006699&color2=0x54abd6"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/01C4RPEinM4&hl=es&fs=1&color1=0x006699&color2=0x54abd6"
type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>
</div>