Add magnific popup for image

Author: vutuanlong

_includes/footer.html

@@ -95,8 +95,8 @@ <h4>Our Network</h4>
 		<path d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
 	</symbol>
 </svg>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2.5.2/dist/cdn/docsearch.min.css" media="print" onload="this.media='all'">
-<script src="https://cdn.jsdelivr.net/combine/npm/docsearch.js@2.5.2/dist/cdn/docsearch.min.js,npm/[email protected].1,npm/tocbot@4.3.2/dist/tocbot.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/docsearch.js@2.6.3/dist/cdn/docsearch.min.css,npm/[email protected]/dist/magnific-popup.min.css" media="print" onload="this.media='all'">
+<script src="https://cdn.jsdelivr.net/combine/npm/[email protected],npm/[email protected],npm/docsearch.js@2.6.3/dist/cdn/docsearch.min.js,npm/[email protected].6,npm/tocbot@4.12.0/dist/tocbot.min.js"></script>
 <script src="/assets/script.js"></script>
 </body>
 </html>

_sass/content.scss

@@ -105,6 +105,11 @@
 }
 .entry-content img {
 	box-shadow: 0 0 2px rgba(0, 0, 0, .3);
+	cursor: zoom-in;
+	transition: all .2s;
+	&:hover {
+		filter: brightness(.5);
+	}
 }
 .button--copy {
 	opacity: 0;

assets/script.js

@@ -92,6 +92,14 @@ function copyToClipboard() {
 	});
 }
 
+function popupImage() {
+	$( '.entry-content img' ).each( function() {
+		const $img = $( this );
+		$img.attr( 'data-mfp-src', $img.attr( 'src' ) );
+		$img.magnificPopup( { type: 'image' } );
+	} );
+}
+
 docsearch({
 	apiKey: '97cd82eb9fd8fdde822c2a66377779a0',
 	indexName: 'metabox',
@@ -103,3 +111,4 @@ toggleMobileMenu();
 toggleDocsMenu();
 generateTOC();
 copyToClipboard();
+popupImage();