Different sliders for desktop and mobile

Product

WonderPlugin Slider

Question

Some of our pages function better with different skins depending on whether we are using desktop or mobile.

Is there a way to use different skins for desktop and mobile?

Answer

You can create two WordPress sliders, one for mobile, one for desktop.

After you have created two sliders, you can add the following code to your post or page. Please be sure to change the ID value in the code to that of your own sliders.

<div id="largescreen">
[[wonderplugin_slider id="1"]]
</div>

<div id="smallscreen">
[[wonderplugin_slider id="2"]]
</div>

Then you can add the following CSS code to your WordPress theme style.css file to show the small slider when the screen width is less than 640px:

#largescreen {
  display: block;
}

#smallscreen {
  display: none;
}

@media (max-width: 640px) {
  #largescreen {
    display: none;
  }

  #smallscreen {
    display: block;
  }
}

How to add a poster image for HTML5 video lightbox?

Product:

WonderPlugin Lightbox

Question:

I wonder how can I add a poster image for HTML5 video lightbox?

Answer:

The HTML5 poster image feature is available in WonderPlugin Lightbox version 4.0 and above. If you are using an old version, please upgrade your plugin first.

In the plugin, Lightbox Options menu, there is an option "Video poster image (absolute URL)", you can use the option to specify a poster image for all HTML5 videos.

Or you can use a data tag data-html5videoposter to specify a poster image for the lightbox link, for example:

Video Lightbox

The HTML code is as following:

<a href="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-video0.mp4" class="wplightbox" data-webm="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-video0.webm" data-html5videoposter="https://www.wonderplugin.com/wp-content/uploads/2014/03/gallery.jpg">Video Lightbox</a>

WordPress Live Streaming Audio Player

Product:

WonderPlugin Audio Player

Question:

I came across your site because it says you have a WordPress Live Streaming Audio Player, but when I click on it, it takes me to just your Wonderplugin Audio Player. Are they the same thing? How would I set up the live feed? The video tutorial didn't show it.

Answer:

The plugin Wonder Audio Player is capable of playing live mp3 streaming URL.

You can view the tutorials on the page: WordPress Live Streaming Player

WordPress Audio Player API Event

Product:

WonderPlugin Audio Player

Question:

I want to know how to write javascript to catch the event play and stop.

Answer:

You could use the following JavaScript code:

jQuery("#wonderpluginaudio-1").on("amazingaudioplayer.played", function(event, data) {
  console.log(event);
  console.log(data);
});

jQuery("#wonderpluginaudio-1").on("amazingaudioplayer.ended", function(event, data) {
  console.log(event);
  console.log(data);
});

jQuery("#wonderpluginaudio-1").on("amazingaudioplayer.paused", function(event, data) {
  console.log(event);
  console.log(data);
});

jQuery("#wonderpluginaudio-1").on("amazingaudioplayer.switched", function(event, data) {
  console.log(event);
  console.log(data);
});

Please change the number 1 in the above code to the ID of your player.

DailyMotion WordPress Video Gallery

Product

WordPress Gallery

Question

When searching for a WordPress plugin Embedded Video player that supports Dailymotion, your site always comes up as being DailyMotion compatible. How do I display videos which I have on my DailyMotion profile?

Answer

Our plugin WordPress Gallery supports DailyMotion.

1. In your DailyMotion video page, click the link Export, then copy the Permalink.

2. In WonderPlugin Gallery, step 1, click the button Add DailyMotion, enter the link and add the DailyMotion to the video gallery.

DailyMotion WordPress Gallery

Uncaught TypeError: jQuery(…).wonderpluginslider is not a function

Product:

WonderPlugin Slider

Question:

I added the slider shortcode to a WordPress page, but the slider is not showing up, and I found the following error in the Chrome JavaScript console: Uncaught TypeError: jQuery(...).wonderpluginslider is not a function

WordPress Slider jQuery Error

Answer:

This problem is normally because there are multiple jQuery loaded in your WordPress.

Please view the following tutorial for how to fix the problem: https://www.wonderplugin.com/wordpress-carousel-plugin/multiple-jquery-loaded-in-wordpress/

How to add buy now buttons to WordPress audio player

Product:

WordPress Audio Player

Question:

Can you put a "buy now" button on each song that we can set a URL where people can purchase that song or playlist?

Answer:

Please note, this answer only adds required buy now links to the audio player. The plugin does not include a shopping cart function and it's your own responsibility to integrate the buy now links to your shopping cart.

In the plugin, step 3, Options tab, Advanced Options, add the following text to the Advanced Options box:

data-tracklistitemformat="%ID%. %TITLE% <span style='float:right;'><a href='https://www.wonderplugin.com/demo-checkout/?id=%ID%'>Buy Now</a></span>"

In the above text, the %ID%, %TITLE% are pre-defined macro variables supported by the plugin. They will be dynamically replaced when the player is rendered.

The text <a href='https://www.wonderplugin.com/demo-checkout/?id=%ID%'>Buy Now</a> defines the Buy Now link. The %ID% in the href value will be dynamically replaced by the current audio id. When the player is rendered, the Buy Now link for each audio will be:

https://www.wonderplugin.com/demo-checkout/?id=1
https://www.wonderplugin.com/demo-checkout/?id=2
https://www.wonderplugin.com/demo-checkout/?id=3

In your checkout page (in this tutorial, it's https://www.wonderplugin.com/demo-checkout/), you need to check the value of parameter id, and add the corresponding audio to your shopping cart. Please make sure to change the URL to your own checkout page.

The CSS span style will move the Buy Now link to the right of the play list.

Add space after gallery and left align carousel

Product:

Question:

I am using WonderPlugin Portfolio Grid Gallery Commercial Version 6.0C and WordPress 4.4

I need to add space between your plugin and the text below. I've tried adding it in your skin css and in my style.css and have not been able to figure out how to do it either way. Can you tell me how to make that work?

Similarly, with WonderPlugin Carousel Commercial Version 7.0C, I need to move the vertical carousel to the left.

Answer:

1. In the post/page editor, switch to Text mode, then add the following HTML code after the gallery shortcode:

<p style="margin-top:100px;"></p>

The above code will add 100px gap after the gallery.

2. You could add the following HTML code around the carousel shortcode:

<div style="float:left;">
[[wonderplugin_carousel id="2"]]
</div>
<div style="clear:both;"></div>

Only 5 videos in YouTube playlist gallery

Product:

WonderPlugin Gallery Plugin

Question:

I'm very interested in the YouTube playlist gallery you offer. I have tested it out and I love the functionality but I also noticed there is only 5 videos from each playlist I can scroll through. I was wondering if there is a way to include all the videos from a given playlist?

Answer:

In the "Add YouTube Playlist" dialog, enter a large value, for example, 50, to the field "Maximum results (optional, default is 5)".

If you don't enter any value, it will only get 5 videos from the Youtube playlist.