<?php /*------------------------------------------------------------------------
# JBusinessDirectory
# author CMSJunkie
# copyright Copyright (C) 20125 cmsjunkie.com. All Rights Reserved.
# @license - http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Websites: http://www.cmsjunkie.com
# Technical Support:  Forum - http://www.cmsjunkie.com/forum/j-businessdirectory/?p=1
-------------------------------------------------------------------------*/

defined( '_JEXEC' ) or die( 'Restricted access' );
?>

<?php if(!empty($review->pictures)){?>
    <div class="slidergallery" id="slidergallery" style="width:auto">
        <div id="pageContainer">
            <div id="slideshow">
                <div id="slidesContainer">
                    <div class="slide-dir">
                        <ul class="gallery gallery-review">
                            <?php
                            $index = 1;
                            $totalItems = count($review->pictures);
                            ?>
                            <?php foreach( $review->pictures as $picture ){ ?>
                                <li>
                                    <a href="<?php echo BD_PICTURES_PATH.$picture->picture_path ?>" title="<?php echo $this->escape($picture->picture_info) ?>">
                                        <img itemprop="image" src="<?php echo BD_PICTURES_PATH.$picture->picture_path ?>" alt="<?php echo $this->escape($picture->picture_info) ?>" />
                                    </a>
                                </li>

                            <?php } ?>
                        </ul>

                    </div>
                </div>
            </div>
        </div>
    </div>
<?php } ?>

<script>
    window.addEventListener('load', function() {
        jQuery('.gallery').magnificPopup({
            delegate: 'a',
            type: 'image',
            tLoading: 'Loading image #%curr%...',
            mainClass: 'mfp-img-mobile',
            gallery: {
                enabled: true,
                navigateByImgClick: true,
                preload: [0,2] // Will preload 0 - before current, and 1 after the current image
            },
            image: {
                tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
                titleSrc: function(item) {
                    return item.el.attr('title');
                }
            }
        });
    });
</script>