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
As a lead developer, I watch the web development market for solid trends (not the hype ones), and see if they could be a tangible addition to our workflow. Like Angular a few years ago, React has gained enough momentum to catch my attention. I decided to try it out in a side project to get a better understanding of how it works. Here are a few things I've noted from our first encounter. This is a beginner's point of view, not a React expert's one, so if you see any mistakes, don't hesitate to let me know, I'll update the article accordingly.Read more
This is the first article of a series in which we'll explain our development process industrialisation. We'll describe how we went from a team of individuals doing things together but artisanally, to a more industrial and qualitative approach. This first topic talks about how we standardized our development environments with Vagrant.Read more
Even on some very famous websites and blogs based on the WordPress platform, such as Smashing Magazine or Webdesigner Depot for example, the comment forms are not checked prior to submission. Which means that if the user hits the submit button without actually filling any information, he is redirected to the famous error: "Error: please fill the required fields (name, email).".
Thanks to jQuery and its plugins, it is possible to change the way those forms are handled, in order to obtain slick effects, and an overall better user experience.
In this tutorial, we'll associate the validation plugin, and the form plugin, to get a contact form that is validated before submission, and submitted via ajax. Why don't you give it a try?