Fancybox 2.1.5 - codexilab/osclass-benderbs GitHub Wiki

osc_enqueue_style('fancybox', '//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css');

osc_add_hook('footer', function() { ?>
	<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
	<script>
	$(document).ready(function(){
		$(".fancybox").fancybox({
			openEffect: "none",
			closeEffect: "none"
		});

		$(".zoom").hover(function(){

		$(this).addClass('transition');
		}, function(){
			$(this).removeClass('transition');
		});
	});
	</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(); ?>" class="fancybox" rel="ligthbox">
					<img src="<?php echo osc_resource_url(); ?>" class="zoom 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()) ?>