File: D:/HostingSpaces/SBogers10/rooymansde.komma-mediadesign.nl/wwwroot/over_ons_pop_up.php
<?php
include("all_kms_con.inc.php");
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Employees | Rooymans Neckwear</title>
<link type="text/css" rel="stylesheet" href="http://fast.fonts.com/cssapi/b5c58856-354e-4abf-9798-a44c526dedec.css"/>
</head>
<body>
<div id="popUpFrame" class="disableSelection">
<div class="fotoFrame">
<ul>
<li class="first">
<div class="tekstPersoon">
<h1>
Patriek Rooymans
</h1>
<h2>
Managing Director<br />Sales Manager
</h2>
<p class="emailadres"><a href="mailto:patriek@rooymans-ties.co.uk">patriek@rooymans-ties.co.uk</a></p>
<p>
Together with his sister Pasquale, Patriek runs Rooymans Neckwear. Patriek is a real go-getter, a hard worker who doesn’t walk away from a challenge. Tons of experience make him a capable manager. Guarding the daily course of events is part of one of his many tasks. His purposeful way of working, makes him loved with many of his customers.
</p>
</div>
<img src="/img/over_ons/patriek.jpg" />
</li>
<li>
<div class="tekstPersoon">
<h1>
Pasquale Rooymans
</h1>
<h2>
Managing Director<br />Art Director
</h2>
<p class="emailadres"><a href="mailto:cal@rooymans-ties.co.uk">cal@rooymans-ties.co.uk</a></p>
<p>
Together with her brother Patriek, Pasquale runs Rooymans Neckwear. Pasquale is an energetic and artistic person, responsible for the creative input. She’s head of the design department and is responsible for the development and creation of new and innovative ideas. She also designs and manages the collections of amongst others MC Escher and the collections of museum shops, for instance the Van Gogh Museum.
</p>
</div>
<img src="/img/over_ons/pasquale.jpg" />
</li>
<li>
<div class="tekstPersoon">
<h1>
Joep Rooymans
</h1>
<h2>
Senior Sales Advisor
</h2>
<p class="emailadres"><a href="mailto:sales@rooymans-ties.co.uk">sales@rooymans-ties.co.uk</a></p>
<p>
Joep is the founding father of Rooymans Neckwear. Currently he takes care of some sales tasks. Furthermore he is a very valued adviser.
</p>
</div>
<img src="/img/over_ons/joep.jpg" />
</li>
<li>
<div class="tekstPersoon">
<h1>
Nathalie Humbert
</h1>
<h2>
Account Manager (Sales)
</h2>
<p class="emailadres"><a href="mailto:nathalie@rooymans-ties.co.uk">nathalie@rooymans-ties.co.uk</a></p>
<p>
Nathalie is responsible for the sales of custom made ties and scarves. She maintains the contacts with customers of Rooymans Neckwear. Furthermore she develops and coordinates goal-oriented marketing actions. Thus she plays a very important role in making known and positioning of the organisation.
</p>
</div>
<img src="/img/over_ons/nathalie.jpg" />
</li>
<li>
<div class="tekstPersoon">
<h1>
Kim van de Moosdijk
</h1>
<h2>
Webmaster<br />Designer
</h2>
<p class="emailadres"><a href="mailto:kim@rooymans-ties.co.uk">kim@rooymans-ties.co.uk</a></p>
<p>
Kim takes care of the websites of Rooymans Neckwear. She sees to it that everything functions, is up-to-date and she supervises the back office of the online communication. She is also one of the designers of the custom made ties and scarves. This way she often surprises our customers with her contemporary designs. Kim is a key figure within the company and with her many loyal years of service a true tie connoisseur and jack-of-all-trades.
</p>
</div>
<img src="/img/over_ons/kim.jpg" />
</li>
<li>
<div class="tekstPersoon">
<h1>
Maartje Sak
</h1>
<h2>
Designer
</h2>
<p class="emailadres"><a href="mailto:maartje@rooymans-ties.co.uk">maartje@rooymans-ties.co.uk</a></p>
<p>
More than anybody else Maartje can translate a logo into a tie design. She often surprises with her beautiful and well-considered designs. As a designer Maartje is a creative person of mettle.
</p>
</div>
<img src="/img/over_ons/maartje.jpg" />
</li>
<li>
<div class="tekstPersoon">
<h1>
Ella Schellekens
</h1>
<h2>
Sales Assistant<br />Office Support
</h2>
<p class="emailadres"><a href="mailto:ella@rooymans-ties.co.uk">ella@rooymans-ties.co.uk</a></p>
<p>
Ella is the multi-tasker of the company. She is responsible for all incoming orders of the available collection and the webshop We Love Ties. She takes care of the administrative completion of orders and keeps up with the planning and the status of all current affairs.
</p>
</div>
<img src="/img/over_ons/ella.jpg" />
</li>
<li>
<div class="tekstPersoon">
<h1>
Mirjam van Hunsel
</h1>
<h2>
Administration
</h2>
<p class="emailadres"><a href="mailto:mirjam@rooymans-ties.co.uk">mirjam@rooymans-ties.co.uk</a></p>
<p>
Mirjam takes care of the administrative tasks within the company, from invoicing to managing the accounting department. Mirjam is also responsible for the planning of all air freight and shipping freight of all our ties and scarves, to be delivered. Keeping track of the situation is then also one of her strong points.
</p>
</div>
<img src="/img/over_ons/mirjam.jpg" />
</li>
<li>
<div class="tekstPersoon">
<h1>
Eric Govers
</h1>
<h2>
Warehouse Manager
</h2>
<p class="emailadres"><a href="mailto:eric@rooymans-ties.co.uk">eric@rooymans-ties.co.uk</a></p>
<p>
As stock manager Eric takes care of all incoming and outgoing deliveries. Among other things he sees to it that the available collection is constantly replenished and is responsible for all logistic tasks such as packing and sending orders. Also some quality control is part of Eric’s tasks: nothing escapes his attention!
</p>
</div>
<img src="/img/over_ons/erik.jpg" />
</li>
</ul>
</div>
<div class="headerMenu">
<a id="popUpArrowLeft"><span></span></a>
<div class="content">
<ul>
<li class="notActive gevuld">
<div class="up" style="background-image:url(/img/over_ons/thumb_patriek.jpg);"></div>
<div class="hover" style="background-image:url(/img/over_ons/thumb_patriek.jpg);"></div>
</li>
<li class="notActive gevuld">
<div class="up" style="background-image:url(/img/over_ons/thumb_pasquale.jpg);"></div>
<div class="hover" style="background-image:url(/img/over_ons/thumb_pasquale.jpg);"></div>
</li>
<li class="notActive gevuld">
<div class="up" style="background-image:url(/img/over_ons/thumb_joep.jpg);"></div>
<div class="hover" style="background-image:url(/img/over_ons/thumb_joep.jpg);"></div>
</li>
<li class="notActive gevuld">
<div class="up" style="background-image:url(/img/over_ons/thumb_nathalie.jpg);"></div>
<div class="hover" style="background-image:url(/img/over_ons/thumb_nathalie.jpg);"></div>
</li>
<li class="notActive gevuld">
<div class="up" style="background-image:url(/img/over_ons/thumb_kim.jpg);"></div>
<div class="hover" style="background-image:url(/img/over_ons/thumb_kim.jpg);"></div>
</li>
<li class="notActive gevuld">
<div class="up" style="background-image:url(/img/over_ons/thumb_maartje.jpg);"></div>
<div class="hover" style="background-image:url(/img/over_ons/thumb_maartje.jpg);"></div>
</li>
<li class="notActive gevuld">
<div class="up" style="background-image:url(/img/over_ons/thumb_ella.jpg);"></div>
<div class="hover" style="background-image:url(/img/over_ons/thumb_ella.jpg);"></div>
</li>
<li class="notActive gevuld">
<div class="up" style="background-image:url(/img/over_ons/thumb_mirjam.jpg);"></div>
<div class="hover" style="background-image:url(/img/over_ons/thumb_mirjam.jpg);"></div>
</li>
<li class="notActive gevuld">
<div class="up" style="background-image:url(/img/over_ons/thumb_erik.jpg);"></div>
<div class="hover" style="background-image:url(/img/over_ons/thumb_erik.jpg);"></div>
</li>
</ul>
</div>
<a id="popUpArrowRight"><span></span></a>
<div class="shadow"></div>
</div>
<div class="fotoVerlengde"></div>
</div>
<script type="text/javascript">
$('#popUpFrame .headerMenu .content li').hover(function(){
if($(this).hasClass('notActive')){
$("> .hover", this).stop().animate({"opacity": "1"}, "fast");
$("> .up", this).stop().animate({"opacity": "0"}, "fast");
}
},
function(){
if($(this).hasClass('notActive')){
$("> .up", this).stop().animate({"opacity": "1"}, "fast");
$("> .hover", this).stop().animate({"opacity": "0"}, "fast");
}
});
<?php echo("var activeFoto = ".$_GET['active'].";"); ?>
var totalFotos = $("#popUpFrame .headerMenu li.gevuld").length;
$("#popUpFrame .fotoFrame li").eq(activeFoto).css({'display':'block'});
$("#popUpFrame .label li").eq(activeFoto).css({'display':'block'});
$("#popUpFrame .headerMenu li.gevuld .up").eq(activeFoto).css("opacity","0");
$("#popUpFrame .headerMenu li.gevuld .hover").eq(activeFoto).css("opacity","1");
$("#popUpFrame .headerMenu li.gevuld").eq(activeFoto).toggleClass("active");
$("#popUpFrame .headerMenu li.gevuld").eq(activeFoto).toggleClass("notActive");
if(activeFoto > 5){
var aantalKeer = activeFoto - 6;
var aantalPixels = aantalKeer * -120;
aantalPixels = (aantalPixels - 49) + "px";
$("#popUpFrame .headerMenu ul").stop().animate({"left": aantalPixels}, "medium");
}
$('#popUpFrame .headerMenu li.gevuld').each(function(index) {
$(this).click(function(e){
e.preventDefault;
clickAction(index);
});
});
if($("#popUpArrowLeft").length){
$("#popUpArrowLeft").click(function(e){
e.preventDefault;
newActiveFoto = activeFoto - 1;
if(newActiveFoto < 0){ newActiveFoto = totalFotos - 1;}
clickAction(newActiveFoto);
});
}
if($("#popUpArrowRight").length){
$("#popUpArrowRight").click(function(e){
e.preventDefault;
newActiveFoto = activeFoto + 1;
if(newActiveFoto == totalFotos){ newActiveFoto = 0;}
clickAction(newActiveFoto);
});
}
function clickAction(newActive){
$("#popUpFrame .fotoFrame li").eq(activeFoto).fadeOut('slow');
$("#popUpFrame .label li").eq(activeFoto).fadeOut('slow');
$("#popUpFrame .headerMenu li.gevuld").eq(activeFoto).toggleClass("active");
$("#popUpFrame .headerMenu li.gevuld").eq(activeFoto).toggleClass("notActive");
$("#popUpFrame .headerMenu li.gevuld .up").eq(activeFoto).stop().animate({"opacity": "1"}, "medium");
$("#popUpFrame .headerMenu li.gevuld .hover").eq(activeFoto).stop().animate({"opacity": "0"}, "medium");
galleryPlay = false;
if(newActive > 5){
var aantalKeer = newActive - 6;
var aantalPixels = aantalKeer * -120;
aantalPixels = (aantalPixels - 49) + "px";
$("#popUpFrame .headerMenu ul").stop().animate({"left": aantalPixels}, "medium");
}else{
$("#popUpFrame .headerMenu ul").stop().animate({"left": "70px"}, "medium");
}
$("#popUpFrame .headerMenu li.gevuld").eq(newActive).toggleClass("active");
$("#popUpFrame .headerMenu li.gevuld").eq(newActive).toggleClass("notActive");
$("#popUpFrame .headerMenu li.gevuld .up").eq(newActive).stop().animate({"opacity": "0"}, "medium");
$("#popUpFrame .headerMenu li.gevuld .hover").eq(newActive).stop().animate({"opacity": "1"}, "medium");
$("#popUpFrame .fotoFrame li").eq(newActive).fadeIn('slow');
$("#popUpFrame .label li").eq(newActive).fadeIn('slow');
activeFoto = newActive;
}
</script>
</body>
</html>