Carousel Background Dependent upon Category

New home Forums Pro Add-on General queries Carousel Background Dependent upon Category

This topic contains 9 replies, has 4 voices, and was last updated by  Ferhat 1 year, 4 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #34584

    panattoni
    Member

    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?

    #34600

    Dylan
    Moderator

    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.

    #34632

    Perry
    Moderator

    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

    #34651

    Perry
    Moderator

    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

    #34674

    Perry
    Moderator

    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 1 year, 8 months ago by  Perry.
    #34736

    Perry
    Moderator

    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

    #34744

    Perry
    Moderator

    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

    #34762

    Perry
    Moderator

    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

    #39608

    Ferhat
    Member

    Hi,

    I am experiencing the same problem. Well, to be honest I don’t really understand it if it is the same problem. I have 7 different categories on my wordpresssite and would like to show it all with a different color in the carrousel.

    I can sort it by category and I’ve done this, but I seem to be stuck choosing one of the styles you provided.

    Also ( I hope I can ask this here aswell) when I click on one of the icons on the carousel I would like to have the screen move to the marker on the map and put this in the centre of the screen. Is this possible?

    #39642

    Perry
    Moderator

    Hi Ryan

    I’m very sorry but at the time of writing we don’t support styling based on category on these elements.

    We have this on our development roadmap for version 7.15.00 but at the time of writing there is no built in support.

    I’m sorry I can’t be more forthcoming on this issue right now.

    Kind regards
    – Perry

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.