Extra Info spot on Featured Product Talon Pro

I would like to add a fifth info spot on the featured product widget - any way I can do this? I am actually using 5 different images and assigning each one an info spot.

There is a link to the holding site but it’s all over the place right now. The yoga poses about half way down.

Hi,

So you basically want to use the featured product images only once with a single image?
Should be possible with some custom javascript.

Yes. Pretty much. It works for 4 because I just use a different slot for each image, but I don’t know about how to go about adding a fifth. Help would be greatly appreciated as ever.

Add and edit this code in this plugin please:


jQuery(function($) {
 
 	//Edit here
	var yourTitle = 'YOUR TITLE';
	var yourText = 'YOUR TEXT';

 	//Edit: top:27%;left:25%
	var newIcon = '<div class="fpa-feature" style="top:27%;left:25%"><span data-symbol="fpa-symbol-five" class="fpa-symbol"><i class="icon-lightbulb"></i></span><div class="fpa-text" data-feature="feature-five" style="left: 0px;"><h4>' + yourTitle + '</h4>' + yourText + '</div></div>';

	//Nothing to edit below
	$( '.fpa-inner' ).append(newIcon);

	$('.fpa-symbol[data-symbol="fpa-symbol-five"]').on('click', function() {
		$(this).find('i').toggleClass('fa-info-circle fa-times-circle');
		$('.fpa-text[data-feature="feature-five"]').fadeToggle(300);
	});   
});

Thanks for the response. I couldn’t get back to you before. That led to a really interesting result - not quite what I wanted (although maybe useful in the future) -I see how you added a fifth info spot but what I want is to be able to add a fifth featured image with an info spot all to itself (which will be the fifth info spot). Take a look. I do appreciate all the support.

Yeah, I don’t think I understand. So you have the widget four times, each with its image. What’s stopping you from adding the widget one more time?

You know that each widget has up to 4 info spots?

Well I want each image to have one independent info spot only and the only way seems to be to use image one - info spot 1, image two - info spot 2 etc… If I use info spot one on image 2 then the info for image one pops up when I click it.

So if I add a fifth image I need a fifth info spot, it cannot share the other four.

Does that make sense? Your js gives me a fifth info spot on all the images.

I have added in the fifth image so you can see what I mean. The fifth info spot basically needs to be disabled for the other images.

Yes, makes sense now.
Remove the code I gave you and add this instead please:


jQuery(function($) {
 
 	//Edit here
	var yourTitle = 'YOUR TITLE';
	var yourText = 'YOUR TEXT';

 	//Edit: top:27%;left:25%
	var newIcon = '<div class="fpa-feature" style="top:27%;left:25%"><span data-symbol="fpa-symbol-five" class="fpa-symbol"><i class="icon-lightbulb"></i></span><div class="fpa-text" data-feature="feature-five" style="left: 0px;"><h4>' + yourTitle + '</h4>' + yourText + '</div></div>';

	//Nothing to edit below
	$( '#panel-80-2-4-0 .fpa-inner' ).append(newIcon);

	$('#panel-80-2-4-0 .fpa-symbol[data-symbol="fpa-symbol-five"]').on('click', function() {
		$(this).find('i').toggleClass('fa-info-circle fa-times-circle');
		$('.fpa-text[data-feature="feature-five"]').fadeToggle(300);
	});   
});

It will only apply for the fifth widget.

Perfect!!!