<html>
<body>

<link rel="stylesheet" href="css/travel_1.css" type="text/css">
<link rel="stylesheet" href="css/travel_2.css" type="text/css">

<div style="position: relative;">
   <div id='travel_1'></div>
   <div id='travel_2'>
      <div id='bg'></div>
   </div>
   
   <a href="javascript:travel_2.previousEvent()"><div id="prev" class="button">PREV</div></a>
   <a href="javascript:travel_2.nextEvent()"><div id="next" class="button">NEXT</div></a>   
</div>

<script>
   var travel_1 = new Timeline("travel_1", "xml/travel_1.xml" );
   var travel_2 = new Timeline("travel_2", "xml/travel_2.xml" );
   
   //======================================
   function rotateImage( event_title ){
      var event_id = "travel_2" + event_title;
      event_id=event_id.replace(/([^a-z0-9]+)/gi, '');
      
      var event_background_div = document.getElementById( event_id );
      if ( event_background_div ){
         
         /* find for the image child */
         for(var i=0; i<event_background_div.children.length; i++) {
            
            var div = event_background_div.children[i];
            if( div.className=="event_image" ){
                              
               /* rotate event image randomly */
               var degree = "rotate("+ (-3 + Math.random()*6) +"deg)";
               div.style.msTransform = degree;
               div.style.webkitTransform = degree;
               div.style.transform = degree;
               break;
            }
         }         
      }
   }
   
   //======================================
   function replaceAll(str, find, replace) {
      return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
   }
   
   //======================================
   function escapeRegExp(string) {
      return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
   }
   
   //======================================
   
</script>


</body>
</html>

 

 

 

HTML



/* travel_1.css (first timeline) *********************************************************************** */



/* == main timeline div (background) =================================== */

#travel_1 {
   position: absolute;
   left: 7cm;
   top: 0;
   width: 14cm;
   height: 7cm;

   font-family: "Trebuchet MS", "Helvetica","Sans-Serif";

   background: rgba(242, 242, 242, 1);

   border: .02cm solid white;
   border-radius: 0 0 1.3cm 1.3cm;
   
   -moz-box-shadow: .13cm 0 .26cm rgba(0, 0, 0, .25);
   -webkit-box-shadow: .13cm 0 .26cm rgba(0, 0, 0, .25);
   box-shadow: .13cm 0 .26cm rgba(0, 0, 0, .25);
   
   -ms-transform: rotate(90deg);
   -ms-transform-origin: 0% 0%;
   -webkit-transform: rotate(90deg);
   -webkit-transform-origin: 0% 0%;
   transform: rotate(90deg);
   transform-origin: 0% 0%;
   
   /* strange fix for bleeding edges in chrome */
   -webkit-backface-visibility: hidden;
}



/* == ruler =================================== */

#travel_1 #ruler_container {
   display: none;
   top: 0; /* the vertical position of the entire ruler */
   height: 2.5cm; /* used to anchor the ruler's elements to the bottom (flipping the ruler vertically) */
   z-index: 11;
}



/* == timeline indicator =================================== */

#travel_1 #indicator_container {
   display: block;
   top: 0; /* the vertical position of the entire indicator */
   z-index: 0;
}

#travel_1 #indicator_graphic {
   display: block;
   top: .5cm;
   height: 6cm;
   width: .05cm;
   background: rgba(0, 0, 0, .1);
}

#travel_1 #indicator_text { /* the properties of the entire indicator text */
   display: none;
}


/* == timeline bar =================================== */

#travel_1 #bar_container {
   display: none;
}

#travel_1 #bar_past {
   visibility: hidden;
}

#travel_1 #bar_future {
   visibility: hidden;
}

#travel_1 #bar_cap_left {
   visibility: hidden;
}

#travel_1 #bar_cap_right {
   visibility: hidden;
}

#travel_1 #bar_present {
   visibility: hidden;
}


/* == connectors =================================== */

#travel_1 #connectors_container {
   display: block; /* show or hide all connectors */
   top: 3cm; /* used by setting's date_fill_direction and date's fill_direction */
   height: 1cm; /* used by setting's date_fill_direction and date's fill_direction */
   z-index: 14; /* used to place connectors either behind or in front of period events */
}

#travel_1 .event_connector {
   height: .3cm; /* the initial height of connectors */
   opacity: .75;   
   border-width: .02cm;
   border-style: solid;
}



/* == date events =================================== */

#travel_1 #date_events_container {
   visibility: visible;
   top: 3cm; /* used by setting's date_fill_direction and date's fill_direction */
   height: 1cm; /* used by setting's date_fill_direction and date's fill_direction */
   z-index: 15;
}

#travel_1 .event_background {
   width: 2.5cm;
   height: 2.5cm;
   background: rgba(0, 0, 0, 0);
   padding: .26cm .2cm .2cm .2cm;
   
   -moz-box-sizing: border-box; /* padding without affecting width and height */
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   
   /* dotted round corners do not work in Firefox */
   border-radius: 50%;
   border: .07cm dotted rgba(128, 128, 128, .9);
}

#travel_1 .event_title {
   display: block;
   font-size: .5cm;
   color: #444444;
   font-weight: bold;
   text-shadow: 0 .02cm .07cm rgba(0, 0, 0, .25);
   margin: 0 0 .05cm 0;
   text-align: center;
   
   -ms-transform: rotate(-90deg);
   -ms-transform-origin: 60% 100%;
   -webkit-transform: rotate(-90deg);
   -webkit-transform-origin: 60% 100%;
   transform: rotate(-90deg);
   transform-origin: 60% 100%;

}

#travel_1 .event_date {
   display: none;
}
   
#travel_1 .event_notes {
   display: none;
   font-size: .4cm;
   color: #444444;
   margin: 0 0 .3cm 0;
   font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
   
   -ms-transform: rotate(-90deg);
   -ms-transform-origin: 50% 50%;
   -webkit-transform: rotate(-90deg);
   -webkit-transform-origin: 50% 50%;
   transform: rotate(-90deg);
   transform-origin: 50% 50%;
}

#travel_1 .event_image {
   display: none;
}



/* == period events =================================== */

#travel_1 #period_events_container {
   display: block;
   top: 3cm; /* used by setting's period_fill_direction */
   height: 0; /* used by setting's period_fill_direction */
   z-index: 16;
}

#travel_1 .period_background {
   /* left: specified programmatically */
   /* top: specified programmatically */
   /* width: specified programmatically */
   height: 1cm; /* period event height */
   
   /* The background color of period events is specified by their categories, or */
   /* by the color XML attribute of each individual period event. */
   /* background: NA */   
}

#travel_1 .period_title {
   position: relative; /* relative to period_background */
   display: block;
   left: 0;
   top: 0;
   width: 100%;
   height: 1cm;
   line-height: 1cm;
   font-size: .45cm;
   font-weight: bold;
   text-align: center;
   text-overflow: ellipsis;
   overflow: hidden; /* must be hidden to enable text-overflow:ellipsis */
   white-space: nowrap;
   color: rgba(255, 255, 255, 1);
   text-shadow: .05cm 0 .07cm rgba(0, 0, 0, .5);
   font-family: "Arial Black", Gadget, sans-serif;
}



/* == user interface buttons =================================== */

#travel_1 #button_prev {
   display: none;

}

#travel_1 #button_next {
   display: none;
}

#travel_1 #button_zoom_out {
   display: none;

}

#travel_1 #button_zoom_in {
   display: none;

}

#travel_1 #button_goto_year {
   display: none;
}



/* == startup screen =================================== */

#travel_1 #startup_screen {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   background: rgba(255, 255, 255, 1);
   border-radius: 0 0 1.3cm 1.3cm;
}



/* ===================================== */






/* travel_2.css (second timeline) *********************************************************************** */



/* main timeline div (background) =================================== */

#travel_2 {
   position: absolute;
   left: 7.2cm;
   top: 0;
   width: 22cm;
   height: 14cm;

   font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
   
   background: rgba(255, 107, 15, 1);
   border: .02cm solid white;
   border-radius: 0 1.3cm 1.3cm 0;
   
   -moz-box-shadow: 0 .13cm .26cm rgba(0, 0, 0, .25);
   -webkit-box-shadow: 0 .13cm .26cm rgba(0, 0, 0, .25);
   box-shadow: 0 .13cm .26cm rgba(0, 0, 0, .25);
   
   /* z-index higher than that of children to clip round corners */
   z-index: 10000;
}


/* background elements =================================== */

#travel_2 #bg {
   position: absolute;
   z-index: 0;
   left:0%;
   top:0%;
   width: 100%;
   height: 20%;
   background: rgba(0, 0, 0, 1);
   border-radius: 0 1.3cm 0 0;
   
   -moz-box-shadow: 0 .2cm .4cm rgba(0, 0, 0, .5);
   -webkit-box-shadow: 0 .2cm .4cm rgba(0, 0, 0, .5);
   box-shadow: 0 .2cm .4cm rgba(0, 0, 0, .5);
}



/* == ruler =================================== */

#travel_2 #ruler_container {
   display: none;
   top: 0; /* the vertical position of the entire ruler */
   height: 2.5cm; /* used to anchor the ruler's elements to the bottom (flipping the ruler vertically) */
   z-index: 11;
}


/* timeline bar =================================== */

#travel_2 #bar_container {
   display: block;
   top: 8.4cm; /* the vertical position of the entire bar */
   height: 5.6cm; /* the height of the entire bar */
   z-index: 1;
}

#travel_2 #bar_past {
   visibility: visible;
   height: 100%;
   background: rgba(236, 227, 201, 1);
}

#travel_2 #bar_future {
   visibility: hidden;
}

#travel_2 #bar_cap_left {
   visibility: hidden;
}

#travel_2 #bar_cap_right {
   visibility: hidden;
}

#travel_2 #bar_present {
   visibility: hidden;
}




/* period events =================================== */

#travel_2 #period_events_container {
   display: block;
   top: 7cm;
   z-index: 2;
}

#travel_2 .period_background {
   /* left: specified programmatically */
   /* top: specified programmatically */
   /* width: specified programmatically */
   height: 1.5cm; /* period event height */
   
   /* The background color of period events is specified by their categories, or */
   /* by the color XML attribute of each individual period event. */
   /* background: NA */   
}

#travel_2 .period_title {
   display: none;
}



/* date events =================================== */

#travel_2 #date_events_container {
   display: block;
   z-index: 4;
   top: 6.9cm;
   height: .2cm;
   z-index: 3;
}

#travel_2 .event_background {
   width: 22cm;
   height: 14cm;
   padding: .26cm .13cm .13cm .13cm;
}

#travel_2 .event_title {
   display: block;
   position: absolute;
   bottom: 7.5cm;
   left: 11cm;
   width: 9cm;
   font-size: 1.2cm;
   color: rgba(255, 255, 255, .9);
   font-weight: bold;
   text-shadow: 0 .02cm .07cm #aaa;
   margin-top: 0;
   margin-bottom: -.05cm;
   text-shadow: 0 .04cm .08cm rgba(0, 0, 0, .4);
}

#travel_2 .event_date {
   display: none;
   position: absolute;
   font-size: .4cm;
   color: rgba(200, 200, 200, 1);
   font-weight: bold;
   text-align: center;
}
   
#travel_2 .event_notes {
   position: absolute;
   display: block;
   font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
   font-size: .45cm;
   line-height: .7cm;
   top: 8.5cm;
   left: 3.5cm;
   width: 16cm;
   height: 4cm;
   text-shadow: 0 .02cm .07cm rgba(255, 255, 255, .4);
}

#travel_2 .event_image {
   display: block;
   position: absolute;
   bottom: 6.9cm;
   right: 12cm;
   width: 8cm;
   height: auto;
   padding: .15cm .15cm .8cm .15cm;
   background: rgba(255, 255, 255, 1);
   
   -ms-transform: rotate(-2deg);
   -ms-transform-origin: 50% 50%;
   -webkit-transform: rotate(-2deg);
   -webkit-transform-origin: 50% 50%;
   transform: rotate(-2deg);
   transform-origin: 50% 50%;
   
   -moz-box-shadow: 0 .2cm .4cm rgba(0, 0, 0, .3);
   -webkit-box-shadow: 0 .2cm .4cm rgba(0, 0, 0, .3);
   box-shadow: 0 .2cm .4cm rgba(0, 0, 0, .3);
   
}

#travel_2 .event_image:hover {
   -webkit-filter: hue-rotate(180deg) saturate(5);
   filter: hue-rotate(180deg) saturate(5);

   -webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-kthtml-transition: all .3s ease-out;
transition: all .3s ease-out;
}

#travel_2 .first_letter {
   font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
   font-weight: bold;
   vertical-align: 15%;
   font-size: 1.5cm;
   background: rgba(255, 255, 255, .5);
   margin: 0 .1cm 0 0;
   padding: 0 .1cm 0 .1cm;
   text-shadow: 0 .1cm .2cm rgba(0, 0, 0, .3);
}

#travel_2 b {
   font-weight: bold;
   color: rgba(255, 50, 100, 1);
}




/* event containers =================================== */

#travel_2 #connectors_container {
   display: none;
   top: 6.9cm;
   height: .2cm;
   z-index: 100;
}

#travel_2 .event_connector {
   visibility: hidden;
}



/* == timeline indicator =================================== */

#travel_2 #indicator_container {
   display: none;
   top: 0; /* the vertical position of the entire indicator */
   height: 0; /* used to anchor #indicator_text to the bottom, allowing the text to grow upward */
   z-index: 12;
}

#travel_2 #indicator_graphic {
   display: block;
   top: 1cm;
   width: .02cm;
   height: 12cm;
   background: rgba(255, 255, 255, 0.7);
}

#travel_2 #indicator_text { /* the properties of the entire indicator text */
   display: block;
   top: 1cm;
   font-size: .4cm;
   font-weight: bold;
   color: #fff;
   text-shadow: 0 .02cm .07cm rgba(0, 0, 0, .4);
}

#travel_2 #relative_to_present { /* the text between parentheses after actual dates. e.g. (10 years ago) */
   display: block;
   font-size: .37cm;
   opacity: .7;
}

#travel_2 #relative_to_big_bang { /* the distance of the current date from the the Big Bang */
   display: block;
   font-size: .37cm;
   opacity: .7;
}

#travel_2 #relative_to_cosmic_calendar { /* the current date relative to the Cosmic Calendar */
   display: block;
   font-size: .37cm;
   opacity: .7;
}

#travel_2 #astronomical_numbering { /* the text that appears after 0 CE */
   display: block;
   font-size: .4cm;
   color: #ff9;
   opacity: .9;
}


/* user interface buttons =================================== */

#travel_2 #button_prev {
   display: none;
}

#travel_2 #button_next {
   display: none;
}

#travel_2 #button_zoom_out {
   display: none;
}

#travel_2 #button_zoom_in {
   display: none;
}

#travel_2 #button_goto_year {
   display: none;
}


#prev {
   display: block;
   left: 12cm;
   
   -ms-transform: rotate(-5deg);
   -ms-transform-origin: 50% 50%;
   -webkit-transform: rotate(-5deg);
   -webkit-transform-origin: 50% 50%;
   transform: rotate(-5deg);
   transform-origin: 50% 50%;
}

#next {
   display: block;
   left: 23cm;
   
   -ms-transform: rotate(3deg);
   -ms-transform-origin: 50% 50%;
   -webkit-transform: rotate(3deg);
   -webkit-transform-origin: 50% 50%;
   transform: rotate(3deg);
   transform-origin: 50% 50%;
}



.button {
   position: absolute;
   z-index: 100000;
   background: rgba(0, 0, 0, 0);
   
   /* dotted round corners do not work in Firefox */
   border-radius: 50%;
   border: .07cm dotted rgba(128, 128, 128, 1);
   
   color:#fff;
   top: 13.5cm;
   width: 2.5cm;
   height: 2.5cm;
   line-height: 2.5cm;
   text-align: center;
   font-size: .8cm;
   color: rgba(128, 128, 128, 1);
   font-weight: bold;
   text-shadow: 0 .1cm .2cm rgba(0, 0, 0, .25);
   opacity: .7;
   
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   cursor: pointer;
}


.button:hover {
   opacity: .9;
   border: .1cm dotted rgba(128, 128, 128, 1);
   
   -webkit-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-kthtml-transition: all .1s ease-out;
transition: all .1s ease-out;
}

.button:active {
   opacity: 1;
   
   -webkit-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-kthtml-transition: all .1s ease-out;
transition: all .1s ease-out;
}



/* == startup screen =================================== */

#travel_2 #startup_screen {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   background: rgba(255, 255, 255, 1);
   border-radius: 0 1.3cm 1.3cm 0;
}



/* == lightbox screen =================================== */

#travel_2 #lightbox_background {
   position: absolute;
   height: 100%;
   width: 100%;
   background: rgba(50, 50, 50, 1);
   z-index: 1000;
}

#travel_2 #lightbox_title {
   display: none;
   position: absolute;
   top: 0;
   width: 100%;
   font-size: .6cm;
   font-weight: bold;
   text-align: center;
   color: rgba(255, 255, 255, 1);
}

#travel_2 #lightbox_image {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

#travel_2 #lightbox_video {
   position: absolute;
   left: 20%;
   top: 20%;
   width: 60%;
   height: 60%;
   text-align: center;
}

#travel_2 #lightbox_credit {
   position: absolute;
   left: .25cm;
   bottom: 0;
   width: auto;
   font-size: .35cm;
   padding: .1cm .3cm;
   background: rgba(0, 0, 0, .5);
   color: rgba(255, 255, 255, .65);
   border-radius: .3cm;
   margin: .2cm;
   
   -ms-transform: rotate(-90deg);
   -ms-transform-origin: 0% 0%;
   -webkit-transform: rotate(-90deg);
   -webkit-transform-origin: 0% 0%;
   transform: rotate(-90deg);
   transform-origin: 0% 0%;
}

#travel_2 #lightbox_exit {
   display: block;
   position: absolute;
   right: .5cm;
   top: .4cm;
   width: 1.5cm;
   height: 1.5cm;
   border-radius: 50%;
   border: .07cm solid black;
   opacity: .75;
   
   background: rgba(255, 255, 255, 1);
   background-image: url('../images/button_x.png');
   background-size: 60%;
   background-repeat: no-repeat;
   background-position: center;
}


/* ===================================== */

 

 

 

CSS



<!-- travel_1.xml (first timeline) *********************************************************************** -->


<timeline>   

<category title="default" color="rgba(128, 128, 128, .9)" />

<period title="2011" center_to_execute="false" javascript_on_click="travel_2.scrollToEvent('Eiffel Tower')" color="rgba(86, 182, 222, .9)" start_year="2011" end_year="2011" end_month="12" end_day="31" />
<period title="2012" center_to_execute="false" javascript_on_click="travel_2.scrollToEvent('Tower Bridge')" color="rgba(192, 213, 60, .9)" start_year="2012" end_year="2012" end_month="12" end_day="31" />
<period title="2013" center_to_execute="false" javascript_on_click="travel_2.scrollToEvent('Coliseum')" color="rgba(243, 133, 162, .9)" start_year="2013" end_year="2013" end_month="12" end_day="31" />
<period title="2014" center_to_execute="false" javascript_on_click="travel_2.scrollToEvent('Brandenburg Gate')" color="rgba(236, 220, 37, .9)" start_year="2014" end_year="2014" end_month="12" end_day="31" />
<period title="2015" center_to_execute="false" javascript_on_click="travel_2.scrollToEvent('Plaza Mayor')" color="rgba(245, 146, 29, .9)" start_year="2015" end_year="2015" end_month="12" end_day="31" />

<date title="Paris" center_to_execute="false" javascript_on_click="travel_2.scrollToEvent('Eiffel Tower')" year="2011" month="7" day="1" category="default" />
<date title="London" center_to_execute="false" javascript_on_click="travel_2.scrollToEvent('Tower Bridge')" year="2012" month="7" day="1" category="default" />
<date title="Rome" center_to_execute="false" javascript_on_click="travel_2.scrollToEvent('Coliseum')" year="2013" month="7" day="1" category="default" />
<date title="Berlin" center_to_execute="false" javascript_on_click="travel_2.scrollToEvent('Brandenburg Gate')" year="2014" month="7" day="1" category="default" />
<date title="Madrid" center_to_execute="false" javascript_on_click="travel_2.scrollToEvent('Plaza Mayor')" year="2015" month="7" day="1" category="default" />


<settings date_fill_direction="fixed_alternate" launch_timeline_position="2.1cm" launch_timeline_length="21cm" periods_push_dates="false" today_in_history="false" vertical_scroll="false" period_gradient="false" auto_zoom="false" />


</timeline>





<!-- travel_2.xml (second timeline) *********************************************************************** -->


<timeline>
         
      <date title="Eiffel Tower" notes="&lt;span class='first_letter'&gt;T&lt;/span&gt;he &lt;b&gt;Eiffel Tower&lt;/b&gt; is a wrought iron lattice tower on the Champ de Mars in &lt;b&gt;Paris&lt;/b&gt;, &lt;b&gt;France&lt;/b&gt;. It is named after the engineer Gustave Eiffel, whose company built the tower. Constructed in 1889 as the entrance to the 1889 World's Fair, it was initially criticized by some of France's leading artists and intellectuals for its design, but has become a global cultural icon of France and one of the most recognisable structures in the world." year="2011" month="4" day="3" preload_delay="5" image="images/Tour_eiffel.jpg" credit="Cezary p @ Wikipedia Commons" javascript_on_append="rotateImage('Eiffel Tower')" javascript_on_center="travel_1.scrollToDate(2011, 7, 1, 0, 0, 'CE')" />
      
      <date title="Louvre" notes="&lt;span class='first_letter'&gt;T&lt;/span&gt;he &lt;b&gt;Louvre&lt;/b&gt; is one of the world's largest museums and a historic monument in &lt;b&gt;Paris&lt;/b&gt;, &lt;b&gt;France&lt;/b&gt;. Nearly 35,000 objects from prehistory to the 21st century are exhibited over an area of 60,600 square metres. The Louvre is the world's most visited museum, receiving more than 9.26 million visitors in 2014." year="2011" month="4" day="5" preload_delay="0" image="images/Louvre.jpg" credit="Benh LIEU SONG" javascript_on_append="rotateImage('Louvre')" javascript_on_center="travel_1.scrollToDate(2011, 7, 1, 0, 0, 'CE')" />         
      
      <date title="Arc de Triomphe" notes="&lt;span class='first_letter'&gt;T&lt;/span&gt;he &lt;b&gt;Arc de Triomphe&lt;/b&gt; de l'Étoile is one of the most famous monuments in &lt;b&gt;Paris&lt;/b&gt;. It stands in the centre of the Place Charles de Gaulle, at the western end of the Champs-Élysées. The Arc de Triomphe honours those who fought and died for France in the French Revolutionary and the Napoleonic Wars, with the names of all French victories and generals inscribed on its inner and outer surfaces.." year="2011" month="4" day="6" preload_delay="0" image="images/Arc_Triomphe.jpg" credit="Jiuguang Wang" javascript_on_append="rotateImage('Arc de Triomphe')" javascript_on_center="travel_1.scrollToDate(2011, 7, 1, 0, 0, 'CE')" />
      
      <date title="Notre Dame" notes="&lt;span class='first_letter'&gt;N&lt;/span&gt;&lt;b&gt;otre-Dame&lt;/b&gt; de Paris is a historic Catholic cathedral on the eastern half of the Île de la Cité in the fourth arrondissement of &lt;b&gt;Paris&lt;/b&gt;, &lt;b&gt;France&lt;/b&gt;. The cathedral is widely considered to be one of the finest examples of French Gothic architecture, and it is among the largest and most well-known church buildings in the world." year="2011" month="4" day="10" preload_delay="0" image="images/NotreDame.jpg" credit="Clem at Flickr.com" javascript_on_append="rotateImage('Notre Dame')" javascript_on_center="travel_1.scrollToDate(2011, 7, 1, 0, 0, 'CE')" />      
      
      
      <date title="Tower Bridge" notes="&lt;span class='first_letter'&gt;T&lt;/span&gt;&lt;b&gt;ower Bridge&lt;/b&gt; (built 1886–1894) is a combined bascule and suspension bridge in &lt;b&gt;London&lt;/b&gt;. The bridge crosses the River Thames close to the Tower of London and has become an iconic symbol of London. Tower Bridge is one of five London bridges now owned and maintained by the Bridge House Estates, a charitable trust overseen by the City of London Corporation." year="2012" month="6" day="15" preload_delay="0" image="images/Tower_Bridge.jpg" credit="© User:Colin / Wikimedia Commons / CC-BY-SA-4.0" javascript_on_append="rotateImage('Tower Bridge')" javascript_on_center="travel_1.scrollToDate(2012, 7, 1, 0, 0, 'CE')" />
      
      <date title="Buckingham Palace" notes="&lt;span class='first_letter'&gt;B&lt;/span&gt;&lt;b&gt;uckingham Palace&lt;/b&gt; is the &lt;b&gt;London&lt;/b&gt; residence and principal workplace of the reigning monarch of the &lt;b&gt;United Kingdom&lt;/b&gt;. Located in the City of Westminster, the palace is often at the centre of state occasions and royal hospitality. It has been a focus for the British people at times of national rejoicing." year="2012" month="7" day="1" preload_delay="0" image="images/Buckingham.jpg" credit="Diliff at Wikimedia Commons" javascript_on_append="rotateImage('Buckingham Palace')" javascript_on_center="travel_1.scrollToDate(2012, 7, 1, 0, 0, 'CE')" />         
      
      <date title="Trafalgar Square" notes="&lt;span class='first_letter'&gt;T&lt;/span&gt;&lt;b&gt;rafalgar Square&lt;/b&gt; is a public square in the City of Westminster, Central &lt;b&gt;London&lt;/b&gt;, built around the area formerly known as Charing Cross. Its name commemorates the Battle of Trafalgar, a British naval victory in the Napoleonic Wars with France and Spain that took place on 21 October 1805 off the coast of Cape Trafalgar, Spain." year="2012" month="7" day="10" preload_delay="0" image="images/Trafalgar_Square.jpg" credit="Diliff at Wikimedia Commons" javascript_on_append="rotateImage('Trafalgar Square')" javascript_on_center="travel_1.scrollToDate(2012, 7, 1, 0, 0, 'CE')" />
      
      <date title="Palace of Westminster" notes="&lt;span class='first_letter'&gt;T&lt;/span&gt;he &lt;b&gt;Palace of Westminster&lt;/b&gt; is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. The Palace lies on the northern bank of the River Thames in the City of Westminster, in central &lt;b&gt;London&lt;/b&gt;. For ceremonial purposes, the palace retains its original style and status as a royal residence and is the property of the Crown." year="2012" month="7" day="12" preload_delay="0" image="images/Parliament.jpg" credit="Mike Gimelfarb" javascript_on_append="rotateImage('Palace of Westminster')" javascript_on_center="travel_1.scrollToDate(2012, 7, 1, 0, 0, 'CE')" />
            
      
      <date title="Coliseum" notes="&lt;span class='first_letter'&gt;T&lt;/span&gt;he &lt;b&gt;Colosseum&lt;/b&gt; or Coliseum is an oval amphitheatre in the centre of the city of &lt;b&gt;Rome&lt;/b&gt;, &lt;b&gt;Italy&lt;/b&gt;. Built of concrete and sand, it is the largest amphitheatre ever built. The Colosseum is situated just east of the Roman Forum." year="2013" month="6" day="1" preload_delay="0" image="images/Colosseum.jpg" credit="Diliff at Wikimedia Commons" javascript_on_append="rotateImage('Coliseum')" javascript_on_center="travel_1.scrollToDate(2013, 7, 1, 0, 0, 'CE')" />
      
      <date title="Trevi Fountain" notes="&lt;span class='first_letter'&gt;T&lt;/span&gt;he &lt;b&gt;Trevi Fountain&lt;/b&gt; is a fountain in the Trevi district in &lt;b&gt;Rome&lt;/b&gt;, &lt;b&gt;Italy&lt;/b&gt;, designed by Italian architect Nicola Salvi and completed by Pietro Bracci. It is the largest Baroque fountain in the city and one of the most famous fountains in the world." year="2013" month="6" day="4" preload_delay="0" image="images/Trevi_fountain.jpg" credit="Livioandronico2013 at Wikimedia Commons" javascript_on_append="rotateImage('Trevi Fountain')" javascript_on_center="travel_1.scrollToDate(2013, 7, 1, 0, 0, 'CE')" />   
      
      <date title="Pantheon, Rome" notes="&lt;span class='first_letter'&gt;T&lt;/span&gt;he &lt;b&gt;Pantheon&lt;/b&gt; is a building in &lt;b&gt;Rome&lt;/b&gt;, &lt;b&gt;Italy&lt;/b&gt;, on the site of an earlier building commissioned by Marcus Agrippa during the reign of Augustus (27 BC – 14 AD)." year="2013" month="6" day="5" preload_delay="0" image="images/Pantheon.jpg" credit="Stefan Bauer" javascript_on_append="rotateImage('Pantheon, Rome')" javascript_on_center="travel_1.scrollToDate(2013, 7, 1, 0, 0, 'CE')" />
      
      <date title="Altare della Patria" notes="&lt;span class='first_letter'&gt;T&lt;/span&gt;he &lt;b&gt;Altare della Patria&lt;/b&gt;, also known as the Monumento Nazionale a Vittorio Emanuele II, is a monument built in honour of Victor Emmanuel, the first king of a unified Italy, located in &lt;b&gt;Rome&lt;/b&gt;, &lt;b&gt;Italy&lt;/b&gt;. It occupies a site between the Piazza Venezia and the Capitoline Hill." year="2013" month="6" day="10" preload_delay="0" image="images/RomaAltarePatria.jpg" credit="MM at Wikimedia Commons" javascript_on_append="rotateImage('Altare della Patria')" javascript_on_center="travel_1.scrollToDate(2013, 7, 1, 0, 0, 'CE')" />
      
      
      <date title="Brandenburg Gate" notes="&lt;span class='first_letter'&gt;T&lt;/span&gt;he &lt;b&gt;Brandenburg Gate&lt;/b&gt; is an 18th-century neoclassical triumphal arch in &lt;b&gt;Berlin&lt;/b&gt;, and one of the best-known landmarks of &lt;b&gt;Germany&lt;/b&gt;. It is built on the site of a former city gate that marked the start of the road from Berlin to the town of Brandenburg an der Havel." year="2014" month="7" day="16" preload_delay="0" image="images/Brandenburger.jpg" credit="Thomas Wolf" javascript_on_append="rotateImage('Brandenburg Gate')" javascript_on_center="travel_1.scrollToDate(2014, 7, 1, 0, 0, 'CE')" />
      
      <date title="Berlin Cathedral" notes="&lt;span class='first_letter'&gt;B&lt;/span&gt;&lt;b&gt;erlin Cathedral&lt;/b&gt; is the short name for the Evangelical Supreme Parish and Collegiate Church in &lt;b&gt;Berlin&lt;/b&gt;, &lt;b&gt;Germany&lt;/b&gt;. It is located on Museum Island in the Mitte borough. The current building was finished in 1905 and is a main work of Historicist architecture of the Kaiserzeit." year="2014" month="7" day="18" preload_delay="0" image="images/Berliner.jpg" credit="Dipsey at Wikipedia Commons" javascript_on_append="rotateImage('Berlin Cathedral')" javascript_on_center="travel_1.scrollToDate(2014, 7, 1, 0, 0, 'CE')" />
      
      <date title="Berlin Wall" notes="&lt;span class='first_letter'&gt;T&lt;/span&gt;he &lt;b&gt;Berlin Wall&lt;/b&gt; was a barrier that divided &lt;b&gt;Berlin&lt;/b&gt; from 1961 to 1989. Constructed by East Germany, the Wall completely cut off West Berlin from surrounding East Germany and from East Berlin until government officials opened it in November 1989. Its demolition officially began on 13 June 1990 and was completed in 1992." year="2014" month="7" day="19" preload_delay="0" image="images/Berlin_Wall.jpg" credit="Freepenguin at Wkipedia Commons" javascript_on_append="rotateImage('Berlin Wall')" javascript_on_center="travel_1.scrollToDate(2014, 7, 1, 0, 0, 'CE')" />
            
      
      <date title="Plaza Mayor" notes="&lt;span class='first_letter'&gt;T&lt;/span&gt;he &lt;b&gt;Plaza Mayor&lt;/b&gt; was built during Philip III's reign (1598–1621) and is a central plaza in the city of &lt;b&gt;Madrid&lt;/b&gt;, &lt;b&gt;Spain&lt;/b&gt;. It is located only a few Spanish blocks away from another famous plaza, the Puerta del Sol. The Plaza Mayor is rectangular in shape, surrounded by three-story residential buildings having 237 balconies facing the Plaza. It has a total of nine entrance ways." year="2015" month="4" day="2" preload_delay="0" image="images/Plaza_Mayor.jpg" credit="Sebastian Dubiel" javascript_on_append="rotateImage('Plaza Mayor')" javascript_on_center="travel_1.scrollToDate(2015, 7, 1, 0, 0, 'CE')" />
      
      <date title="Plaza de Cibeles" notes="&lt;span class='first_letter'&gt;T&lt;/span&gt;he &lt;b&gt;Plaza de Cibeles&lt;/b&gt; is a square with a neo-classical complex of marble sculptures with fountains that has become an iconic symbol for the city of &lt;b&gt;Madrid&lt;/b&gt;. It sits at the intersection of Calle de Alcalá (running from east to west), Paseo de Recoletos (to the North) and Paseo del Prado (to the south)." year="2015" month="4" day="29" preload_delay="0" image="images/Palacio_de_Comunicaciones.jpg" credit="Carlos Delgado" javascript_on_append="rotateImage('Plaza de Cibeles')" javascript_on_center="travel_1.scrollToDate(2015, 7, 1, 0, 0, 'CE')" />
   
   
      <period title="2011" color="rgba(86, 182, 222, 1)" start_year="2011" end_year="2012" />
      <period title="2012" color="rgba(192, 213, 60, 1)" start_year="2012" end_year="2013" />
      <period title="2013" color="rgba(243, 133, 162, 1)" start_year="2013" end_year="2014" />
      <period title="2014" color="rgba(236, 220, 37, 1)" start_year="2014" end_year="2015" />
      <period title="2015" color="rgba(245, 146, 29, 1)" start_year="2015" end_year="2016" />
   
      <settings event_bounds="true" interactive_background="false" interactive_period="false" interactive_bar="false" launch_event="Eiffel Tower" scale_effect="false" date_fill_direction="none" periods_push_dates="false" today_in_history="false" vertical_scroll="false" period_gradient="false" />

</timeline>

 

 

 

XML