{"id":1073,"date":"2013-09-14T17:04:16","date_gmt":"2013-09-14T16:04:16","guid":{"rendered":"http:\/\/johnjohnston.info\/106\/?p=1073"},"modified":"2013-09-14T18:27:58","modified_gmt":"2013-09-14T17:27:58","slug":"flicking-a-five-card-story","status":"publish","type":"post","link":"https:\/\/johnjohnston.info\/106\/flicking-a-five-card-story\/","title":{"rendered":"Flicking a Five Card Story"},"content":{"rendered":"<style type=\"text\/css\" media=\"screen\"><!--\n#fivecards{height:320px;width:500px;} #fivecards p{text-align:center;; } #fivecards img{max-width:500px;max-height:300px;border:solid 1px;padding:10px;box-shadow: 5px 5px 2px #888888;margin:5px} #fivecards a{color:#000}\n--><\/style>\n<hr \/>\n<h2><a href=\"http:\/\/5card.cogdogblog.com\/show.php?id=32596\">Five Card Story: leaving<\/a><\/h2>\n<p>a <a href=\"http:\/\/5card.cogdogblog.com\/show.php?suit=5card\">Five Card Flickr<\/a> story created by johnjohnston<\/p>\n<div id=\"fivecards\">\n<p><a href=\"http:\/\/www.flickr.com\/photos\/23551519@N00\/5741780450\/\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/farm4.static.flickr.com\/3411\/5741780450_564ebd5517_d.jpg\" \/><\/a><br \/>\nflickr photo by <a href=\"http:\/\/www.flickr.com\/photos\/23551519@N00\/5741780450\/\" target=\"_blank\">dwtno<\/a><\/p>\n<p><a href=\"http:\/\/www.flickr.com\/photos\/9445648@N03\/6346521302\/\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/farm7.static.flickr.com\/6049\/6346521302_057f49edcb_d.jpg\" \/><\/a><br \/>\nflickr photo by <a href=\"http:\/\/www.flickr.com\/photos\/9445648@N03\/6346521302\/\" target=\"_blank\">Serenae<\/a><\/p>\n<p><a href=\"http:\/\/www.flickr.com\/photos\/29096601@N00\/6183573163\/\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/farm7.static.flickr.com\/6173\/6183573163_890891bdff_d.jpg\" \/><\/a><br \/>\nflickr photo by <a href=\"http:\/\/www.flickr.com\/photos\/29096601@N00\/6183573163\/\" target=\"_blank\">bionicteaching<\/a><\/p>\n<p><a href=\"http:\/\/www.flickr.com\/photos\/8489692@N03\/5478542111\/\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/farm6.static.flickr.com\/5299\/5478542111_749ef0a08e_d.jpg\" \/><\/a><br \/>\nflickr photo by <a href=\"http:\/\/www.flickr.com\/photos\/8489692@N03\/5478542111\/\" target=\"_blank\">katerha<\/a><\/p>\n<p><a href=\"http:\/\/www.flickr.com\/photos\/91312924@N00\/6224130284\/\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/farm7.static.flickr.com\/6167\/6224130284_5f2c224aa5_d.jpg\" \/><\/a><br \/>\nflickr photo by <a href=\"http:\/\/www.flickr.com\/photos\/91312924@N00\/6224130284\/\" target=\"_blank\">shareski<\/a><\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p>Thro the fence,<\/p>\n<p>A mossy climb,<\/p>\n<p>Deeper.<\/p>\n<p>Leaving the city:<\/p>\n<p>Into a cleaner space.<\/p>\n<hr \/>\n<p><script type=\"text\/javascript\">\/\/ <![CDATA[\nfunction timer_tick(){var e=div4search.getElementsByTagName(\"p\");for(var t=0;t<e.length;t++){if(e[t].offsetWidth>0){e[t].style.display=\"none\";if(t==e.length-1){j=0}else{j=t+1}e[j].style.display=\"block\";break}}if(index==100){obj.Stop()}}div4search=document.getElementById(\"fivecards\");var someas=div4search.getElementsByTagName(\"p\");for(var i=1;i<someas.length;i++){someas[i].style.display=\"none\";}var Timer=function(){this.Interval=1e3;this.Enable=new Boolean(false);this.Tick;var e=0;var t;this.Start=function(){this.Enable=new Boolean(true);t=this;if(t.Enable){t.timerId=setInterval(function(){t.Tick()},t.Interval)}};this.Stop=function(){t.Enable=new Boolean(false);clearInterval(t.timerId)}};var index=0;var obj=new Timer;obj.Interval=3e3;obj.Tick=timer_tick;obj.Start()\n\/\/ ]]><\/script><\/p>\n<p>This week <a href=\"http:\/\/ds106.us\/2013\/09\/09\/headless-ds106-week-3-what-mean-ye-digital-storytelling\/\">it is suggested that<\/a> we try a <a href=\"http:\/\/5card.cogdogblog.com\/show.php?suit=5card\">Five Card Flickr<\/a> story, I took a run at it yesterday.<\/p>\n<p>As I clicked trough the activity, I kept getting ideas that would turn away as I loaded another set of cards, instead of going with the flow I restarted a few times. Better perhaps to just pick up the cards as they are dealt? I didn&#8217;t end up with much of a story.<\/p>\n<p>Today I though I&#8217;d post it and my mind turned to styling the code provided a little, it then wandered onto maybe making a slideshow, the result is above.<br \/>\nI started off by adding a wee bit of css to add a frame\/border round the photo.<br \/>\nYou need to use the text\/html editor in WordPress (similar in other systems too) to paste in the code from Five Card Flickr, I edited a bit in a text editor first as this is easier than using the blog editor.<\/p>\n<p>First I wrapped the paragraphs containing the images in a div, putting:<br \/>\n&lt;div id=&#8221;5cards&#8221;&gt;<br \/>\nBefore the first p tag and:<br \/>\n&lt;\/div&gt; after the last.<\/p>\n<p>I then added a style block:<br \/>\n&lt;style type=&#8221;text\/css&#8221; media=&#8221;screen&#8221;&gt;<br \/>\n#fivecards{height:320px;width:500px;} #fivecards p{text-align:center;; }<br \/>\n#fivecards img{max-width:500px;max-height:300px;border:solid 1px;padding:10px;box-shadow: 5px 5px 2px #888888;margin:5px} #fivecards a{color:#000}<br \/>\n&lt;\/style&gt;<br \/>\nThis gave the images a border and a shadow.<\/p>\n<p>U<br \/>\nI then needed some JavaScript to sort out the slideshow.<\/p>\n<p>First I need to hide all but one of the images:<br \/>\ndiv4search=document.getElementById(&#x27;5cards&#x27;);<br \/>\nvar someas = div4search.getElementsByTagName(&#x27;p&#x27;);<br \/>\nfor (var i=1; i &lt; someas.length; i++) {<br \/>\n\tsomeas[i].style.display =&quot;none&quot;;<br \/>\n};<\/p>\n<p>Next I need a timer to hide the current image and show the next one.<\/p>\n<p>I found a nice timer class: <a href=\"http:\/\/www.dailycoding.com\/Posts\/object_oriented_programming_with_javascript__timer_class.aspx\">Object Oriented Programming with JavaScript : Timer Class &#8211; Daily Coding<\/a> which looked as if it would do the trick.<br \/>\nSo added the code for the class to the post inside the script tag.<br \/>\nI then added a timer_tick function which will be fired every time the timer ticked:<\/p>\n<pre><code>function timer_tick(){\r\n\tdocument.getElementById(&quot;div1&quot;).innerHTML =index;\r\n\tvar someas = div4search.getElementsByTagName(&#x27;p&#x27;);\r\n\tfor (var i=0; i &lt; someas.length; i++) {\r\n\t\tif (someas[i].offsetWidth&gt;0){\r\n\t\t\tsomeas[i].style.display =&quot;none&quot;;\r\n\t\t\tif (i==someas.length-1){j=0;}else{j=i+1;}\r\n\t\t\tsomeas[j].style.display =&quot;block&quot;\r\n\t\t\tbreak;\r\n\t\t};\r\n \t};\r\n}<\/code><\/pre>\n<p>This is not very elegant, instead of remembering which photo is showing I just run through them all and the one that is visible is the current one. If it is the last I show the first, else I show the next.<br \/>\nI added this to the script block.<br \/>\nThe other thing I did was to take the javascript and run it through <a href=\"http:\/\/jscompress.com\/\">Minify Javascript Online<\/a> this put it all one one line. I think you need to do this in wordpress or the editor messes up by adding p tags in the middle of the script.<\/p>\n<p>Not a particularly good way to approach this in a general way, but a nice wee problem for pushing my babysteps javascript a bit. I often wonder if there show be a wee bit of htlm\/css\/javascript in ds106 and I frequently use messing about in this way to avoid the main question;-)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Five Card Story: leaving a Five Card Flickr story created by johnjohnston flickr photo by dwtno flickr photo by Serenae flickr photo by bionicteaching flickr photo by katerha flickr photo by shareski &nbsp; Thro the fence, A mossy climb, Deeper. Leaving the city: Into a cleaner space. This week it is suggested that we try &hellip; <a href=\"https:\/\/johnjohnston.info\/106\/flicking-a-five-card-story\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Flicking a Five Card Story&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[49,91,73],"tags":[],"class_list":["post-1073","post","type-post","status-publish","format-standard","hentry","category-assignment","category-mashup","category-remix"],"better_featured_image":null,"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3RLlC-hj","_links":{"self":[{"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/posts\/1073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/comments?post=1073"}],"version-history":[{"count":18,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/posts\/1073\/revisions"}],"predecessor-version":[{"id":1086,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/posts\/1073\/revisions\/1086"}],"wp:attachment":[{"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/media?parent=1073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/categories?post=1073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/tags?post=1073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}