jQuery FancyBox plugin
The FancyBox is one of the plugin that I like the most. It's so easy to use and renders really nicely, especially with images. It's a Mac like zooming tool that you can customize quite well and really looks amazing. Source and © Janis Skarnelis
Thank You for Downloading
I'm glad that you found my work useful. If you did, it might help some other people too. So why not helping me spread the word with a tweet? You could also buy me a coffee to thank me for my code and explanations if you prefer ;).
I hope you'll enjoy your download. Regards. Jeremy.
How to setup
As usual, the first thing to do when you want to use a plugin is to include the required files in the header of your page.
For the FancyBox, those files are first the jQuery library, then the plugin script, and an additional stylesheet:
- /** jQuery Inclusion **/
- /** Plugin Inclusion **/
- /** Additional Style **/
- <link href="Path_to/fancybox.css" rel="stylesheet" type="text/css" />
Very similar to the LightBox, the next step is to declare how and when the FancyBox will be displayed on your page.
So in the same fashion, the following code tells that every link that has a class fancybox will have its content opened in a fancybox.
It can be added in the page header or in a separate js file.
Finally, you just need to create a link whose class will have to be fancybox and whose href attribute will need to contain the path of the element you wish to open within the fancybox:
- <a href="Path_to_target" class="fancybox">Test FancyBox Plugin</a>
Other Useful Resources
WordPress and jQuery are both very famous for their plugins. In the case of jQuery, plugins allow developers to extend the library's capacities in order to create beautiful effects. In WordPress, they allow anyone to benefit from the work of others, as they come under the form of a module that you can easily activate from within the administration interface, and start using right away.
Creating one of those modules is not that difficult, but if you are not familiar with their syntax, it could end up being a headache. There are many jQuery plugins that have been transferred into a WordPress one already, but what can you do when it is not the case? How do you do when you have found the perfect jQuery plugin for your latest site, but it is not yet available as a WordPress plugin?
In this tutorial, we'll see how you can easily create a WordPress plugin from a jQuery one. We'll review what a jQuery, or a WordPress plugin is actually made of, so we'll find the elements they both have in common. From there, we'll show how it leads us to perform some simple operations to allow us to benefit from our jQuery plugins in a WordPress template.
Ever looked for a straightforward way to integrate you instagram pictures on your website? Without a plugin nor an iframe? Well this article featured on the NOE interactive's blog presents how you can do so with PHP.
It's a neat and simple solution that uses the instagram's API to get a particular users' latest pictures, and then display them in a ul list.
It is accessible to most developers as it is a "personalize, copy and paste" kind of solution. Just two steps are required, configuration, and implementation.
In this article featured on NOE interactive, you'll learn how you can install the solution on your website. There's a complete step by step guide as well as a demonstration. If you wish to download the solution, it's also hosted on Github.
Composer is an awesome and powerful tool for dependency management in PHP. It allows you to declare the libraries your project depends on and it will manage (install/update) them, and their respective dependencies for you. To make your own libraries or packages usable by composer users, you need to declare them towards composer. When the package is public, less steps are required. You could host your repository online on GitHub for example, then declare it towards the packagist.org index for example. When the repository is private, it's a bit trickier, and I spent some time figuring it out, so here's a little feedback on my attempts.Read more