YouTube video stays on top of tabs on iPad

Last updated on

Product:

WonderPlugin Tabs Plugin

Question:

I have some tabs in my homepage. When I tried it on an iPad whenever I tried to switch between tabs the content from the previous tab stayed there no matter what I did.

Answer:

I checked your webpage. It's not all contents from previous tabs. It's just the YouTube video iframe always stays on the top.

Currently, your iframe video code is as following:

<iframe width="560" height="315" src="https://www.youtube.com/embed/_mMKNw_Mlxs" frameborder="0" allowfullscreen></iframe>

To fix the problem, please add ?wmode=transparent to the end of the YouTube URL. For example:

<iframe width="560" height="315" src="https://www.youtube.com/embed/_mMKNw_Mlxs?wmode=transparent" frameborder="0" allowfullscreen></iframe>

WordPress Carousel Click Event

Last updated on

Product:

WonderPlugin Carousel

Question:

Is there anyway I can have the callback from every click on carousel item?

I want to trigger something after every click on carousel item.

Please advice.

Answer:

The carousel itself does not have an event.

But you can directly add click event to the items. For example:

jQuery(document).ready(function() {
  jQuery(".amazingcarousel-image img").click(function() {

    console.log("image clicked ");
  });

  jQuery(".amazingcarousel-hover-effect").click(function() {

    console.log("hover effect image clicked");
  });
});

The first code adds click event to the images, the second code adds click event to the hover effect image.

Show artist name in playlist

Last updated on

Product:

WordPress Audio Player

Question:

Is there a way to include the artist name, as well as the track title, in the playlist?

Answer:

In step 3, Options tab, click Advanced Options tab, then enter the following text to the Advanced Options box:

data-tracklistitemformat="%ID%. %ARTIST% - %TITLE% <span style='position:absolute;top:0;right:0;'>%DURATION%</span>"

How to play a Shoutcast streaming in WordPress audio player

Last updated on

Product:

Wonder Audio Player

Question:

I wonder how could I play a Shoutcast audio streaming with Wonder Audio Player? I tried to enter the address of the .pls file to the plugin, but it's not playing.

Answer:

For full instructions of how to create a Shoutcast live streaming player in WordPress, please view the tutorial: How to create a WordPress Shoutcast player.

The .pls file is actually a text file that contains a link or links to the audio streaming. You need to open the .pls file with a text editor, find the streaming URL and directly enter the streaming URL to the plugin.

If the streaming URL has a format like:

http://IP:port

You need to add a suffix ;&type=mp3 and enter the following URL to the plugin:

http://IP:port/;&type=mp3

Then in the plugin, step 1, Add Audio dialog, you can enter the streaming URL to the Mp3 URL box and check the option "This is a live streaming".

You can view the tutorials on the page:

https://www.wonderplugin.com/wordpress-audio-player/examples/wordpress-live-streaming-audio-player-id16/

Link to a specific video in WordPress Video Gallery

Last updated on

Product:

WonderPlugin Gallery

Question:

Great plugin first off! Love it. We are using the media skin and everything works great. We have about 20 videos in the gallery. The question is, we have links to videos from other pages but it doesn’t load that specific video and so the users have to find the video. Is it possible to properly form the link so it loads the video or is this not possible?

Answer:

You can use a URL parameter html5galleryid to specify a slide on page loading.

The parameter starts from 0. For example, the following URL will load the third slide on page loading:

https://www.wonderplugin.com/wordpress-gallery/?html5galleryid=2

Open up a Lightbox Gallery

Last updated on

Product

WonderPlugin Lightbox

Question:

Our client is wanting to link an icon that pops-up a Lightbox gallery. Is this possible with your product WonderPlugin Lightbox?

Let me see if I can explain it in more detail.

The client wants on of the logos to open up a Lightbox and that Lightbox have a Gallery of images from that station. These gallery images or thumbnails would not be displayed on that page, just shown when in the Gallery Lightbox.

Do you know if this is possible with your lighbox plugin?

Answer:

You can do it with WonderPlugin Lightbox. With WonderPlugin Lightbox, you need to enter the HTML code manually.

Here is the demo:

The code is as following:


<a href="https://www.wonderplugin.com/wp-content/uploads/2013/12/Island_1024.jpg" class="wplightbox" data-group="mygallery" data-thumbnail="https://www.wonderplugin.com/wp-content/uploads/2013/12/Island_1024-150x150.jpg"><img src="https://www.wonderplugin.com/wp-content/uploads/2013/12/Island_1024-150x150.jpg"></a>

<a href="https://www.wonderplugin.com/wp-content/uploads/2013/12/Dark_Beach_1024.jpg" class="wplightbox" data-group="mygallery" data-thumbnail="https://www.wonderplugin.com/wp-content/uploads/2013/12/Dark_Beach_1024-150x150.jpg" style="display:none;"></a>

<a href="https://www.wonderplugin.com/wp-content/uploads/2013/12/Desert_1024.jpg" class="wplightbox" data-group="mygallery" data-thumbnail="https://www.wonderplugin.com/wp-content/uploads/2013/12/Desert_1024-150x150.jpg" style="display:none;"></a>

<a href="https://www.wonderplugin.com/wp-content/uploads/2013/12/Evening_1024.jpg" class="wplightbox" data-group="mygallery" data-thumbnail="https://www.wonderplugin.com/wp-content/uploads/2013/12/Evening_1024-150x150.jpg"style="display:none;"></a>

In the above code, the first line adds an image to the web page which links to one image in the Lightbox gallery.

The following three lines, we created three hidden links by using css style display:none. Since these three links are hidden, they won't display on the webpage. They will only work for the popup Lightbox.

For all links, we added class="wplightbox" and adds the same data group value data-group="mygallery".

Add links to previous and next tabs

Last updated on

Product:

WonderPlugin Tabs Plugin

Question:

It would be useful to have shortcode links to use for "next tab" and
"previous tab".  These shortcodes would allow tab content to be added
or moved without the user having to generate new URL links.

Example problem:

Tab 1 content has a link at the bottom of the page for "More" which
opens tab 2.  Likewise at the bottom of tab 2 is a "Previous" link to
tab 1, and "More" link to tab 3, etc.  If the user removes tab 2 from
the set, they currently need to make new links on pages 1 and 3.  A
shortcode could recognize what tab it is on, and automatically adjust
for the adjacent tab's id.

Answer:

You can use the following HTML code to add a previous link and a next link:

<a href="JavaScript:wonderpluginTabsObjects.objects[0].switchPrev();">Goto Prevous</a>

<a href="JavaScript:wonderpluginTabsObjects.objects[0].switchNext();">Goto Next</a>

Since this is regular HTML code, you can also use a button to replace the text, for example:

<a href="JavaScript:wonderpluginTabsObjects.objects[0].switchPrev();"><button class="btn btn-success btn-small" type="button">Goto Previous</button></a>

<a href="JavaScript:wonderpluginTabsObjects.objects[0].switchNext();"><button class="btn btn-success btn-small" type="button">Goto Next</button></a>

You can view the online demo at:

https://www.wonderplugin.com/wordpress-tabs/?tabid=3

Customize Text Effect of WordPress Slider Plugin

Last updated on

Product:

WordPress Slider Plugin Version 3.2 and above

Question:

I’ve downloaded your wonder plugin slider. It’s a really nice tool and the text navigation is exactly what I’ve been looking for to use on a website I’m working on.

When creating images for the slider there are fields to enter the title and description. The title shows up in the navigation text, but what about the description? I’d like to be able to have the image show with the title and description on the right side of slider, while still keeping the tabbed text navigation. Is this possible through CSS, or an available option in the commercial version?

Continue reading →

Highlight the active thumbnail in WordPress Gallery Plugin

Last updated on

Product: WordPress Gallery Plugin

Question

My clients purchased the commercial version of your plugin on my request and would now like to implement some adjustments if that is possible.

We would like to be able to highlight the active thumbnail using a green colour. We are using the "Media page" skin.

With the present settings it is very hard for visitors to see which thumbnail is active in the gallery. Is there CSS code or additional code that needs to be added to the Advanced Options of the plugin so that this can be accomplished? Can you provide the additional code required to make this possible.

Answer

In step 3, Options tab, Advanced Options, enter the following text to the Advanced Options field:

data-thumbimageborder="4"
data-thumbimagebordercolor="#ffffff"
data-thumbunselectedimagebordercolor="#00ff00"

Continue reading →