Follow

Integrating With Your Website

Below you will find sample code for integrating the Rougeo trail feed into your website.

The only thing you will need to change will be the publisher ID which we have highlighted in red.

You can submit a ticket to request your unique publisher ID.

 

JS

<script type="text/javascript">
$(document).ready(function(){

var output = $('#output');

$.ajax({
url: 'http://rougeo.geosho.com/api/anon_routes/2/',
dataType: 'json',
type: 'GET',
success: function(data){


$.each(data.features, function(i,route){

var trails = '<li class="basic-modal"><h3>'+route.properties.name+'</h3>'
+ '<p class="meta"><strong>'+route.properties.category+':</strong> '+ ((route.properties.length / 1000) / 1.6).toFixed(2) +'m / '+route.properties.duration * 60 + 'mins &nbsp;&nbsp;&nbsp; <strong> Difficulty: </strong>' +route.properties.difficulty+'/5<br>'
+ '<div class="image" style="background: url('+route.properties.cover_image +'?width=1000);"><a href="http://rougeo.geosho.com/RougeoCore/iframe_trail_full_detail/'+route.properties.id+'" target="_blank">&nbsp;</a></div>'
+ '<p class="description">'+route.properties.short_desc+'<br>'
+ '<p><a href="http://rougeo.geosho.com/RougeoCore/iframe_trail_full_detail/'+route.properties.id+'" class="button" target="_blank">View on map</a></p></li>'
+ '';

output.append(trails);
});

},
error: function(){
output.text('There was an error loading the data.');
}
});
});
</script>

HTML

<ul id="output" class="trails"></ul>

CSS

#trails {
min-height: 200px;
color: #fff;
}

#feature {
background: ;
min-height: 200px;
color: #fff;
}


ul.trails {
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
}

ul.trails li {
padding-bottom: 20px;
border-bottom: 2px solid #eaeaea;
width: 44%;
float: left;
margin: 3%;
list-style: none;
min-width: 300px;
min-height: 400px;
}

ul.trails li:nth-child(even) {
}

ul.trails li h3 {
font-size: 18px;
margin-bottom: 10px;
font-weight: 700;
color: #D35519;
}

ul.trails li span.stars {
color: #e8dc1a;
}

ul.trails li p.description {
font-size: 13px;
padding-bottom: 20px;
line-height: 1.4em;
color: #555555;
min-height: 60px;
}

ul.trails li p.meta {
font-size: 13px;
color: #666666;
}

ul.trails li a.button {
text-decoration: none;
color: #fff;
font-weight: 700;
background: #2787AD;
padding: 11px 14px;
}

ul.trails li a.button:hover {
background: #2899c6;
}

ul.trails button {
text-decoration: none;
color: #fff;
font-weight: 700;
background: #2787AD;
padding: 11px 14px;
border: none;
font-size: 16px;
}

ul.trails button:hover {
background: #2899c6;
}

ul.trails li div.image {
height: 200px;
margin-bottom: 15px;
background-size: 100% auto !important;
background-repeat: no-repeat !important;
background-position: center center !important;
border-radius: 3px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

ul.trails li div.image:hover {
opacity: 0.8;
}

ul.trails li div.image a {
display: block;
width: 100% !important;
height: 100% !important;
text-decoration: none;
}

iframe {
width: 789px;
height: 438px;
border: none;
}

p {
text-transform: capitalize;
}

0 Comments

Please sign in to leave a comment.
Powered by Zendesk