Use wordpress shortcode in JS

Question

I am putting up a website using WordPress. In the template I use, a part of the html code is made in JS. I want to use a slideshow in that specific part of the website. I have a shortcode for that slideshow. I searched in loads of documentation of the theme, but they're saying that it's impossible without major customizations. I still think there should be a way around it, but I don't know how. So my question is how to use the shortcode in JS.

The shortcode:

[metaslider id=274]

The JS for creating the HTML structure:

Preview.prototype = {
        create : function() {
            // create Preview structure:
            this.$title = $( '<h3></h3>' );
            this.$description = $( '<p></p>' );
            this.$href = $( '<div><a href="#">Visit website</a></div>' );
            this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$href);
            this.$loading = $( '<div class="og-loading"></div>' );
            this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );
            this.$closePreview = $( '<span class="og-close"></span>' );
            this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details );
            this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
            // append preview element to the item
            this.$item.append( this.getEl() );
            // set the transitions for the preview and the item
            if( support ) {
                this.setTransition();
            }
        }

(one of) My futile attempt(s):

this.$fullimage = $( '<div class="og-fullimg">' . <?php echo do_shortcode("[metaslider id=274]"); ?> . '</div>' ).append( this.$loading );

I hope there's a way to solve my problem...

Answer 1

A slideshow is JS script. You may init slideshow without using any shortcode. Read the documentation folowing to your slideshow script.

PS. Metaslider uses Flexslider script

Answer 2

I understood that you just have to put up an unordered list with images and then you call it in JS with the Flexslider and it makes a slideshow of the list. So I tried something like this:

this.$fullimage = $( '<div class="og-fullimg"><ul>' +
            '<li><img src="wp-content/uploads/2015/03/SurveyApp-500x370.png" alt="testImg">I DO NOT UNDERSTAND THIS ****!!!!</li>' +
            '<li><img src="wp-content/uploads/projects/project' + 
                 this.$item.index() + '-slide2.png"></li>' +
            '</ul></div>' ).append( this.$loading );

But that won't work. The images I put in the list just don't show.. In my HTML structure, I get this:

<ul>
    <li>I DO NOT UNDERSTAND THIS ****!!!!</li>
    <li></li>
</ul>

What's up with that?

Answer 3

I made it work to put the images in a list. So in the JS file we were talking about, I did the following:

this.$fullimage = $( '<div class="og-fullimg"><div class="flexslider" id="flexslider"><ul class="slides" id="project' + this.$item.index() + '"></ul></div></div>' ).append( this.$loading );

And in another JS file, I searched for the class of the < ul > and made it generate te list items like this:

$('.og-grid li a').click(function() {
    setTimeout(function() {
        var expander = document.getElementsByClassName('og-expander');
        if (expander.length > 0) {
            var lists = document.getElementsByClassName('slides');
            var list = lists[0];
            var i;
            for (i = 0; i < 5; i++) {
                var img = document.createElement('img');
                img.src = "http://*my-link*/wp-"
                + "content/uploads/projects/" + list.id + "-slide" 
                + (i+1) + ".png";
                img.alt = "slide " + (i+1) + " van " + list.id;
                var listItem = document.createElement('li');
                listItem.appendChild(img);
                list.appendChild(listItem);
            }
        }
    }, 10);
});

That part works and gives me the list of images I want. Now I wanted to add the flexslider. So I followed the steps on this site: http://www.woothemes.com/flexslider/

It does something with the lay-out, so the css works, but the JS of flexslider doesn't. I get the following error: http://i.imgur.com/Cpkhxw7.png

This is my HTML structure now:

<div class="flexslider" id="flexslider">
    <ul class="slides" id="project2">
        <li><img src="http://*my-link*/wp-content/uploads/projects/project2-slide1.png" alt="slide 1 van project2"></li>
        <li><img src="http://*my-link*/wp-content/uploads/projects/project2-slide2.png" alt="slide 2 van project2"></li>
        <li><img src="http://*my-link*/wp-content/uploads/projects/project2-slide3.png" alt="slide 3 van project2"></li>
        <li><img src="http://*my-link*/wp-content/uploads/projects/project2-slide4.png" alt="slide 4 van project2"></li>
        <li><img src="http://*my-link*/wp-content/uploads/projects/project2-slide5.png" alt="slide 5 van project2"></li>
    </ul>
</div>

Answer 4

It Works!

I put the JS of the flexslider in the scripts file where I also put the click function I showed you earlier. Made some changes in it and it worked! So now it looks like this:

/* -- PROJECT SLIDESHOW -- */
$('.og-grid li a').click(function() {
    setTimeout(function() {
        var expander = document.getElementsByClassName('og-expander');
        if (expander.length > 0) {
            var lists = document.getElementsByClassName('slides');
            var list = lists[0];
            var i;
            for (i = 0; i < 5; i++) {
                var img = document.createElement('img');
                img.src = "http://*my-link*/wp-content/uploads/"
                + "projects/" + list.id + "-slide" + (i+1) + ".png";
                img.alt = "slide " + (i+1) + " van " + list.id;
                var listItem = document.createElement('li');
                listItem.appendChild(img);
                list.appendChild(listItem);
            }
            $('.flexslider').flexslider({
                animation: "slide",
                slideDirection: "horizontal",
                slideshow: false,
                slideshowSpeed: 7000,
                animationDuration: 600,
                controlNav: true,
                directionNav: true,
                keyboardNav: false,
                mousewheel: false,
                prevText: "Vorige",
                nextText: "Volgende",
                pausePlay: false,
                pauseText: "Pauze",
                playText: "Afspelen",
                randomize: false,
                animationLoop: true,
                pauseOnHover: false
            });
        }
    }, 10);
});

The lay-out is pretty ugly, but I can fix that with some custom CSS.

I'm so happy!! Thanks to 'tutankhamun' for giving me the idea of working with flexslider! Take that support guys who told me it was impossible without a freelancer :)