Why is the product photo not opening in the popup window?

Question

opencart

1. The controller has checked, the functions are enabled.
The main image changes, everything is OK, when I click on it, instead of opening it in a popup, it opens by a link.
Tell me what did you do wrong?

<div class="col-md-12 col-lg-12">	
  <?php if ($thumb || $images) { ?>
          <ul class="col-md-12 col-lg-12 thumbnails">
      <?php if ($thumb) { ?>

      <a class="thumbnail item" art1="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" >
      <img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" />
      </a>

            <?php } ?>
      <?php if ($images) { ?>
        <div id="owl-product" class="owl-carousel owl-theme">
          <?php foreach ($images as $image) { ?>	
          <div class="image-slider item">
          <img style="cursor:pointer" art1="<?php echo $image['popup']; ?>" src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" />
          </div>
          <?php } ?>
        </div>
      <?php } ?>
          </ul>
          <?php } ?>
    </div>

<script type="text/javascript">
$(document).ready(function() {
  $('.thumbnails a').magnificPopup((
  
    items: [
    <?php if ($images) { ?>
    <?php if ($thumb)  { ?> {src: '<?php echo $popup; ?>'},<?php } ?>
    <?php foreach ($images as $image) { ?> {src: '<?php echo $image['popup']; ?>'},<?php } ?>
<?php } else { ?>
  <?php if ($thumb) { ?> {src: '<?php echo $popup; ?>'} <?php } ?>
<?php } ?>
],

type: 'image',
gallery: {
  enable:true
}

})
});
</script>
<script type="text/javascript">
  $(function() {
    $(".image-slider").click(function(){
      imagesrc = $(this).children("img").attr("art1")
      $("a.item").children("img").attr("src", imagesrc)
      $("a.item").attr("href", imagesrc)
      $("a.item").data('magnificPopup').index=$(this).index()-1;
    })
  });
      
</script>

Answer 1

Maybe someone will need it. Rewrote the script

<script type="text/javascript">
$(document).ready(function() {
  $('.thumbnails a').magnificPopup((
  
    items: [
    <?php if ($images) { ?>
    <?php if ($thumb)  { ?> {src: '<?php echo $popup; ?>'},<?php } ?>
    <?php foreach ($images as $image) { ?> {src: '<?php echo $image['popup']; ?>'},<?php } ?>
<?php } else { ?>
  <?php if ($thumb) { ?> {src: '<?php echo $popup; ?>'} <?php } ?>
<?php } ?>
],

type: 'image',
gallery: {
  enable:true
}

})
});
</script>

On this one

<script>
$(document).ready(function() {
    $('.image').magnificPopup({
        type:'image',
        delegate: 'a',
        gallery: {
            enabled:true
        }
    });
});
</script>