Today we prepared a short but effective article for you. We will create a solution for web developers who faces mostly while using PrettyPhoto and lightbox effects. We will get rid of HTML5 valid problem with a simple but effective jquery code.
Validation is a term created by w3 standarts. It testing suitability of websites to standarts. HTML5 standarts takes PrettyPhoto tags as an error and prevents you to pass w3 standarts. If you want to use this plugin and want your website still compatible with w3 standarts, you should read the rest of this article.
Lets integrate PrettyPhoto plugin as usual into our website. Below it is explained in 3 steps that how to do it. You can download the current version of PrettyPhoto plugin in this link.
Add CSS
Download zip folder and add css file into header section of your design. Below there is an example.
Add JQuery
At 2nd step, we integrate jquery codes into your design. Below is an example how to add it. If there is standart jquery code in your design, only integrate jquery.prettyphoto.js link.
Call Plugin
At last step, we will see main necessary code for us. we are add ingcode we created instead standart prettyPhoto plugin. We use data-rel= instead rel= for prettyPhoto code. This will solve w3 validation problems in your design. Below i am sharing my own prettyPhoto jquery code that i use in my designs. You can get detailed information about prettyPhoto themes on it’s official website.
jQuery(document).ready(function(){
jQuery('a[data-gal]').each(function() {
jQuery(this).attr('rel', jQuery(this).data('gal'));
});
jQuery("a[data-rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'dark_square',slideshow:false,overlay_gallery: false,social_tools:false,deeplinking:false});
});
We will continue to provide detailed information about validation problems. We explained how to make prettyPhoto plugin compatible with HTML5 standarts in this article. We hope this article will be useful for you. Please share this article in your social media profiles for support us and also bookmark this page.
Our last tutorial was about How to Make Responsive Drop Down Menu. We recommend you to read it also and please share this article on your social media profiles and also bookmark us.
1 Comment