Magnific Popup 1.1.0 - codexilab/osclass-benderbs GitHub Wiki

osc_enqueue_style('magnific-popup', 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css');

osc_add_hook('footer', function() { ?>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
	<script>
	(function() {
		$('.img-link').magnificPopup({

		gallery: {
		enabled: true
		},
		removalDelay: 300, // Delay in milliseconds before popup is removed
		mainClass: 'mfp-with-zoom', // this class is for CSS animation below
		type:'image'
		});
	}());
	</script>
<?php });

<?php if (osc_images_enabled_at_items()) : ?>
	
	<?php if (osc_count_item_resources() > 0) : ?>
	<div id="itemCarousel" class="carousel slide mt-3" data-ride="carousel">

		<div class="carousel-inner">
			<?php $num = 0; while (osc_has_item_resources()) : $num++; ?>
			<div class="carousel-item<?php if ($num == 1) echo ' active'; ?>">
				<a href="<?php echo osc_resource_url(); ?>" target="_blank" class="img-link">
					<img src="<?php echo osc_resource_url(); ?>" class="img-fluid" alt="<?php echo osc_resource_name(); ?>">
				</a>
			</div>
			<?php endwhile; ?>
		</div>

		<?php if (osc_count_item_resources() > 1) : ?>
		<a class="carousel-control-prev" href="#itemCarousel" data-slide="prev">
			<span class="carousel-control-prev-icon"></span>
		</a>

		<a class="carousel-control-next" href="#itemCarousel" data-slide="next">
			<span class="carousel-control-next-icon"></span>
		</a>
		<?php endif; ?>
		
	</div>
	<?php endif; // if (osc_count_item_resources() > 0) ?>

	<?php View::newInstance()->_erase('resources'); ?>
	<?php if (osc_count_item_resources() > 1) : ?>
	<div class="scroll-h-auto mt-2">
		<div class="center">
			<div style="width: max-content">
				<ul class="list-inline">
					<?php $num = 0; while (osc_has_item_resources()) : ?>
					<li class="list-inline-item m-1">
						<a href="" data-target="#itemCarousel" data-slide-to="<?php echo $num++; ?>">
							<img width="75" src="<?php echo osc_resource_thumbnail_url(); ?>" alt="<?php echo osc_item_title(); ?>" class="img-fluid img-thumbnail" title="<?php echo osc_item_title(); ?>" />
						</a>
					</li>
					<?php endwhile; ?>
				</ul>
			</div>
		</div>
	</div>
	<?php endif; // if (osc_count_item_resources() > 1) ?>

<?php endif; // if (osc_images_enabled_at_items()) ?>