Open up a Lightbox Gallery

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

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

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

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

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

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

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

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: