How to include Magnific Popup for tt_content images

By default using the click on the image to view it in a larger format, TYPO3 opens a new browser window popup. With the usage of templates and mobile structures becomes increasingly imperative to find elegant solutions and especially compatibles with the various devices in the market. Below is a brief guide to modify the type of pop-up used by the website to click to enlarge on image.

MAGNIFIC POPUP JQUERY
1) Download js and css files of Magnific Popup (link)

2) On TSRef (typoscript template) add the following lines of code to add Magnific Popup js:

# Add the CSS and JS files 
 page { 
 includeCSS { 
 fancy = fileadmin/templates/lib/magnific-popup/magnific-popup.css
 } 
 includeJSFooter { 
 fancybox = fileadmin/templates/lib/magnific-popup/jquery.magnific-popup.min.js 
 } 
 } 
page.jsFooterInline.999 = TEXT
page.jsFooterInline.999.value (
 $(document).ready(function() { 
 $('.image-popup-vertical-fit').magnificPopup({ 
 type: 'image', 
 closeOnContentClick: true,
 mainClass: 'mfp-img-mobile', 
 image: { 
 verticalFit: true 
 } 
 }); 
});
 ) 

3) Continue to add, in the same file, the folllowing lines of code to modify imageLinkWrap:

tt_content.image.20.1.imageLinkWrap.JSwindow = 0
 tt_content.image.20.1.imageLinkWrap {
 JSwindow = 0
 directImageLink = 1
 linkParams.ATagParams {
 dataWrap = class="image-popup-vertical-fit" rel="fancybox{field:uid}" title="{file:current:description}"
 }

In case you need to add the click on the image ad default feature it is required to add the following lines of code:

tt_content.image.20.1.imageLinkWrap.enable.field >
tt_content.image.20.1.imageLinkWrap.enable = 1