Customize the flexslider and add a map

  • Resolved Travelographer

    (@travelographer)


    10 years, 7 months ago

    Hey there!

    First I want thank you for this awesome theme! The design is great; I like the clear structure and all the nice features.

    I’m currently working on a modification of the slider. I want to display a map on the frontpage. The map should be displayed by using one of the buttons in the menu. Otherwise the standard slider should be shown. To implement a map I use the basic google maps plugin. I already solved the problem how to place a map on the frontpage.

    Actually the tricky part is where to place the custom javascript code, that I can use the menu to display the slider or the map.

    I already tried to customize the navwalker.php and to add the attribute ‘onclick’ in the function start_el, but it doesn’t work. Probably my attempt wasn’t that correct …

    Anyone here got some ideas, how and where to add custom javascript in the menu?

    My first attempt

    // If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
 	….
	$atts['onclick'] = 'document.getElementById("nav-map").style.display = "block"';
	….

    Thank you in advance!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Travelographer

    (@travelographer)

    I did some scriptings and I think this will work …

    But anyone got an idea where to place the custom code?

    <script>jQuery.noConflict(); (function ($) {
                                function readyFn() {
    $("a[title='Die-Welt']").click(function()
            {
                if($('div.flexslider').is(':visible')){
                    $('div.nav-map').fadeIn();
                    $('div.flexslider').hide();
                }else{
                    $('div.nav-map').fadeOut();
                    $('div.flexslider').fadeIn();
                }
            })
        }
    $(document).ready(readyFn);
    })
    (jQuery);</script>
    Thread Starter Travelographer

    (@travelographer)

    I placed the custom js code in the header.php. I customized the code a little bit and that’s how it works now:

    <script>jQuery.noConflict(); (function ($) {
                                function readyFn() {
    $("a[title='Die Welt']").click(function()
            {
                if($('div.flexslider').is(':visible')){
                    $('div.flexslider').slideUp("slow");
                    $('div.nav-map').slideDown("slow");
                    bgmp_wrapper( jQuery );
                }else{
               //   $('div.nav-map').slideUp("slow");
	       //   $('div.flexslider').slideDown("slow");
                }
            })
        }
    $(document).ready(readyFn);
    })
    (jQuery);
</script>

    For the google map I used the Basic Google Maps Placemark plug in, but there seems to be a incompatibility between jetpack and this plug in. If I use maps in my postings the share buttons are hidden, but anyway ..

    I added also some code in the extra.php

    echo ( '<div class="nav-map">');
	echo do_shortcode( '[bgmp-map center="italy" categories="places-ive-visited,places-i-want-to-see" zoom="3" type="terrain"]' );
	echo ( '</div>');

    and some in the functions.php

    add_filter( 'bgmp_map-shortcode-called', '__return_true' );

    That’s it!

    The result is visible on https://www.travelography.de

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Customize the flexslider and add a map’ is closed to new replies.