How to active media gallery in custom media uploader WordPress

Question

I make custom media up loader and its working perfectly on a meta field. In my media up loader there is no gallery option. But now I want to give an option for gallery on it. I search a lot and follow their steps but not succeed.

Here is my Code that working perfectly without gallery option:

var meta_image_frame_gallery;

    // Runs when the image button is clicked.
    jQuery('#additional_image_1').click(function(e){

        // Prevents the default action from occuring.
        e.preventDefault();

        // If the frame already exists, re-open it.
        if ( meta_image_frame_gallery ) {
            meta_image_frame_gallery.open();
            return;
        }

        // Sets up the media library frame
        meta_image_frame_gallery = wp.media.frames.meta_image_frame_gallery = wp.media({
            title: 'Upload Image',
            button: { text:  'Upload Image' },
            library: { type: 'image' },
        });

         Runs when an image is selected.
        meta_image_frame_gallery.on('select', function(){

            // Grabs the attachment selection and creates a JSON representation of the model.
            var media_attachment = meta_image_frame_gallery.state().get('selection').first().toJSON();

            // Sends the attachment URL to our custom image input field.
            jQuery('#itv_additional_image_1').val(media_attachment.url);
        });


        // Opens the media library frame.
        meta_image_frame_gallery.open();
    });

And here is my code for gallery option:

var meta_image_frame_gallery;

    // Runs when the image button is clicked.
    jQuery('#additional_image_1').click(function(e){

        // Prevents the default action from occuring.
        e.preventDefault();

        // If the frame already exists, re-open it.
        if ( meta_image_frame_gallery ) {
            meta_image_frame_gallery.open();
            return;
        }

        // Sets up the media library frame
        meta_image_frame_gallery = wp.media.frames.meta_image_frame_gallery = wp.media({
            title: 'Upload Image',
            button: { text:  'Upload Image' },
            multiple: true,
            library: { type: 'image' },
        });

        // Runs when an image is selected.
        //meta_image_frame_gallery.on('select', function(){
        //
        //    // Grabs the attachment selection and creates a JSON representation of the model.
        //    var media_attachment = meta_image_frame_gallery.state().get('selection').first().toJSON();
        //
        //    // Sends the attachment URL to our custom image input field.
        //    jQuery('#itv_additional_image_1').val(media_attachment.url);
        //});

        // When an image is selected, run a callback.
        meta_image_frame_gallery.on( 'select', function() {

            var selection = meta_image_frame_gallery.state().get('selection');

            selection.map( function( attachment ) {

                attachment = attachment.toJSON();

                // Do something with attachment.id and/or attachment.url here
                jQuery('#itv_additional_image_1').val(selection.url);
            });
        });

        // Opens the media library frame.
        meta_image_frame_gallery.open();
    });

First I want an option for gallery and second when I create a gallery, its short-code will appear on meta field and then i save it in db.

Please any give any guidance that help me out.

Answer 1

I figure it by more searching and found some links check them. Now gallery option is active in my media up loader.

Here is my Code now: Just add three more params

frame: "post", state: 'gallery-library', multiple: true

in this line meta_image_frame_gallery = wp.media.frames.wp_media_frame = wp.media( {

Complete code:

meta_image_frame_gallery = wp.media.frames.wp_media_frame = wp.media( {
            title: 'My Gallery',
            frame: "post",
            state: 'gallery-library',
            library: {
                type: 'image'
            },
            multiple: true
        } );

And now its working perfectly