Passing an object through JSON from PHP to JS, to use in PhotoSwipe.js. Allows different photo widths and heights in PhotoSwipe lightbox. See 'View image gallery' on littlewhitealice.co.uk/our-cottages/fearn-the-alder-house/

PhotoSwipe - Object Passing - WordPress

Passing an object through JSON from PHP to JS, to use in PhotoSwipe.js
Allows different photo widths and heights in PhotoSwipe lightbox
See 'View image gallery' on littlewhitealice.co.uk/our-cottages/fearn-the-alder-house/


---- HTML

    $output .= "<div class='flexslider'>
        <ul class='slides'>";

            $args = array(
                'post_type'                 => 'slideshows',
                'post_status'               => 'publish',
                'posts_per_page'            => -1,
                'orderby'                   =>'menu_order',
                'order'                     =>'ASC',
                'tax_query' => array(
                    array(
                        'taxonomy'  => 'slideshow_categories',
                        'field'     => 'slug',
                        'terms'     => $term_OBJ->slug
                    )
                )
            );

            // The query
            $child_query = new WP_Query($args);

            // The loop
            if( $child_query->have_posts() ) : while ( $child_query->have_posts() ) : $child_query->the_post();

                $image_attributes   = wp_get_attachment_image_src( get_field('slide_photo'), 'slideshow' );
                $image_attributes_large   = wp_get_attachment_image_src( get_field('slide_photo'), 'large' );
                $alt_text           = get_post_meta( get_field('slide_photo'), '_wp_attachment_image_alt', true);

                // add associative arrays to $images_array
                array_push($images_array, 
                    array(
                        "src" => $image_attributes_large[0], 
                        "wid" => $image_attributes_large[1], 
                        "hei" => $image_attributes_large[2]
                    )
                );

            endwhile; endif;

        $output .= "</ul>
    </div>";






    $output .= "<div id='inline1' style='display: none;'>";

                $output .= "<div data-src='";

                    // make JSON string to pass to scripts.js
                    $output .= json_encode($images_array);

                $output .= "
                    '></div>";

    $output .= "</div>";









---- JS

    if( $('.open_fancybox').length > 0 ) {

        $(".open_fancybox").click(function(e) {
            e.preventDefault();

            // convert JSON string to object
            // info from leap-functions.php > function get_slideshow() > #inline1
            var test2_obj = JSON.parse( $( "#inline1 div" ).data('src').trim() );

            // http://stackoverflow.com/questions/6211099/converting-a-json-object-to-an-associative-array
            // Converting a json object to an associative array
            // $.each(test2_obj, function(key, value){
                // console.log(value.src+"--"+value.wid+"--"+value.hei);
            // });


            var arr = [];
            $.each( test2_obj, function(key, value) {

                arr.push({
                       src: value.src,
                       w: value.wid,
                       h: value.hei
                   });
            });


            var pswpElement = document.querySelectorAll('.pswp')[0];


            // define options (if needed)
            var options = {
                // optionName: 'option value'
                // for example:
                index: 0 // start at first slide
            };

            // Initializes and opens PhotoSwipe
            var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, arr, options);
            gallery.init();


        });

    }