{"id":17510,"date":"2015-10-02T05:01:24","date_gmt":"2015-10-01T19:01:24","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=17510"},"modified":"2015-10-02T10:43:11","modified_gmt":"2015-10-02T00:43:11","slug":"wordpress-visual-synopsis-slideshow-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-visual-synopsis-slideshow-primer-tutorial\/","title":{"rendered":"WordPress Visual Synopsis Slideshow Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wordpress_visual_synopsis.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"WordPress Visual Synopsis Slideshow Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wordpress_visual_synopsis.jpg\" title=\"WordPress Visual Synopsis Slideshow Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">WordPress Visual Synopsis Slideshow Primer Tutorial<\/p><\/div>\n<p>Think I am not alone in hankering for chances to &#8220;cut to the chase&#8221; when surfing the web, because, although there is great information out there, there can also be too much of it, and users appreciate ways to reduce the amount to take in, on occasions.<\/p>\n<p>At this blog we try to have a visual side up the top of a blog posting, consisting of a combination of &#8230;<\/p>\n<ol>\n<li>one image explaining something about the blog posting &#8230; or &#8230;<\/li>\n<li>a link to a potential slideshow consisting of several image stills &#8230; or &#8230;<\/li>\n<li>one image hoverable overable (our so-called &#8220;twirl&#8221; arrangement, suitable for laptops, at least)<\/li>\n<\/ol>\n<p> &#8230; before the blog posting wording starts.<\/p>\n<p>We figure a good &#8220;cut to the chase&#8221; could be to leave it as that top bit, as a Visual Synopsis (Slideshows) if the blog postings relevant to the WordPress blog webpage the user is currently on.  Sounds a bit silly, when you are already on it?  Well, we don&#8217;t think it is so silly for one of those blog postings that has been developing over time, especially one that has been using many scenario 1 blog postings in a series, because now, if you pick the latest one of these, and choose to invoke this new functionality &#8230;<\/p>\n<p><i>(which, by the way, is invoked by clicking on the Cinema symbol (&amp;#127910; <a target=_blank title='Cinema symbol' href='http:\/\/www.iemoji.com\/view\/emoji\/324\/symbols\/cinema'>&#127910;<\/a>) after the word &#8220;Blog&#8221; up the top of the page)<\/i><\/p>\n<p> &#8230; all the relevant images of blog postings will line up from left to right in chronological order.<\/p>\n<p>Down below we allow you to open a new web page taking you to a WordPress 4.1.1 blog posting, whereas if you click the image of the Visual Synopsis (Slideshows) you may be taken to an image or a slideshow or a live run, perhaps &#8230; it depends, but is more often than not more involved with the &#8220;cutting to the chase&#8221; about the matter than reading the wording of the Blog Posting, perhaps.<\/p>\n<p>It&#8217;s one of those things that some users may like, and others may not.<\/p>\n<p>So what coding changes were needed for this?  It was twofold (basically, though there are Ajax contextual help changes as well), with the usual first suspect being our favourite header.php code changes and then a whole new piece of PHP as per &#8230;<\/p>\n<ul>\n<li>header.php <b>bold<\/b> onload event changes, as per our usual pattern, as shown below with &#8230;<br \/>\n<code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n\/\/ ... etc etc etc<br \/>\n<b><br \/>\nfunction uptop() {<br \/>\n    var preendp, endp, endpsuffix=\"\", doittoday=false, uptopdiv=\"&lt;div id='slide\" + \"showdiv' style='border: 20px solid yellow;height: 680px; overflow: scroll;'&gt; &lt;b&gt;&lt;font color=green&gt;&lt;h3&gt;Visual Synopsis (Slideshows) ... &lt;a href='#backtoblog' title='Back to Blog'&gt;Back to Blog&lt;\/a&gt;&lt;\/h3&gt;&lt;\/font&gt;&lt;\/b&gt;&lt;br&gt;&lt;table cellpadding=20&gt;&lt;tbody&gt;&lt;tr&gt;&lt;\/tr&gt;&lt;\/tbody&gt;&lt;\/table&gt;&lt;\/div&gt;&lt;p id='backtoblog'&gt;&lt;\/p&gt;\";<br \/>\n    var vsbitsare=docgetclass(\"wp-caption\", \"div\");<br \/>\n    var wasih=document.body.innerHTML;<br \/>\n    if (wasih.indexOf(\"slid\" + \"eshowdiv\") == -1) {<br \/>\n    for (var ivsbitsare=0; ivsbitsare&lt;vsbitsare.length; ivsbitsare++) {<br \/>\n      if (vsbitsare[ivsbitsare].innerHTML.indexOf(\"youtube.com\/watch\") == -1 && vsbitsare[ivsbitsare].innerHTML.indexOf(\"mywta\") == -1) {<br \/>\n       if (uptopdiv.indexOf(encodeURIComponent(vsbitsare[ivsbitsare].innerHTML)) == -1) {<br \/>\n        endpsuffix=\"\";<br \/>\n        endp=vsbitsare[ivsbitsare].innerHTML.split(\"&lt;\/p&gt;\");<br \/>\n        if (endp.length &gt; 1) {<br \/>\n          if (endp[eval(-1 + endp.length)] == \"\") {<br \/>\n            preendp=endp[eval(-2 + endp.length)].split(\"&gt;\");<br \/>\n            endpsuffix=\"&lt;br&gt;&lt;font color=gray&gt;&lt;a target=_blank title='\" + preendp[eval(-1 + preendp.length)] + \"' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/\" + preendp[eval(-1 + preendp.length)].toLowerCase().replace(\"\/\",\"\").replace(\" \",\"-\").replace(\"\/\",\"\").replace(\" \",\"-\").replace(\"\/\",\"\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\") + \"'&gt;\" + preendp[eval(-1 + preendp.length)] + \"&lt;\/a&gt;&lt;\/font&gt;\";<br \/>\n          } else {<br \/>\n            preendp=endp[eval(-1 + endp.length)].split(\"&gt;\");<br \/>\n            endpsuffix=\"&lt;br&gt;&lt;font color=gray&gt;&lt;a target=_blank title='\" + preendp[eval(-1 + preendp.length)] + \"' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/\" + preendp[eval(-1 + preendp.length)].toLowerCase().replace(\"\/\",\"\").replace(\" \",\"-\").replace(\"\/\",\"\").replace(\" \",\"-\").replace(\"\/\",\"\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\") + \"'&gt;\" + preendp[eval(-1 + preendp.length)] + \"&lt;\/a&gt;&lt;\/font&gt;\";<br \/>\n          }<br \/>\n        }<br \/>\n        uptopdiv=uptopdiv.replace('&lt;\/tr&gt;', '&lt;td style=\"border: 5px orange solid;\"&gt;' + endpsuffix.replace('&lt;br&gt;','') + '&lt;br&gt;&lt;iframe style=\"width: 640px;height: 600px;\" src=\"' + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/clicktheslideshow.php?somebodyhtml=\" + encodeURIComponent(vsbitsare[ivsbitsare].innerHTML) + '\"&gt;&lt;\/iframe&gt;' + endpsuffix + '&lt;\/td&gt;&lt;\/tr&gt;');<br \/>\n        doittoday=true;<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n    if (doittoday) {<br \/>\n      document.body.innerHTML = uptopdiv + wasih;<br \/>\n      window.scrollTo(0,0);<br \/>\n    }<br \/>\n    }<br \/>\n}<br \/>\n<\/b><br \/>\nfunction courseCookies() {<br \/>\n  img_alt();  \/\/ Make sure all img have alt (=title)<br \/>\n  ajaxcontexthelp_mode();  \/\/ Check on Context Help mode<br \/>\n  download_mode();  \/\/ Check on Download mode<br \/>\n  metasep(); \/\/ meta-sep class dropdown<br \/>\n  checkpt(); \/\/ category and tag \"oldest\"<br \/>\n  rptwo();  \/\/ Recent Post images<br \/>\n  ul_li_noclass();  \/\/ Alternative to bullet ul\/li lists<br \/>\n  winit();  \/\/ Ajax functionality 26\/11\/2014 ... slow hover ... not for mobile<br \/>\n  checkMarginLeftImages();<br \/>\n  \/\/setTimeout(checkAcourseBackground, 3000);<br \/>\n  if ((ourpp != \"\" || ourpn != \"\") && ourpp != ourp && ourpn != ourp) {<br \/>\n    quizmaybe('atopn','atopp');<br \/>\n  }<br \/>\n  <b><br \/>\n  var stih=document.getElementById('site-title').innerHTML;<br \/>\n  if (stih.indexOf(\"up\" + \"top\") == -1) { \/\/visualsynopsis=\") != -1) {<br \/>\n    document.getElementById('site-title').innerHTML+='&lt;a style=\"text-decoration:none;\" href=# onmouseover=\"getVisualSynopsis(event);\" onmouseout=\"yehbut();\"  ontouchstart=\"getVisualSynopsis(event);\" ontouchend=\"yehbut();\"  onclick=\" uptop(); \" title=\"... you can wait for the long hover functionality about Visual Synopsis (Slideshows)\"&gt;&amp;#127910;&lt;\/a&gt;';<br \/>\n  }<br \/>\n  <\/b><br \/>\n  \/\/ ... etc etc etc<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body onload=\" setTimeout(initpostedoncc, 3000); widgetcon(); precc(); courseCookies();\" &lt;?php body_class(); ?&gt;&gt;<br \/>\n<\/code>\n<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/clicktheslideshow.php_GETME\" title='clicktheslideshow.php'>clicktheslideshow.php<\/a> &#8230; as you can well imagine there is a lot of PHP <a target=_blank title='PHP file_get_contents method information' href='http:\/\/php.net\/manual\/en\/function.file-get-contents.php'>file_get_contents<\/a><\/li>\n<li>Ajax contextual help changes affected <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/wajax.js--------------------GETME' title='wajax.js'>wajax.js<\/a> (the generic Ajax Javascript code, and its vacant looking mate <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/nothing.js-------GETME' title='nothing.js'>nothing.js<\/a>) (changed as per <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/wordpress\/wajax.js--------------------GETME' title='wajax.js'>wajax.js<\/a> and <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/wordpress\/nothing.js-------GETME' title='nothing.js'>nothing.js<\/a>)<\/li>\n<\/ul>\n<p>We hope you try it (you&#8217;re here &#8230; <a href=# onclick=\"document.getElementById('avs').click();\" title=\"Visual Synopsis\">yoo hoo!<\/a>), and like it.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d17510' onclick='var dv=document.getElementById(\"d17510\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=SQL\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17510' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Think I am not alone in hankering for chances to &#8220;cut to the chase&#8221; when surfing the web, because, although there is great information out there, there can also be too much of it, and users appreciate ways to reduce &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-visual-synopsis-slideshow-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[151,429,652,932,997,1151,1319,1456],"class_list":["post-17510","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-blog","tag-file_get_contents","tag-javascript","tag-php","tag-programming","tag-slideshow","tag-tutorial","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17510"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=17510"}],"version-history":[{"count":16,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17510\/revisions"}],"predecessor-version":[{"id":17536,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17510\/revisions\/17536"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=17510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=17510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=17510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}