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 →

WonderPlugin Audio Player JavaScript API

Last updated on

This post will show you how to use JavaScript to control the WonderPlugin Audio Player.

The following JavaScript will play the audio:

jQuery("#wonderpluginaudio-1").data("object").playAudio();

In the above code, 1 is the id of the audio player. wonderpluginaudio-1 is the id of the created player DIV.

If the id of your player is 2, you need to change the id value accordingly:

jQuery("#wonderpluginaudio-2").data("object").playAudio();

To pause the player:

jQuery("#wonderpluginaudio-1").data("object").pauseAudio();

The function audioRun(index, autoplay) will jump to the specified audio. The index starts from 0. For example, the following function will jump to the second audio and play it:

jQuery("#wonderpluginaudio-1").data("object").audioRun(1, true);

To goto the previous audio:

jQuery("#wonderpluginaudio-1").data("object").audioRun(-2, true);

To goto the next audio:

jQuery("#wonderpluginaudio-1").data("object").audioRun(-1, true);

The following four text links will play, pause, jump to the second audio and jump to the fifth audio in the following player:

<a onclick='jQuery("#wonderpluginaudio-1").data("object").playAudio();'>Click to Play</a>

<a onclick='jQuery("#wonderpluginaudio-1").data("object").pauseAudio();'>Click to Pause</a>

<a onclick='jQuery("#wonderpluginaudio-1").data("object").audioRun(1, true);'>Jump to Second Audio and Play</a>

<a onclick='jQuery("#wonderpluginaudio-1").data("object").audioRun(4, true);'>Jump to Fifth Audio and Play</a>

The demo is as following:

Click to Play
Click to Pause
Jump to Second Audio and Play
Jump to Fifth Audio and Play

Display title at all times for WordPress Carousel Stylish skin

Last updated on

Question:

We are using your Stylish skin on one of our pages and we would like the titles to appear at all times.

Currently the titles of the slides only appear when you hover your mouse upon them.

Is there a code to make this happen?

Answer:
In step 3, Options tab, Skin CSS, find the following code:

#amazingcarousel-CAROUSELID .amazingcarousel-text {
	position:absolute;
	left: 0px;
	bottom: 0px;
	text-align:center;
	width: 100%;
	display: none;
}

And change the code display: none; to display: block;

#amazingcarousel-CAROUSELID .amazingcarousel-text {
	position:absolute;
	left: 0px;
	bottom: 0px;
	text-align:center;
	width: 100%;
	display: block;
}

The demo is as following:

Remove track numbers in audio player playlist

Last updated on

Question:

Is there a way to get rid of the track numbers in the audio player playlist?

Answer:

In step 3, Options tab, click Advanced Options button, enter the following code to the Data Options field:

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

The demo is as following:

Scroll image one by one in responsive WordPress Carousel Slider

Last updated on

Question:

In Responsive wordpress carousel slider , the three image scroll at a time. I want to scroll image one by one. https://www.wonderplugin.com/wordpress-carousel/

Answer:

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

data-scrollmode="item"

The demo is as following:

Callback from WonderPlugin Gallery when a video is changed

Last updated on

Question:

* This question is for WonderPlugin Gallery Plugin.

I’d like to know if there is a way to get a call back from WonderPlugin when a video is changed in the gallery, this is to show related content to that specific video within the playlist.

Answer:

There are two events you can use:

onchange: The event will be be fired on changing the slide.
onvideoend: The event will be be fired when the video playing ends.

To use the events, firstly, you need to define a JavaScript function in your webpage, for example:

<script language="JavaScript">
    function onSlideChange(data) {
        try {
           console.log(data);
        } catch (error)   {}
    }
    function onVideoEnd(data) {
        try {
           console.log(data);
        } catch (error)   {}
    }
</script>

In the above code, data is the data array of current slide object, the definition is [index, Thumbnail address, File address, File address for video ogg file, Fire address for video webm file, Link address, Link target, Title, Description, Media type, Width, Height, Address for video poster image, Address for HD video, Address for HD Ogg file, Address for HD webm file].

Then in the plugin, Step 3, Options tab, Advanced Options, enter:

data-onchange="onSlideChange"
data-onvideoend="onVideoEnd"

Customize the WonderPlugin Slider Text Navigation Skin

Last updated on

Product:

WonderPlugin Slider

Question:

I just purchased the wonder plugin slider. It's great but I just have one question.

I am using the 'wordpress slider with text navigation' option. I was wondering if there was a way of changing that background red colour and the dark grey to my custom colours?

https://www.wonderplugin.com/wordpress-slider/examples/wordpress-slider-with-text-navigation-id33/

I have inspected the code and there doesn't seem to be a class I can associate a colour with.

Would really appreciate your help!

Answer:

In the plugin, step 3, Options tab, Advanced Options, you can enter the following text to the Data Options field:

data-navbordercolor="#dfdfdf"
data-navborderhighlightcolor="#a8162b"
data-navthumbtitlecss="display:block;position:relative;padding:14px;text-align:center;font-size:12px; text-transform:uppercase;color:#231f20;"
data-navthumbtitlehovercss="color:#fff;"
data-navshowfeaturedarrow="false"
data-timercolor="#dfdfdf"

The 1st line data-navbordercolor will change the background color of the thumbnail navigations.
The 2nd line data-navborderhighlightcolor will change the highlight color.
The 3rd line data-navthumbtitlecss can be used to change text size and format.
The 4th line data-navthumbtitlehovercss is to change to the text color of highlighted tabs
The 5th line data-navshowfeaturedarrow is to hide the red arrow.
The 6th line data-timercolor is to change the color of the bottom progress line.

The demo is as following: