Carousel Background Dependent upon Category

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

Viewing 8 posts - 1 through 8 (of 8 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 5 years, 7 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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.