Uglipop Lightbox - for developpers

Product documentation

Add a resource to the view using the base code:

/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $this->document->getWebAssetManager();
$wa->useStyle('uglipop-bundle')
->useScript('uglipop-bundle');

In the application view, insert the photo according to the documentation. doc uglipop:

		<!-- Demo Uglipop Lightbox -->
		<img src="/images/stories/com_tournaments/avatars/large/<?php echo $this->item->avatar; ?>" alt="avatar" onclick="uglipop1();" style="cursor:pointer;"/>
		<script type="text/javascript">
			var uglipop1 = function(){
				uglipop({class:'bg-uglipop',source:'html',content:'<img src="/images/stories/com_tournaments/avatars/original/<?php echo $this->item->avatar; ?>?auto=compress&cs=tinysrgb&dpr=1&w=480"></img>'});}
			var rem = function(){
				remove();
			}
		</script>
		<style>
				.bg-uglipop{
						width:480px;
						height:auto;
						-webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.75);
						-moz-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.75);
						box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.75);
						z-index: 10;
				}
				#uglipop_content_fixed {
						z-index: 10;
				}
				#uglipop_overlay {
						opacity: 0.5;
				}
		</style>
		<!-- END Demo -->

The result can be seen here in the player photo:

https://attour4.easy.minion.cz/hraci/4740-jiri-vanecek