Front - Portfolio Gallery Fancybox View Support

functions.php

if ( ! function_exists( 'front_portfolio_image_gallery' ) ) {
    function front_portfolio_image_gallery( $view = '' ) {
        global $post;

        $portfolio_image_gallery = explode( ',', get_post_meta( $post->ID, '_portfolio_image_gallery', true ) );
        $attachments             = array_filter( $portfolio_image_gallery );

        if ( empty( $attachments ) ) {
            $post_thumbnail_id       = get_post_thumbnail_id( $post->ID );
            array_unshift( $attachments, $post_thumbnail_id );
        }

        $gallery_view            = ! empty( $view ) ? $view : get_post_meta( $post->ID, '_portfolio_image_gallery_view', true );

        $cbp_atts = apply_filters( 'front_portfolio_image_gallery_cbp_atts', array(
            'data-layout'        =>   'grid',
            'data-animation'     =>   'quicksand',
            'data-x-gap'         =>   '32',
            'data-y-gap'         =>   '32',
            'data-media-queries' =>  '[ { "width": 300, "cols": 1 } ]'

        ) );

        switch ( $gallery_view ) {
            case 'grid': 
            case 'masonry':
                $cbp_atts['data-media-queries'] =  '[ { "width": 300, "cols": 2 } ]';
            break;
        }

        if ( ! empty( $attachments ) ) :
            wp_enqueue_script( 'front-hs-fancybox' );
            ?>
            <div class="cbp" <?php echo front_get_attributes( $cbp_atts ); ?>><?php 
                $index = 0;
                foreach ( $attachments as $attachment_id ) :
                    if( $gallery_view == 'masonry' ) {
                        $img_index_arr = array( 4, 1, 4, 4, 4, 2, 3 );
                        $i = $index%7;
                        $img_index = $img_index_arr[ $i ];
                        /**
                         * Image Size: 600x400-crop * 1
                         * Image Size: 400x600-crop * 1
                         * Image Size: 600x435-crop * 1
                         * Image Size: 600x600-crop * 4
                         */
                        $img_sz_name = front_get_image_size( 'portfolio_single_masonry_thumbnail_' . $img_index , 'full' );
                    } else {
                        $img_sz_name = front_get_image_size( 'portfolio_single_' . $gallery_view . '_thumbnail' , 'full' );
                    }

                    $attachment = wp_get_attachment_image( $attachment_id, $img_sz_name, '', array( 'class' => 'rounded' ) );

                    if ( empty( $attachment ) ) {
                        continue;
                    }

                    ?>

                    <div class="cbp-item">
                        <div class="cbp-caption">
                            <a class="js-fancybox" href="javascript:;" data-src="<?php echo wp_get_attachment_url( $attachment_id ); ?>" data-fancybox="fancyboxPortfolioGallery" data-caption="<?php echo wp_get_attachment_caption( $attachment_id ); ?>" data-speed="700" data-is-infinite="true">
                                <?php printf( $attachment ); ?>
                            </a>
                        </div>

                    </div>

                    <?php
                    $index++;
                endforeach; 
                ?>
            </div>
        <?php endif;
    }
}