<style type="text/css">

    h5 {

        color: #00d6ad;

        font-weight: bold;

    }

    figcaption {

            font-size: 9px;

             opacity: 0.7;

           background-color: rgba(0,0,0,0.7) !important;

    }

    #page_title {

        font-size: 10px;

        opacity: 0.7;

    }

  

    @media (max-width: 768px) {

        figcaption {

            overflow: scroll;

        }

    }



    #footer {

        width: 100% !important;

        padding-top: 50px;

    }

    figcaption:hover, figcaption {

        cursor: zoom-in;

    }



</style>

<div class="container" id="containerContent">

    <div class="content project">

        <div class="row">

            <div class="col-md-12" data-aos="fade-down" data-aos-delay="300">

                <center><h3><?= strtoupper($page_title4) ?></h3><br><br><br></center>



            </div>

        </div>

        <?php  

            $numOfCols = 2;

            $rowCount = 0;

            $bootstrapColWidth = 12 / $numOfCols;

            ?>

            <div class="pack">

            <?php

            foreach ($product as $item){

            ?>  

                <div class="col-md-<?php echo $bootstrapColWidth; ?>">

                    <figure>

                      <div class="imghvr-slide-up">

                        <img src="<?php echo base_url('uploads/product/') . $item->image1; ?>" style="width: 100vw;"/>

                        <figcaption onclick="show(<?= $item->id_products; ?>)"><h5><?= $item->title;?></h5><p><?= $item->description;?></p></figcaption>

                      </div>

                    </figure>

                </div>

            <?php

                $rowCount++;

                if($rowCount % $numOfCols == 0) echo '</div></br><div class="pack">';

            }

        ?>

        </div>

</div>

<script>

  $(window).on('load', function() {

        $("div.pack").pack();

  });

  </script>

  <script type="text/javascript">



  var _gaq = _gaq || [];

  _gaq.push(['_setAccount', 'UA-36251023-1']);

  _gaq.push(['_setDomainName', 'jqueryscript.net']);

  _gaq.push(['_trackPageview']);



  (function() {

    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

  })();



</script>



<div class="gallery" style="display: none;">

    <!-- <a href="" id="gambar2" class="big isEmpty"></a>

    <a href="" id="gambar3" class="isEmpty"></a>

    <a href="" id="gambar4" class="isEmpty"></a>

    <a href="" id="gambar5" class="isEmpty"></a>

    <a href="" id="gambar6" class="isEmpty"></a> -->

</div>



<script>

    function show(id) {

        

        jQuery.ajax({

              'url'       : '<?= base_url(); ?>' + 'Project'+'/slideshow',

              'type'      : 'POST',

              'data'      : {

                'slide' : id,

                '<?= $this->security->get_csrf_token_name(); ?>' : '<?= $this->security->get_csrf_hash(); ?>'

              },

              'success'   : function(result) {

                // var a = null;

                var response = JSON.parse(result);



                    if (response.Error) {

                       swal('', 'No Image Available!', 'error');

                    }

                    else {

                        var data = response.Data;

                        var slideShow = "";



                        if (data.gambar1) { slideShow += '<a href="<?= base_url('uploads/product/') ?>'+data.gambar1+'" id="gambar1" class="big"></a> ' }



                        if (data.gambar2) { slideShow += '<a href="<?= base_url('uploads/product/') ?>'+data.gambar2+'" id="gambar2"></a> ' }



                        if (data.gambar3) { slideShow += '<a href="<?= base_url('uploads/product/') ?>'+data.gambar3+'" id="gambar3"></a> ' }



                        if (data.gambar4) { slideShow += '<a href="<?= base_url('uploads/product/') ?>'+data.gambar4+'" id="gambar4"></a> ' }



                        if (data.gambar5) { slideShow += '<a href="<?= base_url('uploads/product/') ?>'+data.gambar5+'" id="gambar5"></a> ' }



                        if (data.gambar6) { slideShow += '<a href="<?= base_url('uploads/product/') ?>'+data.gambar6+'" id="gambar6"></a> ' }



                        jQuery('.gallery').empty()

                        jQuery('.gallery').append(slideShow)



               

                        var ss = $('.gallery a').simpleLightbox({'showCounter':false,'loop':true});

                        ss.destroy();

                        ss.open();

                    }



                }   

               

            });

    };

</script>