PluXml permet de rajouter une image d'accroche à chaque article publié.

Si cette image est une miniature choisie avec le gestionnaire de médias, il est simple de la zoomer avec les 2 portions de code suivants à ajouter à votre thème.

Rappelons que les noms des fichiers de vignette se terminent par .tb.XXX ou XXX est le type d'image employé soit png, jpg, jpeg ou gif.

Bien sûr, cette technique n'est pas réservée aux images d'accroche mais s'appliquent à toutes les miniatures insérées dans le contenu des articles ou des pages statiques.

Pensez à donner un titre à vos images d'accroche ou vignettes. Sinon le nom du fichier sera affiché.

Dans le fichier footer.php de votre thème, insérer, juste avant la balise fermante </body> le code Javascript suivant:

<script type="text/javascript">
	(function() {

		'use strict';

		const ZOOMBOX = 'my-zoombox';
		var overlay = null;

		// on ajuste les dimensions de l'image selon le redimensionnement de la fenêtre
		function resize(container) {
			const hw = window.innerHeight;
			const hc = container.offsetHeight;
			container.style.marginTop = (hw < hc) ? '' : ((hw - hc) / 2) + 'px';
		}

		// Creation de la boite globable
		function build_overlay() {
			overlay = document.createElement('DIV');
			overlay.id = ZOOMBOX;
			overlay.innerHTML =
				'<div>' +
					'<img src="https://kazimentou.fr/" alt="Not found" />' +
					'<p class="caption"></p>' +
				'</div>';
			document.body.appendChild(overlay);
			// gestion du zoom arrière (zoom-out)
			const container = overlay.firstChild;
			container.addEventListener('click', function(event) {
				event.preventDefault();
				this.classList.remove('no-transition');
				this.classList.remove('active');
			});
			container.addEventListener('transitionend', function(event) {
				event.preventDefault();
				if(! this.classList.contains('active')) {
					document.getElementById(ZOOMBOX).classList.remove('active');
				} else {
					resize(this);
					this.classList.add('no-transition');
				}
			});

			window.addEventListener('resize', function(event) {
				const overlay = document.getElementById(ZOOMBOX);
				if(overlay != null) {
					resize(overlay.firstChild);
				}
			});
		}

		function zoomIn(event) {

			if(event.target.tagName == 'IMG' && event.target.src.trim().length > 0) {
				var overlay = document.getElementById(ZOOMBOX);
				if(overlay == null) {
					build_overlay();
				}

				event.preventDefault();
				const node = event.target;

				const img = overlay.querySelector('img');
				img.src = node.src.replace(/\.tb(\.(?:jpg|jpeg|png|gif))$/, '$1');

				const caption = overlay.querySelector('#' + ZOOMBOX + ' .caption');
				var innerHTML = node.src.replace(/.*\/([\w\s-]+)(?:\.tb)?\.(?:png|gif|jpg|jpeg)$/, '$1').replace(/_/g, ' ');
				if(node.title != null) {
					const title = node.title.trim();
					if(title.lenght > 0) {
						innerHTML = title;
					}
				}
				caption.innerHTML = innerHTML;

				overlay.classList.add('active');
				const container = overlay.firstChild;
				container.classList.add('active');
			}
		}

		build_overlay();

		// Click sur les miniatures
		const PATTERN = 'img[src$=".tb.jpg"], img[src$=".tb.jpeg"], img[src$=".tb.png"], img[src$=".tb.gif"]';
		document.body.querySelectorAll(PATTERN).forEach(function(item) {
			item.addEventListener('click', zoomIn);
			item.classList.add('zoom-in')

		});
	}());
</script>

Et pour finir rajouter les quelques règles CSS suivantes à la fin du fichier css/theme.css de votre thème :

/* ****** my ZoomBox ****** */
img.zoom-in {
	cursor: zoom-in;
}
#my-zoombox {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(16,16,16,0.9);
	/* background-color: #000c; */
	text-align: center;
	z-index: -1;
}
#my-zoombox * {
	margin: 0;
}
#my-zoombox.active {
	z-index: 999;
}
#my-zoombox > div {
	display: inline-block;
	max-width: 100vw;
	padding: 0.3rem;
	background-color: #eee;
	transform: scale(0.15);
	opacity: 0.2;
	transition-duration: 2s;
	transition-timing-function: ease;
}
#my-zoombox div:not(.no-transition) {
	transition-property: all;
}
#my-zoombox > div.active {
	transform: scale(1.0);
	opacity: 1.0;
}
#my-zoombox img {
	max-height: calc(100vh - 4rem);
	cursor: zoom-out;
}

Testé avec le thème par défaut de PluXml 5.6 sous Ubuntu 16.10 tournant sur serveur Apache ou NGinx.