Carousel Background Dependent upon Category

[panattoni]

I have two different categories and am using specific coloured markers for them. If I use the carousel option, is there a way to have the backgrounds match those colours? Right now it is set so odd marker backgrounds are one colour and even are another. Is there a way to make it specific to category instead?

[Dylan]

Hi there,

Thank you so much for getting in touch.

Unfortunately this is not supported by default, however it could be achieved by making some changes to the core code of the plugin.

Are you open to applying code changes from your side? I would be happy to guide you through the process.

I look forward to hearing back from you.

[Perry]

Hi Ryan

Perry here, I’m one of the Lead Developers on this project, pleased to meet you!

Can you please link me to your map page and I’ll outline the code for you, I can provide you with the specific code as well if needs be.

Please let me know?

Kind regards
– Perry

[Perry]

Hi Ryan

Can you please uncheck “Hide the Category column” in Maps -> Settings -> Marker listing,

We will need the category data to establish which category the carousel items are in,

I can add CSS to hide these but I will need the elements to be there in order to carry this out.

Please let me know when that’s done?

Kind regards
– Perry

[Perry]

Hi Ryan

Please install a 3rd party custom JS plugin, such as “Simple Custom CSS & JS” and add the following custom JS:

(function($) {

	$(document).ready(function() {
	
		// Loop through the marker data for each map
		for(var map_id in wpgmaps_localize_marker_data) {
		
			// Get the marker listing
			var carousel = $("#wpgmza_marker_list_" + map_id);
			
			// Loop through each marker data element on this map
			for(var marker_id in wpgmaps_localize_marker_data[map_id]) {
			
				// Get the marker categories
				var categories = wpgmaps_localize_marker_data[map_id][marker_id].category;
				
				// Store the marker categories in the data-categories attribute
				carousel.find("[mid='" + marker_id + "']").attr("data-categories", categories);
			}
			
		}
	});

})(jQuery);

You can then apply CSS to your carousel items based on the data-categories attribute, for instance

[data-categories="1"] {
    background: green !important;
}

[data-categories="2"] {
    background: yellow !important;
    color: black !important;
}

If you need any of that explained, or you need specific CSS code please let me know?

Kind regards
– Perry

• This reply was modified 5 years, 7 months ago by Perry.

[Perry]

Hi Ryan

No that should do it, this worked in my development environment with the exact same code.

Can you please give me temporary access to your dashboard so I can tweak this without further inconveniencing you?

Kind regards
– Perry

[Perry]

Hi Ryan

You’d enclosed the Javascripts in tildes (`) and added CSS to the bottom which would break it,

I’ve removed the tildes and put the CSS in a CSS block using Simple Custom CSS & JS.

I checked the map page and can confirm that is now working.

Is there anything else I can help you with?

Kind regards
– Perry

[Perry]

Hi Ryan

What exactly did you want to change? There should be an option to change the link text, and you can use CSS to change the links appearance.

If you want to alter the existing CSS then yes, that’s where you would go to.

Kind regards
– Perry

[Author]

Posts