Tipton Airport Diagram/Map

airport-diagram.php

<?php
/**
 * Template Name: Airport Diagram
 *
 * @package tipton
 */

get_header('diagram');
get_sidebar();
?>

	<?php while ( have_posts() ) : the_post(); ?>
		<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			<div class="diagram-container">
				<div class="entry-content">
					<!-- <div id="mapplic"></div> -->
						<div class="col-8">
							<?php get_template_part('inc/content','diagram')?>
						</div> <!-- .col-8 -->
						
						<div class="col-4">
							<?php get_template_part('inc/content','location')?>
						</div> <!-- .col-4 -->

				</div><!-- .entry-content -->
			</div>		
			<div id="content" class="site-content">
				<div id="content_inner">
					<div id="primary" class="content-area">	
						<main id="main" class="site-main" role="main">
							<div class="entry-content">
								<?php the_content(); ?>
							</div><!-- .entry-content -->
						</main><!-- #main -->
					</div><!-- #primary -->
				</div>
			</div><!-- #content -->
		</article><!-- #post-## -->

	<?php endwhile; // end of the loop. ?>

<div class="clear"></div>

<?php get_footer('diagram'); ?>

content-diagram.php

<div class="map-container" align=center> 
	<map name="map1"> 
		<area class='image-link-1' alt="A Jet Fuel" href="#" shape="rect" coords="591,516,621,543" />
	    <area class='image-link-2' alt="Hangar 85" href="#" shape="rect" coords="796,414,824,441" />
	    <area class='image-link-3' alt="Hangar 84" href="#" shape="rect" coords="724,252,757,290" />
	    <area class='image-link-4' alt="Hangar 80" href="#" shape="rect" coords="687,205,722,234" />
	    <area class='image-link-5' alt="Terminal" href="#" shape="rect" coords="726,130,756,167" />
	    <area class='image-link-6' alt="Hangar 90" href="#" shape="rect" coords="577,66,608,97" />
	    <area class='image-link-7' alt="New Hangars" href="#" shape="rect" coords="442,95,477,129" />
	    <area class='image-link-8' alt="100LL Fuel" href="#" shape="rect" coords="432,160,465,191" />
	    <area class='image-link-9' alt="Transient Parking" href="#" shape="rect" coords="372,203,399,242" />
	</map> 


<div class="panzoom">
    <img id="map" src="<?php the_field('upload_tipton_airport_diagram')?>" alt="map of Tipton airport" border=0 usemap="#map1">
	
	<div class="jet"><i class="fa fa-times-circle" aria-hidden="true"></i><img id="jet" src="<?php the_field('location_thumbnail_image_one')?>" alt="A Jet Fuel"></div>
	<div class="hangar85"><i class="fa fa-times-circle" aria-hidden="true"></i><img id="hangar85" src="<?php the_field('location_image_two')?>" height="1800" alt="hangar85"></div>
	<div class="hangar84"><i class="fa fa-times-circle" aria-hidden="true"></i><img id="hangar84" src="<?php the_field('location_image_three')?>" height="1800" alt="hangar84"></div>
	<div class="hangar80"><i class="fa fa-times-circle" aria-hidden="true"></i><img id="hangar80" src="<?php the_field('location_image_four')?>" alt="hangar80"></div>
	<div class="terminal"><i class="fa fa-times-circle" aria-hidden="true"></i><img id="terminal" src="<?php the_field('location_image_five')?>" alt="terminal"></div>
	<div class="hangar90"><i class="fa fa-times-circle" aria-hidden="true"></i><img id="hangar90" src="<?php the_field('location_image_six')?>" alt="hangar90"></div>
	<div class="newhangars"><i class="fa fa-times-circle" aria-hidden="true"></i><img id="newhangars" src="<?php the_field('location_image_seven')?>" alt="newhangars"></div>
	<div class="llfuel"><i class="fa fa-times-circle" aria-hidden="true"></i><img id="llfuel" src="<?php the_field('location_image_eight')?>" alt="100llfuel"></div>
	<div class="parking"><i class="fa fa-times-circle" aria-hidden="true"></i><img id="parking" src="<?php the_field('location_image_nine')?>" alt="transient parking"></div>

</div>

<div class="zoomin"><img src="<?php echo get_template_directory_uri()?>/images/plus.png" alt=""/></div>
<div class="zoomout"><img src="<?php echo get_template_directory_uri()?>/images/minus.png" alt=""/></div>
<div class="reset"><img src="<?php echo get_template_directory_uri()?>/images/reset.png" alt=""/></div>
</div>

content-location.php

<div class="diagram-sidebar">
<div class="airport-heading"><?php the_field('Location_heading')?></div>
<div id="accordion">
  <h3><img src="<?php echo get_template_directory_uri()?>/images/one.png" alt="">&nbsp;&nbsp;&nbsp;&nbsp;<?php the_field('location_name_one')?></h3>
  <div>
    <a class='image-link-1' href="#jet"><img src="<?php the_field('location_thumbnail_image_one')?>" alt=""></a> <br/><br/>
    <?php the_field('location_descriptions_one')?>
  </div>
  <h3><img src="<?php echo get_template_directory_uri()?>/images/two.png" alt="">&nbsp;&nbsp;&nbsp;&nbsp;<?php the_field('location_name_two')?></h3>
  <div>
    <a class='image-link-2' href="#hangar85"><img src="<?php the_field('location_image_two')?>" alt=""></a><br/><br/>
    <?php the_field('location_descriptions_two')?>
  </div>
  <h3><img src="<?php echo get_template_directory_uri()?>/images/three.png" alt="">&nbsp;&nbsp;&nbsp;&nbsp;<?php the_field('location_name_three')?></h3>
  <div>
    <a class='image-link-3' href="#hangar84"><img src="<?php the_field('location_image_three')?>" alt=""></a><br/><br/>
    <?php the_field('location_descriptions_three')?>
  </div>
  <h3><img src="<?php echo get_template_directory_uri()?>/images/four.png" alt="">&nbsp;&nbsp;&nbsp;&nbsp;<?php the_field('location_name_four')?></h3>
  <div>
   <a class='image-link-4' href="#hangar80"><img src="<?php the_field('location_image_four')?>" alt=""></a><br/><br/>
    <?php the_field('location_descriptions_four')?>
  </div>
  <h3><img src="<?php echo get_template_directory_uri()?>/images/five.png" alt="">&nbsp;&nbsp;&nbsp;&nbsp;<?php the_field('location_name_five')?></h3>
  <div>
    <a class='image-link-5' href="#terminal"><img src="<?php the_field('location_image_five')?>" alt=""></a><br/><br/>
    <?php the_field('location_descriptions_five')?>
  </div>
  <h3><img src="<?php echo get_template_directory_uri()?>/images/six.png" alt="">&nbsp;&nbsp;&nbsp;&nbsp;<?php the_field('location_name_six')?></h3>
  <div>
  	<a class='image-link-6' href="#hangar90"><img src="<?php the_field('location_image_six')?>" alt=""></a><br/><br/>
    <?php the_field('location_descriptions_six')?>
  </div>
  <h3><img src="<?php echo get_template_directory_uri()?>/images/seven.png" alt="">&nbsp;&nbsp;&nbsp;&nbsp;<?php the_field('location_name_seven')?></h3>
  <div>
    <a class='image-link-7' href="#newhangars"><img src="<?php the_field('location_image_seven')?>" alt=""></a><br/><br/>
    <?php the_field('location_descriptions_seven')?>
  </div>
  <h3><img src="<?php echo get_template_directory_uri()?>/images/eight.png" alt="">&nbsp;&nbsp;&nbsp;&nbsp;<?php the_field('location_name_eight')?></h3>
  <div>
    <a class='image-link-8' href="#llfuel"><img src="<?php the_field('location_image_eight')?>" alt=""></a><br/><br/>
    <?php the_field('location_descriptions_eight')?>
  </div>
  <h3><img src="<?php echo get_template_directory_uri()?>/images/nine.png" alt="">&nbsp;&nbsp;&nbsp;&nbsp;<?php the_field('location_name_nine')?></h3>
  <div>
    <a class='image-link-9' href="#parking"><img src="<?php the_field('location_image_nine')?>" alt=""></a><br/><br/>
    <?php the_field('location_descriptions_nine')?>
  </div>
</div>
</div><!-- diagram-sidebar-->

functions.php

function tipton_scripts() {
  wp_enqueue_script( 'panzoom', get_template_directory_uri() . '/js/panzoom/jquery.panzoom.min.js', array(), '20130115', true );
	wp_enqueue_script( 'mousewheel', get_template_directory_uri() . '/js/panzoom/jquery.mousewheel.js', array(), '20130115', true );
  wp_enqueue_script( 'tipton-js', get_template_directory_uri() . '/js/tipton.js', array('jquery'), '20130115', true );
}
add_action( 'wp_enqueue_scripts', 'tipton_scripts' );

tipton.js

jQuery(document).ready(function($){
$(".panzoom").panzoom({
		$zoomIn: $(".zoomin"),
		$zoomOut: $(".zoomout"),
		$reset: $(".reset"),
		contain: "invert",
		minScale: 1
	});
	
	
	
	$( "#accordion" ).accordion({
      	collapsible: true,
      	active: false,
      	heightStyle: 'content',
      	icons: false
    });
    
    $('.image-link-1').on('click', function(e){
	    e.preventDefault();
	    $('#map, .jet, .hangar85, .hangar84, .hangar80, .terminal, .hangar90, .newhangars, .llfuel, .parking').fadeOut(100);
	    $('.jet').fadeIn(100);
	    
	    $( "#accordion" ).accordion({active:0});
    });
    $('.image-link-2').on('click', function(e){
	    e.preventDefault();
	    $('#map, .jet, .hangar85, .hangar84, .hangar80, .terminal, .hangar90, .newhangars, .llfuel, .parking').fadeOut(100);
	    $('.hangar85').fadeIn(100);
	    $( "#accordion" ).accordion({active:1});
    });
    $('.image-link-3').on('click', function(e){
	    e.preventDefault();
	    $('#map, .jet, .hangar85, .hangar84, .hangar80, .terminal, .hangar90, .newhangars, .llfuel, .parking').fadeOut(100);
	    $('.hangar84').fadeIn(100);
	    $( "#accordion" ).accordion({active:2});
    });
    $('.image-link-4').on('click', function(e){
	    e.preventDefault();
	    $('#map, .jet, .hangar85, .hangar84, .hangar80, .terminal, .hangar90, .newhangars, .llfuel, .parking').fadeOut(100);
	    $('.hangar80').fadeIn(100);
	    $( "#accordion" ).accordion({active:3});
    });
    $('.image-link-5').on('click', function(e){
	    e.preventDefault();
	    $('#map, .jet, .hangar85, .hangar84, .hangar80, .terminal, .hangar90, .newhangars, .llfuel, .parking').fadeOut(100);
	    $('.terminal').fadeIn(100);
	    $( "#accordion" ).accordion({active:4});
    });
    $('.image-link-6').on('click', function(e){
	    e.preventDefault();
	    $('#map, .jet, .hangar85, .hangar84, .hangar80, .terminal, .hangar90, .newhangars, .llfuel, .parking').fadeOut(100);
	    $('.hangar90').fadeIn(100);
	    $( "#accordion" ).accordion({active:5});
    });
    $('.image-link-7').on('click', function(e){
	    e.preventDefault();
	    $('#map, .jet, .hangar85, .hangar84, .hangar80, .terminal, .hangar90, .newhangars, .llfuel, .parking').fadeOut(100);
	    $('.newhangars').fadeIn(100);
	    $( "#accordion" ).accordion({active:6});
    });
    $('.image-link-8').on('click', function(e){
	    e.preventDefault();
	    $('#map, .jet, .hangar85, .hangar84, .hangar80, .terminal, .hangar90, .newhangars, .llfuel, .parking').fadeOut(100);
	    $('.llfuel').fadeIn(100);
	    $( "#accordion" ).accordion({active:7});
    });
    $('.image-link-9').on('click', function(e){
	    e.preventDefault();
	    $('#map, .jet, .hangar85, .hangar84, .hangar80, .terminal, .hangar90, .newhangars, .llfuel, .parking').fadeOut(100);
	    $('.parking').fadeIn(100);
	    $( "#accordion" ).accordion({active:8});
    });
	
	// if esc key is pressed
	var KEYCODE_ESC = 27;
    $(document).keyup(function(e) {
	    e.preventDefault();
		if (e.keyCode == KEYCODE_ESC) 
			$('#map').fadeIn(100);
			$('.jet, .hangar85, .hangar84, .hangar80, .terminal, .hangar90, .newhangars, .llfuel, .parking').fadeOut(100);
			$( "#accordion" ).accordion({
				active:false
			});
	});
	
	// if close button is clicked
	$('.fa-times-circle').on('click', function(e){
	    e.preventDefault();	
	    $('#map').fadeIn(100);
			$('.jet, .hangar85, .hangar84, .hangar80, .terminal, .hangar90, .newhangars, .llfuel, .parking').fadeOut(100);
			$( "#accordion" ).accordion({
				active:false
			});
	});
});

Context: WordPress
Plugin: Advanced Custom Fields

Required JS:
jQuery Panzoom

Live site:
https://tiptonairport.org/airport-diagram/