Подключить скрипт к файлам

Мне нужно подключить вот этот скрипт увеличения фото к моим файлам сами файлы прикрепил помогите кто может ? 

Zoom-галерея 

это JS 

$(document).ready(function() { 

$('.zoom-gallery').magnificPopup({ 

delegate: 'a', 

type: 'image', 

closeOnContentClick: false, 

closeBtnInside: false, 

mainClass: 'mfp-with-zoom mfp-img-mobile', 

image: { 

verticalFit: true, 

titleSrc: function(item) { 

return item.el.attr('title') + ' · image source'; 

} 

}, 

gallery: { 

enabled: true 

}, 

zoom: { 

enabled: true, 

duration: 300, // don't foget to change the duration also in CSS 

opener: function(element) { 

return element.find('img'); 

} 

} 

}); 

}); 

это HTML 

farm4.staticflickr.com/37..." data-source="500px.co m/photo/32736307" title="В синий" style="width:193px;height:125px;"> 

farm4.staticflickr.com/37..." width="193" height="125"> 

farm3.staticflickr.com/28..." data-source="500px.co m/photo/32554131" title="Light Sabre" style="width:82px;height:125px;"> 

farm3.staticflickr.com/28..." width="82px" height="125"> 

это CSS 

.image-source-link { 

color: #98C3D1; 

} 

.mfp-with-zoom .mfp-container, 

.mfp-with-zoom.mfp-bg { 

opacity: 0; 

-webkit-backface-visibility: hidden; 

/* ideally, transition speed should match zoom duration */ 

-webkit-transition: all 0.3s ease-out; 

-moz-transition: all 0.3s ease-out; 

-o-transition: all 0.3s ease-out; 

transition: all 0.3s ease-out; 

} 

.mfp-with-zoom.mfp-ready .mfp-container { 

opacity: 1; 

} 

.mfp-with-zoom.mfp-ready.mfp-bg { 

opacity: 0.8; 

} 

.mfp-with-zoom.mfp-removing .mfp-container, 

.mfp-with-zoom.mfp-removing.mfp-bg { 

opacity: 0; 

}