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
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?
For the previous years I've been trying to point out the areas of my workflow that were taking most of my time to try to optimise them.
One of these areas was database interactions meaning the famous 'SELECT', 'INSERT', 'UPDATE' and 'DELETE' statements. When I was still discovering PHP, I spent far too much time hard coding every single database query. It was time consuming, but also very annoying.
Then, for a project, I discovered Zend, a powerful PHP framework. I loved the way it handled the queries, by having a database class with predefined methods for each interaction. The only problem was that Zend is far too bulky and complicated for simple projects.
After investigating if there were easier ways of achieving the same results, I am presenting here today a list of my favourites mysql functions, with their brief description and how you can use them. I hope that it will save you time in your future developments like it did for me.