{"id":276,"date":"2010-03-17T06:23:17","date_gmt":"2010-03-17T13:23:17","guid":{"rendered":"http:\/\/blog.monnet-usa.com\/?p=276"},"modified":"2010-03-17T13:19:56","modified_gmt":"2010-03-17T20:19:56","slug":"showcasing-your-content-in-a-slick-jquery-slideshow-control","status":"publish","type":"post","link":"https:\/\/blog.monnet-usa.com\/?p=276","title":{"rendered":"Showcasing Your Content In A Slick jQuery Slideshow Control"},"content":{"rendered":"<link rel=\"stylesheet\" media=\"screen\" type=\"text\/css\" href=\"https:\/\/blog.monnet-usa.com\/wp-content\/slideshow\/slideshow.css\"\/>\n\t\t<script type=\"text\/javascript\" charset=\"utf-8\" src=\"https:\/\/blog.monnet-usa.com\/wp-content\/slideshow\/slideshow.js\"><\/script><\/p>\n<style>\nh5 {margin-left:20px !important;}\n.details_table {border: 1px solid #f0f0f0;border-spacing: 1px;background-color:white;margin-left: 40px;}\n.details_table tr{vertical-align: top;border-bottom: 1px solid LightGoldenRodYellow;}\n.details_table th {background-color:lightgray;}\n.details_table td {border-bottom: 1px solid LightGoldenRodYellow;}\n.download_panel {background-color: #EDD6AD;color: blue; font-size: 1.2em;font-weight:bold;text-align:center;margin:0 50px 0 50px;padding:6px;}\n<\/style>\n<p>A few weeks ago, as I was redesigning the home page of one of my site, <a href='#msm'>mySkillsMap<\/a>, based on <a href='pf'>feedback from Jason Roberts and Justin Vincent<\/a>, on their segment of the <a href='#tz'>TechZing podcast<\/a>, I decided to include an <b>auto-advancing gallery<\/b> to showcase screenshots from the site.<\/p>\n<p>I was already using a <b>slideshow gallery<\/b> on <a href='#msm'>mySkillsMap<\/a> to showcase user portfolios. The slideshow was based on the article from <a href='#sr'>SixRevisions<\/a> titled <a href='#sra'>&#8220;Create a Slick and Accessible Slideshow Using jQuery&#8221;<\/a>. The article was well-stuctured and made it easy to implement a nice-looking slideshow.<br \/>\nI had noticed in the comments that <a href='#sl'>St\u00e9phane Lyver<\/a>, was mentioning he had created a <a href='#sx'>French adaptation of the tutorial<\/a>, and had made a couple enhancements including:<\/p>\n<ul>\n<li><a href='#sas'>Auto-advance<\/a> through all slides with a parametizable <b>pause<\/b> on each slide<\/li>\n<li>Optional <a href='#scp'>control panel<\/ab> with pause\/resume buttons<\/li>\n<li><a href='#sas'>Auto-start<\/a> of the slideshow<\/li>\n<li>Endless <a href='sel'>loop<\/a><\/li>\n<\/ul>\n<p>I clicked on over to St\u00e9phane&#8217;s site, and started to mix his code enhancements with my own adaptation of <a href='#srsc'>SixRevision<\/a>&#8216;s slideshow code, all this while translating the code back to English! So this post is a translation and adaptation of St\u00e9phane&#8217;s enhancements (with his permission).\n\t\t\t\t\t<\/p>\n<p>\t\t\t\t\t<a name='seg'><\/a><\/p>\n<p>Here is what the enhanced slideshow looks like:<\/p>\n<div id='slideshow_example'>\n<div id=\"slideshow\">\n<div id=\"slidesContainer\">\n<div class=\"slide\">\n<h2>IronCamping = Camping Framework on IronRuby<\/h2>\n<p>\t\t\t\t\t\t\t\t\t<a href='https:\/\/blog.monnet-usa.com\/?p=166'><\/p>\n<p>IronRuby can run Camping web apps on IIS using IronRack<\/p>\n<p>\t\t\t\t\t\t\t\t\t\t<img src='https:\/\/blog.monnet-usa.com\/wp-content\/ironcamping.png'><br \/>\n\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n<div class=\"slide\">\n<h2>Performance Management Using NewRelic<\/h2>\n<p>\t\t\t\t\t\t\t\t\t<a href='https:\/\/blog.monnet-usa.com\/?p=223'><\/p>\n<p>Visualize Application Metrics on NewRelic for your Ruby Camping Application<\/p>\n<p>\t\t\t\t\t\t\t\t\t\t<img src='https:\/\/blog.monnet-usa.com\/wp-content\/camping-newrelic.png'><br \/>\n\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n<div class=\"slide\">\n<h2>Sending Cropper Captures to TwitPic<\/h2>\n<p>\t\t\t\t\t\t\t\t\t<a href='https:\/\/blog.monnet-usa.com\/?p=184'><\/p>\n<p>You can now use Cropper to send your captured images to TwitPic<\/p>\n<p>\t\t\t\t\t\t\t\t\t\t<img src='https:\/\/blog.monnet-usa.com\/wp-content\/uploads\/2009\/10\/SendToTwitPic.png'><br \/>\n\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>\t\t\t\t\t\t<script  type=\"text\/javascript\">\t\tvar autostart_slideshow  = true;<\/script>\n\t\t\t\t\t<\/div>\n<p><div class='download_panel'><a href='https:\/\/blog.monnet-usa.com\/wp-content\/slideshow\/slideshow.zip'>Download the Enhanced Slideshow code<\/a><\/div>\n<\/p>\n<h3>Enhancements Tutorial <\/h3>\n<p>So let&#8217;s see how to build the enhanced version. I am assuming that at this point you have already downloaded the <a href='#srsc'>code<\/a> from <a href='#sr'>SixRevisions<\/a>, have already gone through the <a href='#sra'>tutorial<\/a>, and have implemented the slideshow on your site.<\/p>\n<h5>Declaring new variables<\/h5>\n<p>So now go to the start of the Javascript code and declare the following variables:<\/p>\n<pre class=\"brush: javascript\">\r\n$(document).ready(function(){\r\n    \/\/ ...\r\n\r\n\tvar slideshow_start_mode  = false; \r\n    var autostart_slideshow = true;  \r\n    var rewind_slideshow = true;  \r\n    var display_slideshow_control_panel = true;  \r\n\t \r\n    var slide_transition_time = 1000;  \r\n    var slide_viewing_time = 6000;  \r\n       \r\n    var slideshow_control_icons = new Array();  \r\n\t\/\/ Note: you can download the .png locally and edit the urls below to reflect your path\r\n    slideshow_control_icons['play']  \t= 'http:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/09\/Control_play.png';  \r\n    slideshow_control_icons['pause'] \t= 'http:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/09\/Control_pause.png';     \r\n\t \r\n    var interval;  \r\n\t \r\n    \/\/ ...\r\n}\t\r\n<\/pre>\n<p>Let&#8217;s see what the new variables are used for:<br \/>\n<a name='vars'><\/a><\/p>\n<table class='details_table'>\n<tr>\n<th>Variable<\/th>\n<th>Usage<\/th>\n<\/tr>\n<tr>\n<td>slideshow_start_mode<\/td>\n<td>If true, the slideshow will automatically move to the next slide after a certain time (controlled by slide_transition_time and slide_viewing_time &#8211; see below)<b><\/b> or <b><\/b><\/td>\n<\/tr>\n<tr>\n<td>autostart_slideshow<\/td>\n<td>If true, the slideshow will automatically start once the page is loaded<\/td>\n<\/tr>\n<tr>\n<td>rewind_slideshow<\/td>\n<td>If true, the slideshow will automatically rewind by going back to slide #1<\/td>\n<\/tr>\n<tr>\n<td>display_slideshow_control_panel<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>slide_transition_time<\/td>\n<td>The number of milliseconds the jQuery slide transition effect will last<\/td>\n<\/tr>\n<tr>\n<td>slide_viewing_time<\/td>\n<td>The number of milliseconds a given slide will be displayed before the slideshow automatically moves on to the next slide in auto-advance mode<\/td>\n<\/tr>\n<tr>\n<td>slideshow_control_icons<\/td>\n<td>This array contains a list of icons names to use for the control panel (specifically for the pause and play buttons)<\/td>\n<\/tr>\n<tr>\n<td>interval<\/td>\n<td>The Javascript interval timer used during auto-advance mode<\/td>\n<\/tr>\n<\/table>\n<p>\t\t\t\t\tExtracting and declaring these variables upfront increase readibility of the code and makes it easy to quickly change the settings without having to go through the whole source.\n\t\t\t\t\t<\/p>\n<p>\t\t\t\t\t<a name='sas'><\/a><\/p>\n<h5>Implementing Auto-Advance<\/h5>\n<p>This feature will be based on 3 functions that we will add after the <b>manageControls<\/b> function:<\/p>\n<table class='details_table'>\n<tr>\n<th>Function<\/th>\n<th>Purpose<\/th>\n<\/tr>\n<tr>\n<td>start_slideshow<\/td>\n<td>Positions the slideshow on the first slide and starts the auto-advance slide progression<\/td>\n<\/tr>\n<tr>\n<td>show_next_slide<\/td>\n<td>Moves to the next slide by triggering the right arrow control<\/td>\n<\/tr>\n<tr>\n<td>pause_slideshow<\/td>\n<td>Stops the auto-advance until it is resumed by start_slideshow<\/td>\n<\/tr>\n<\/table>\n<p><\/p>\n<p>\t\t\t\t\tLet&#8217;s look at the implementation:<\/p>\n<pre class=\"brush: javascript\">\r\nfunction start_slideshow() {  \r\n   slideshow_start_mode = true;  \r\n   interval = setInterval(show_next_slide, slide_viewing_time );  \r\n}  \r\n \r\nfunction show_next_slide(){  \r\n   $('#rightControl').click();  \r\n}  \r\n \r\nfunction pause_slideshow() {  \r\n   slideshow_start_mode = false;  \r\n       clearInterval(interval);  \r\n} \r\n<\/pre>\n<ol>\n<li>The <b>start_slideshow<\/b> and <b>pause_slideshow<\/b> both toggle the <b>slideshow_start_mode<\/b> variable.<\/li>\n<li>To execute the <b>show_next_slide<\/b> function on a periodic basis (every so many milliseconds) an <b>interval timer<\/b> is created. The first parameter of <b>setInterval<\/b> is the function to execute, the second parameter is the number of milliseconds between executions.<\/li>\n<li>To stop the execution of the <b>show_next_slide<\/b> function we just clear the interval using the <b>clearInterval<\/b> function, passing our interval object.<\/li>\n<li>Finally, the <b>show_next_slide<\/b> function just advances the slide as if we had manually clicked on the right arrow button of the slideshow, by invoking the <b>click()<\/b> function of the #rightControl button.<\/li>\n<\/ol>\n<p>\t\t\t\t\tNow that these 3 base functions are available, we can trigger the <b>start_slideshow<\/b> function by adding the following snippet to the <b>$(document).ready<\/b> function:<\/p>\n<pre class=\"brush: javascript\">\r\n$(document).ready(function(){\r\n    \/\/ ...\r\n\t\r\n\t\/\/ If auto start is on kick off the slideshow\r\n\tif(autostart_slideshow == true){  \r\n\t\tstart_slideshow();  \r\n\t}\r\n}\r\n<\/pre>\n<\/p>\n<p>\t\t\t\t\t<a name='scp'><\/a><\/p>\n<h5>Creating the control panel<\/h5>\n<p>The base slideshow has forward and backward buttons, so now that we&#8217;re adding auto-advance it would be nice to have a little control panel at the bottom of the slide allowing us to pause or resume the slideshow.<\/p>\n<p>First let&#8217;s add two new functions right after the 3 functions we already added:<\/p>\n<table class='details_table'>\n<tr>\n<th>Function<\/th>\n<th>Purpose<\/th>\n<\/tr>\n<tr>\n<td>setup_control_panel<\/td>\n<td>Add and position an image with an id of <b>slideshow_control_panel<\/b> to act as a control button and setup a handler for the control button&#8217;s click event.<\/td>\n<\/tr>\n<tr>\n<td>handle_control_panel_click<\/td>\n<td>Handle the <b>click event<\/b> on the control button to either <b>pause<\/b> or <b>resume<\/b> the slideshow.<\/td>\n<\/tr>\n<\/table>\n<p><\/p>\n<pre class=\"brush: javascript\">\r\n\t\r\n\tfunction setup_control_panel() \r\n\t{\r\n\t\t$('#slidesContainer').prepend('&le;img id=\"slideshow_control_panel\" src=\"\" alt=\"Navigation diaporama\" \/&gt;');  \r\n\t\tvar control_panel = $('#slideshow_control_panel');\r\n\r\n\t\tif(autostart_slideshow == true)\r\n\t\t\tcontrol_panel.attr('src',slideshow_control_icons['pause']);  \r\n\t\telse\r\n\t\t\tcontrol_panel.attr('src',slideshow_control_icons['play']);    \r\n\t\t\t\r\n\t\tcontrol_panel.bind('click', handle_control_panel_click);\r\n\t}\r\n\r\n\tfunction handle_control_panel_click()\r\n\t{\r\n\t\tif(slideshow_start_mode == true)\r\n\t\t{  \r\n\t\t\t$(this).attr('src',slideshow_control_icons['play']);  \r\n\t\t\tpause_slideshow();  \r\n\t\t}\r\n\t\telse\r\n\t\t{  \r\n\t\t\t$(this).attr('src',slideshow_control_icons['pause']);  \r\n\t\t\tstart_slideshow();  \r\n\t\t}  \r\n\t}\r\n<\/pre>\n<p><\/p>\n<p>\n\t\t\t\tLet&#8217;s break down the behavior of these 2 functions:<\/p>\n<ol>\n<li>We dynamically add an <b>image<\/b> with the id <b>slideshow_control_panel<\/b>.<\/li>\n<li>We set the <b>source of the image<\/b> to be either a <b>pause<\/b> or a <b>play<\/b> button depending on the value of <b>autostart_slideshow<\/b>.<\/li>\n<li>We bind the click event handler accordingly to either invoke <b>pause_slideshow<\/b> or <b>start_slideshow<\/b> and toggle the control panel button image.<\/li>\n<\/ol>\n<p>Ok, now we will leverage the <b>display_slideshow_control_panel<\/b> variable we added to conditionally setup the control panel after the <b>manageControls<\/b> function has been called (within  <b>$(document).ready<\/b>):<\/p>\n<pre class=\"brush: javascript\">\r\n$(document).ready(function(){\r\n    \/\/ ...\r\n\r\n\t\/\/ Hide left arrow control on first load\r\n\tmanageControls(currentPosition);\r\n\r\n\t\/\/ Conditionally setup the control panel if needed\r\n    if(display_slideshow_control_panel == true)\r\n\t\tsetup_control_panel();\r\n\r\n    \/\/ ...\r\n}\t\r\n<\/pre>\n<p>\n\t\t\t\tAnd let&#8217;s define the CSS for our control panel as follows:\n\t\t\t\t<\/p>\n<pre class=\"brush: css\">\t\t\t\r\n       #slideshow_control_panel{  \r\n         display:block;  \r\n         width:20px;  \r\n         height:20px;  \r\n         position:absolute;  \r\n         right:25px;  \r\n         bottom:10px;  \r\n         cursor:pointer;  \r\n     } \r\n<\/pre>\n<p>\n\t\t\t\tFor the pause and resume icons, I used the following 2 icons from the <a href='#silk'>Silk icon theme<\/a> on <a href='#wmc'>Wikimedia Commons<\/a>:<\/p>\n<table class='details_table'>\n<tr>\n<th>Icon<\/th>\n<th>Purpose<\/th>\n<th>Name<\/th>\n<\/tr>\n<tr>\n<td><img src='http:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/09\/Control_pause.png'><\/td>\n<td>pause<\/td>\n<td><a href='http:\/\/commons.wikimedia.org\/wiki\/File:Control_pause.png'>Control_pause.png<\/a><\/td>\n<\/tr>\n<tr>\n<td><img src='http:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/20\/Control_play.png'><\/td>\n<td>resume\/play<\/td>\n<td><a href='http:\/\/commons.wikimedia.org\/wiki\/File:Control_play.png'>Control_play.png<\/a><\/td>\n<\/tr>\n<\/table>\n<p>\n\t\t\t\tNow we have nice-looking control panel!\n\t\t\t\t<\/p>\n<p>\t\t\t\t\t<a name='sel'><\/a><\/p>\n<h5>Adding the endless loop<\/h5>\n<p>So at this stage, we added the ability to auto-start the slideshow, auto-advance to the next slide, and pause or resume the slideshow. We just need to have the slideshow loop back to the beginning after the last slide. Let&#8217;s touch up the <b>manageControls<\/b> function to reset the currentPosition (i.e. current slide) to zero once we&#8217;re on the last slide (i.e. done displaying it) and <b>rewind_slideshow<\/b> is true:<\/p>\n<pre class=\"brush: javascript\">\r\n\tfunction manageControls(position)\r\n\t{\r\n\t\t\/ Hide left arrow if position is first slide\r\n\t\tif(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }\r\n\t\t\r\n\t\t\/\/ Hide right arrow if position is last slide\r\n\t\t\/\/ and if auto rewind is not on\r\n\t\tif(position==numberOfSlides-1 && rewind_slideshow == false)\r\n\t\t{\r\n\t\t\t$('#rightControl').hide();\r\n\t\t} else {\r\n\t\t\t$('#rightControl').show();\r\n\t\t}\r\n\t\t\r\n\t\t\/\/ Go back to the first slide if we're on the last slide\r\n\t\t\/\/ and if auto rewind is on\r\n\t\tif(position == numberOfSlides && rewind_slideshow == true){\r\n\t\t\tcurrentPosition = 0;\r\n\t\t\t $('#leftControl').hide();\r\n\t\t}\r\n\t}\r\n<\/pre>\n<p>\t\t\t\t\tNow we also need to adjust the <b>click event handlers<\/b> for the backward and forward buttons so that they can take into account the <b>rewind_slideshow<\/b> flag to pause the slideshow if necessary:<\/p>\n<pre class=\"brush: javascript\">\t\t\t\t\t\r\n\t\/\/ Create event listeners for .controls clicks\r\n\t$('.control').bind('click', function()\r\n\t{\r\n\t\t\/\/ Determine new position\r\n\t\tcurrentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;\r\n\r\n\t\t\/\/ If auto rewind is off pause the slideshow \r\n\t\t\/\/ when on the last slide\r\n\t\tif(currentPosition == numberOfSlides \r\n\t\t\t&& rewind_slideshow == false )\r\n\t\t{  \r\n             currentPosition--;  \r\n             pause_slideshow();  \r\n        } \r\n\t\t \r\n\t\t\/\/ Hide \/ show controls\r\n\t\tmanageControls(currentPosition);\r\n\t\t\r\n\t\t\/\/ Move slideInner using margin-left\r\n\t\t\/\/ during the defined slide transition elapsed time\r\n\t\t$('#slideInner').animate(\r\n\t\t\t{\r\n\t\t\t  'marginLeft' : slideWidth*(-currentPosition)\r\n\t\t\t}\r\n\t\t\t,slide_transition_time);\r\n\t});\r\n<\/pre>\n<p>\n\t\t\tNote that we added <b>slide_transition_time<\/b> to make the slide transition duration configurable.<br \/>\n\t\t\tNow when adding the slideshow to your web page, you can override the default settings by adding the following script:<\/p>\n<pre class=\"brush: javascript\">\t\t\t\t\t\r\n<script  type=\"text\/javascript\">\r\nvar autostart_slideshow  = true; \t\/\/ will autostart\r\nvar slide_transition_time = 2000; \t\/\/ longer transition time of 2s \r\nvar slide_viewing_time = 10000;  \t\/\/ longer viewing time of 10s\r\n<\/script>\r\n<\/pre>\n<p>\t\t\tThat&#8217;s it! With a few enhancements we now a very functional slideshow.\n\t\t\t\t\t<\/p>\n<h3>So What? <\/h3>\n<p>Often web designers have relied on Flash to created animated galleries, but as demonstrated by <a href='#sr'>SixRevisions<\/a> and <a href='#sx'>Snoupix<\/a>, &#8220;pure&#8221; web technologies like HTML, CSS and jQuery can also allow you to create a <b>really slick slideshow gallery<\/b>.<br \/>\n\t\t\t\t\tWith the additional enhancements you can now add <a href='#sas'>automatic start<\/a>, <a href='#sel'>endless looping<\/a>, as well as a <a href='#scp'>control panel<\/a> to pause \/ play the slideshow.<\/p>\n<p>You too can now leverage the <b>power of a slideshow<\/b> to showcase features, benefits, etc. using images on your site.<\/p>\n<div class='download_panel'><a href='https:\/\/blog.monnet-usa.com\/wp-content\/slideshow\/slideshow.zip'>Download the Enhanced Slideshow code<\/a><\/div>\n<\/p>\n<p>\n\t\t\t\t\tCheck-out the main page of <b><a href='#msm'>mySkillsMap<\/a><\/b> to see an illustration how the slideshow can quickly communicate key messages to your audience.<\/p>\n<p>\t\t\t\t\t<a name=\"referencesandresources\" ><\/a><\/p>\n<h3>References and Resources<\/h3>\n<h5>Sites:<\/h5>\n<ul>\n<li><a name='sr' href='http:\/\/sixrevisions.com\/\/'>SixRevisions site<\/a><\/li>\n<li><a name='sra' href='http:\/\/sixrevisions.com\/tutorials\/javascript_tutorial\/create-a-slick-and-accessible-slideshow-using-jquery\/'>Create a Slick and Accessible Slideshow Using jQuery<\/a><\/li>\n<li><a name='srsc' href='http:\/\/downloads.sixrevisions.com\/slick_accessible_slideshow.zip\/'>SixRevision&#8217;s slideshow code<\/a><\/li>\n<li><a name='sl' href='http:\/\/www.kerpix.com\/'>Stephane Lyver&#8217;s web site<\/a><\/li>\n<li><a name='sx' href='http:\/\/snoupix.com\/slideshow-jquery-accessible_tutorial_28.html'>Snoupix Tutorial<\/a><\/li>\n<li><a name='jq' href='http:\/\/jquery.com\/'>jQuery<\/a><\/li>\n<li><a name='silk' href='http:\/\/commons.wikimedia.org\/wiki\/Category:Silk_icons'>Silk Icon Theme by by Mark Jame<\/a><\/li>\n<li><a name='wmc' href='http:\/\/commons.wikimedia.org\/wiki\/Main_Page'>WikiMedia Commons<\/a><\/li>\n<p><\/p>\n<li><a name='pfms' href='https:\/\/blog.monnet-usa.com\/wp-content\/slideshow\/slideshow.zip'>Enhanced Slideshow code<\/a><\/li>\n<p><\/p>\n<li><a name='msm' href='http:\/\/www.myskillsmap.com\/'>my Skills Map<\/a><\/li>\n<li><a name='pf' href='http:\/\/techzinglive.com\/?p=167'>TechZing&#8217;s critique of mySkillsMap<\/a><\/li>\n<li><a name='tz' href='http:\/\/techzinglive.com'>TechZing podcast<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>A few weeks ago, as I was redesigning the home page of one of my site, mySkillsMap, based on feedback from Jason Roberts and Justin Vincent, on their segment of the TechZing podcast, I decided to include an auto-advancing gallery to showcase screenshots from the site. I was already using a slideshow gallery on mySkillsMap [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[60,59,30,4],"tags":[31,32,58],"class_list":["post-276","post","type-post","status-publish","format-standard","hentry","category-css","category-javascript","category-jquery","category-tools","tag-css","tag-javascript","tag-jquery"],"_links":{"self":[{"href":"https:\/\/blog.monnet-usa.com\/index.php?rest_route=\/wp\/v2\/posts\/276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.monnet-usa.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.monnet-usa.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.monnet-usa.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.monnet-usa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=276"}],"version-history":[{"count":11,"href":"https:\/\/blog.monnet-usa.com\/index.php?rest_route=\/wp\/v2\/posts\/276\/revisions"}],"predecessor-version":[{"id":286,"href":"https:\/\/blog.monnet-usa.com\/index.php?rest_route=\/wp\/v2\/posts\/276\/revisions\/286"}],"wp:attachment":[{"href":"https:\/\/blog.monnet-usa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.monnet-usa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.monnet-usa.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}