{"id":57589,"date":"2022-11-23T03:01:30","date_gmt":"2022-11-22T17:01:30","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=57589"},"modified":"2025-04-02T15:22:37","modified_gmt":"2025-04-02T05:22:37","slug":"animated-gif-imagemagick-cache-backup-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-imagemagick-cache-backup-tutorial\/","title":{"rendered":"Animated GIF ImageMagick Cache Backup Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated GIF ImageMagick Cache Backup Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/ttag_simulate_backup.gif\" title=\"Animated GIF ImageMagick Cache Backup Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Animated GIF ImageMagick Cache Backup Tutorial<\/p><\/div>\n<p>As a programmer, am sure am no &#8220;Robinson Crusoe&#8221; thinking that we wish more often the web browser cache would come to our rescue, especially when web server tidying up results in the &#8220;rug being pulled from under&#8221; a programmatical arrangement we code for.<\/p>\n<p>Improving on yesterday&#8217;s <a title='Animated GIF ImageMagick Commercial Considerations Tutorial' href='#agifimcct'>Animated GIF ImageMagick Commercial Considerations Tutorial<\/a> can be such a case.  Here&#8217;s the scenario for our ImageMagick <i>simulate<\/i> functionality &#8230;<\/p>\n<ol>\n<li>a popup window is opened initially just showing the first proposed animated GIF slide &#8230;<\/li>\n<li>in the background we program to get <a target=\"_blank\" title='ImageMagick' href='http:\/\/www.imagemagick.org' rel=\"noopener\">ImageMagick<\/a> to construct its animated GIF version of the slides, in total &#8230;<\/li>\n<li>in the case that there are no errors, the meta &#8220;refresh&#8221; popup window webpages (the contents for which exist on the web server and reference the IP address and web browser &#8220;brand&#8221;) continue to look for this ImageMagick animated GIF (the contents for which exist on the web server and whose name references the IP address and web browser &#8220;brand&#8221;), and if found &#8230;<\/li>\n<li>is represented within a details\/summary &#8220;reveal&#8221; part of that webpage &#8230; all continuing along until &#8230;<\/li>\n<li>eventually some &#8220;peer to peer&#8221; style PHP tidying up code may undermine the arrangement by deleting that popup window webpage (the contents for which exist on the web server and reference the IP address and web browser &#8220;brand&#8221;) and may rename the ImageMagick animated GIF (the contents for which exist on the web server and whose name references the IP address and web browser &#8220;brand&#8221;) to agif_slide.GIF should it be the latest ImageMagick animated GIF creation &#8230; at which point &#8230;<\/li>\n<li>before today, that would have always caused an error 404 (Page not found, and shown that way to the user) back at the RJM Programming&#8217;s (Apache\/PHP\/MySql Linux web server) Document Root 404.shtml webpage (as last discussed with <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/page-not-found-error-message-email-subject-tutorial\/' title='Page Not Found Error Message Email Subject Tutorial' rel=\"noopener\">Page Not Found Error Message Email Subject Tutorial<\/a>)<\/li>\n<\/ol>\n<p>So sad.  But picture this.  We add some PHP code up the top of our animated GIF creator PHP code, as per &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\nif (isset($_GET['wasip'])) {<br \/>\n  sleep(20);<br \/>\n  $ipis=str_replace('+',' ',urldecode($_GET['wasip']));<br \/>\n  if (strpos('~' . str_replace('+',' ',urldecode($_GET['wasip'])), '~' . server_remote_addr()) !== false) { $ipis=server_remote_addr();  }<br \/>\n  if (file_exists('agif_slide' . $ipis . '.gif')) { \/\/ && file_exists('lastrefreshsize.txt')) {<br \/>\n    \/\/$fsz='' . filesize('agif_slide' . str_replace('+',' ',urldecode($_GET['wasip'])) . '.gif');<br \/>\n    \/\/$fvs='~' . file_get_contents('lastrefreshsize.txt');<br \/>\n    \/\/if (strpos($fvs, '~' . $fsz . ' ') !== false) {<br \/>\n      \/\/if (strpos($fvs, str_replace('+',' ',urldecode($_GET['wasip']))) !== false) {<br \/>\n        echo \"&lt;html&gt;&lt;head&gt;&lt;!--meta http-equiv='Refresh' content=\\\"60; URL='.\/tutorial_to_animated_gif.php?wasip=\" . $_GET['wasip'] . \"'--&gt;&lt;\/head&gt;&lt;body&gt;&lt;img id=thisim src='.\/agif_slide\" . $ipis . \".gif'&gt;&lt;\/img&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n      \/\/}<br \/>\n    \/\/}<br \/>\n  } else if (file_exists('agif_slide' . $ipis . '.gif') && file_exists('lastrefreshsize.txt')) {<br \/>\n    $fsz='' . filesize('agif_slide' . $ipis . '.gif');<br \/>\n    $fvs='~' . file_get_contents('lastrefreshsize.txt');<br \/>\n    if (strpos($fvs, '~' . $fsz . ' ') !== false) {<br \/>\n      if (strpos($fvs, $ipis) !== false) {<br \/>\n        echo \"&lt;html&gt;&lt;head&gt;&lt;!--meta http-equiv='Refresh' content=\\\"60; URL='.\/tutorial_to_animated_gif.php?wasip=\" . $_GET['wasip'] . \"'--&gt;&lt;\/head&gt;&lt;body&gt;&lt;img id=thisim src='.\/agif_slide\" . $ipis . \".gif'&gt;&lt;\/img&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n      }<br \/>\n    }<br \/>\n  } else if (file_exists('agif_slide.GIF') && file_exists('lastrefreshsize.txt')) {<br \/>\n    $fsz='' . filesize('agif_slide.GIF');<br \/>\n    $fvs='~' . file_get_contents('lastrefreshsize.txt');<br \/>\n    if (strpos($fvs, '~' . $fsz . ' ') !== false) {<br \/>\n      if (strpos($fvs, $ipis) !== false) {<br \/>\n        echo \"&lt;html&gt;&lt;head&gt;&lt;!--meta http-equiv='Refresh' content=\\\"60; URL='.\/tutorial_to_animated_gif.php?wasip=\" . $_GET['wasip'] . \"'--&gt;&lt;\/head&gt;&lt;body&gt;&lt;img id=thisim src='.\/agif_slide.GIF'&gt;&lt;\/img&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  exit;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; called back at 404.shtml <font color=blue>as per the new Javascript<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n<br \/>\n  <font color=blue>var cbderrors='';<br \/>\n  var bih='';<\/font><br \/>\n<br \/>\n  if (document.URL.indexOf('.au\/drupal') != -1) {<br \/>\n   location.href='\/\/www.rjmprogramming.com.au\/drupal\/index.htm';<br \/>\n   exit;<br \/>\n  } <font color=blue>\/\/else if (document.URL.indexOf('PHP\/animegif\/outtemp') != -1 && document.URL.indexOf('irefresh=') != -1 && cbderrors == '') {<br \/>\n   \/\/location.href='\/PHP\/animegif\/tutorial_to_animated_gif.php?wasip=' + encodeURIComponent(document.URL.split('PHP\/animegif\/outtemp')[1].split('.htm')[0]) + '&toidea=' + encodeURIComponent('agif_slide.GIF');<br \/>\n   \/\/exit;<br \/>\n  \/\/}<\/font><br \/>\n<br \/>\n <font color=blue>function bitlaterdo() {<br \/>\n   if (document.URL.indexOf('PHP\/animegif\/outtemp') != -1 && document.URL.indexOf('irefresh=') != -1 && cbderrors == '') {<br \/>\n    location.href='\/PHP\/animegif\/tutorial_to_animated_gif.php?wasip=' + encodeURIComponent(document.URL.split('PHP\/animegif\/outtemp')[1].split('.htm')[0]) + '&toidea=' + encodeURIComponent('agif_slide.GIF');<br \/>\n    exit;<br \/>\n   } else if (document.URL.indexOf('PHP\/animegif\/outtemp') != -1 && document.URL.indexOf('irefresh=') != -1) {<br \/>\n    document.body.innerHTML=bih; \/\/document.body.style.visible='visible';<br \/>\n    document.body.style.cursor='pointer';<br \/>\n   }<br \/>\n }<\/font><br \/>\n<br \/>\n function onPageUnload() {<br \/>\n }<br \/>\n<br \/>\n function onPageLoad() {<br \/>\n  <font color=blue>if (document.URL.indexOf('PHP\/animegif\/outtemp') != -1 && document.URL.indexOf('irefresh=') != -1) {<br \/>\n    bih=document.body.innerHTML;<br \/>\n    document.body.innerHTML='&lt;p&gt;&amp;nbsp;&lt;br&gt;&amp;nbsp;&lt;br&gt;&amp;nbsp;&lt;br&gt;&amp;nbsp;&lt;br&gt;&amp;nbsp;&lt;br&gt;&amp;nbsp;&lt;br&gt;&amp;nbsp;&lt;br&gt;&amp;nbsp;&lt;br&gt;&amp;nbsp;&lt;br&gt;&amp;nbsp;&lt;br&gt;&lt;\/p&gt;';<br \/>\n    document.body.style.cursor='progress';<br \/>\n    setTimeout(bitlaterdo, 3000);<br \/>\n  }<\/font><br \/>\n  if (document.URL.indexOf('.au\/drupal') != -1) {<br \/>\n   location.href='\/\/www.rjmprogramming.com.au\/drupal\/index.htm';<br \/>\n   exit;<br \/>\n  }<br \/>\n  if (document.URL.indexOf('square_hr_tracing.htm%') != -1) {<br \/>\n   location.href=document.URL.replace('%3F','?').replace(\/\\%23\/g, '#').replace(\/\\%26\/g, '&');<br \/>\n   exit;<br \/>\n  }<br \/>\n }<br \/>\n<br \/>\n<font color=blue>function checkife(iois) {<br \/>\n  if (iois != null) {<br \/>\n    \/\/alert(1);<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    \/\/alert(11);<br \/>\n    if (aconto != null) {<br \/>\n    \/\/alert(111);<br \/>\n     if (aconto.document) { aconto = aconto.document; }<br \/>\n    \/\/alert(1111);<br \/>\n     if (aconto.body != null) {<br \/>\n    \/\/alert(2);<br \/>\n       \/\/if (aconto.body.innerHTML.indexOf('@ error\/') != -1) { cbderrors=aconto.body.innerHTML;  }<br \/>\n       if (aconto.body.innerHTML.indexOf('error') != -1) { cbderrors=aconto.body.innerHTML;  }<br \/>\n     }<br \/>\n    }<br \/>\n  }<br \/>\n}<\/font><br \/>\n&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and new HTML iframe, helping check for ImageMagick animated GIF creation errors (in which case, no redirections should take place) &#8230;<\/p>\n<p><code><br \/>\n&lt;iframe onload=checkife(this); src='\/PHP\/animegif\/cbd.cbd'&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; working with <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php---------------------------------------------------------------GETME' rel=\"noopener\">the changed<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php---------------------------------------------------------------GETME' rel=\"noopener\">tutorial_to_animated_gif.php<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php' rel=\"noopener\">our inhouse Animated GIF Creator helper PHP web application<\/a>.<\/p>\n<p>Then, as long as that 404.shtml proposed redirection timing hits on an existent ImageMagick animated GIF (in either filenaming guise) we can count on the web browser cache to help us out with this animated GIF display continuing (rather than seeing an error 404 Page not found display), even if further down the track the situation changes, again, with the contents of that agif_slide.GIF &#8220;latest ImageMagick animated GIF backup&#8221; arrangement, because the web browser cache is being used.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-imagemagick-cache-backup-tutorial\/' rel=\"noopener\">Animated GIF ImageMagick Cache Backup Tutorial<\/a>.<\/p-->\n<hr>\n<p id='agifimcct'>Previous relevant <a target=\"_blank\" title='Animated GIF ImageMagick Commercial Considerations Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-imagemagick-commercial-considerations-tutorial\/' rel=\"noopener\">Animated GIF ImageMagick Commercial Considerations Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated GIF ImageMagick Commercial Considerations Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/ttag_simulate_considerations.gif\" title=\"Animated GIF ImageMagick Commercial Considerations Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Animated GIF ImageMagick Commercial Considerations Tutorial<\/p><\/div>\n<p>Up to, and including yesterday&#8217;s <a title='Animated GIF Meta Refresh Simulation ImageMagick Switches Tutorial' href='#agifmrsimst'>Animated GIF Meta Refresh Simulation ImageMagick Switches Tutorial<\/a> our PHP code has assumed file naming logic that could be prematurely interrupted when any more than one user is using the ImageMagick <i>simulated<\/i> animated GIF creation logic, at the same time.<\/p>\n<p>This affects functionality in two categories of concern &#8230;<\/p>\n<ul>\n<li>shielding a user from seeing somebody else&#8217;s animated GIF creations, inadvertently, a commercial concern for a public web application <i>feeling live<\/i> in its functionality &#8230; extensively making use of a filename suffixing IP address and web browser &#8220;brand&#8221; based PHP function &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\nfunction server_remote_addr() {<br \/>\n    global $stfle;<br \/>\n    if (isset($_POST['nickz'])) { return str_replace('+',' ',urldecode($_POST['nickz'])); }<br \/>\n    $rma = $_SERVER['REMOTE_ADDR'];<br \/>\n    $ua = strtolower($_SERVER['HTTP_USER_AGENT']);<br \/>\n    \/\/ you can add different browsers with the same way ..<br \/>\n    if(preg_match('\/(chromium)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '000000'.$rma;<br \/>\n    elseif(preg_match('\/(chrome)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '00000'.$rma;<br \/>\n    elseif(preg_match('\/(safari)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '0000'.$rma;<br \/>\n    elseif(preg_match('\/(opera)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '000'.$rma;<br \/>\n    elseif(preg_match('\/(msie)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '00'.$rma;<br \/>\n    elseif(preg_match('\/(mozilla)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '0'.$rma;<br \/>\n    if (isset($_GET['outfile'])) {<br \/>\n      if (urldecode($_GET['outfile']) != \"\") {<br \/>\n        $stfle='&lt;input type=hidden name=outfile id=outfile value=\"' . urldecode($_GET['outfile']) . '\"&gt;&lt;\/input&gt; ';<br \/>\n        return urldecode($_GET['outfile']);<br \/>\n      }<br \/>\n    } else if (isset($_POST['outfile'])) {<br \/>\n      if (urldecode($_POST['outfile']) != \"\") {<br \/>\n        $stfle='&lt;input type=hidden name=outfile id=outfile value=\"' . urldecode($_POST['outfile']) . '\"&gt;&lt;\/input&gt; ';<br \/>\n        return urldecode($_POST['outfile']);<br \/>\n      }<br \/>\n    }<br \/>\n    return str_replace(\":\", \"_\", $rma);<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<br \/>\n &#8230; to differentiate user animated GIF related data and supervisory files &#8230; as well as &#8230;\n<\/li>\n<li>\n<ol>\n<li>from the RJM Programming domain point of view, tidying up unneeded files stored on the web server after a reasonable amount of time, in a <i>peer to peer<\/i> mode of operation &#8230;<\/li>\n<li>from the RJM Programming domain point of view, tidying up unneeded files stored on the web server after a reasonable amount of time, in an administrative mode of operation<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; the &#8220;peer to peer&#8221; mode of use calling on the same new PHP working of a new iframe &#8230; <font size=1>&lt;?php echo &#8220;<\/font><i>&lt;iframe src=&#8217;.\/tutorial_to_animated_gif.php?textcheck=&#8221; . rand(6754,57864455) . &#8220;&#8216; id=tciframe style=display:none; frameborder=0&gt;&lt;\/iframe&gt;<\/i><font size=1>&#8220;; ?&gt;<\/font> &#8230; and both modes using the same PHP code &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\nif (isset($_GET['textcheck'])) {<br \/>\n  sleep(30);<br \/>\n  $srais=server_remote_addr();<br \/>\n  if ($_GET['textcheck'] == \"all\") { $srais=\"*\"; }<br \/>\n  foreach (<a target=\"_blank\" title='PHP glob method information' href='http:\/\/php.net\/manual\/en\/function.glob.php' rel=\"noopener\">glob<\/a>('lastrefresh' . $srais . '.txt') as $giftxt) {<br \/>\n   $md=filemtime($giftxt);<br \/>\n   if ($md) {<br \/>\n   if ((time() - $md) &gt; (86400 \/ 240)) { \/\/ Thanks to <a target=\"_blank\" title='https:\/\/techlister.com\/php\/delete-files-older-than-x-days-in-php\/' href='https:\/\/techlister.com\/php\/delete-files-older-than-x-days-in-php\/' rel=\"noopener\">https:\/\/techlister.com\/php\/delete-files-older-than-x-days-in-php\/<\/a><br \/>\n     unlink($giftxt);<br \/>\n   }<br \/>\n   }<br \/>\n  }<br \/>\n  foreach (glob('outtemp' . $srais . '*.htm') as $giftxt) {<br \/>\n   $md=filemtime($giftxt);<br \/>\n   if ($md) {<br \/>\n   if ((time() - $md) &gt; (86400 \/ 240)) { \/\/ Thanks to https:\/\/techlister.com\/php\/delete-files-older-than-x-days-in-php\/<br \/>\n     unlink($giftxt);<br \/>\n   }<br \/>\n   }<br \/>\n  }<br \/>\n  foreach (glob(\".\/agif_slide\" . $srais . \"*.gif\") as $gifcf) {<br \/>\n   $md=filemtime($gifcf);<br \/>\n   if ($md) {<br \/>\n   if ((time() - $md) &gt; (86400 \/ 240)) { \/\/ Thanks to https:\/\/techlister.com\/php\/delete-files-older-than-x-days-in-php\/<br \/>\n  if (file_exists(\"agif_slide.GIF\")) {<br \/>\n  unlink(\"agif_slide.GIF\");<br \/>\n  }<br \/>\n  \/\/rename(\"agif_slide\" . server_remote_addr() . \".gif\", \"agif_slide.GIF\");<br \/>\n  rename($gifcf, \"agif_slide.GIF\");<br \/>\n\/\/     unlink($gifcf);<br \/>\n   }<br \/>\n   }<br \/>\n  }<br \/>\n  \/\/if ($srais != \"*\") {<br \/>\n  \/\/echo \"&lt;html&gt;&lt;body onload=\\\"parent.document.getElementById('tciframe').src='.\/tutorial_to_animated_gif.php?textcheck=\" . rand(46563,64547657645) . \"';\\\"&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n  \/\/}<br \/>\n  exit;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; in both the &#8220;peer to peer&#8221; way and involved in the <a target=\"_blank\" title='crontab information from computerhope ... thanks' href='http:\/\/www.computerhope.com\/jargon\/c\/cron.htm' rel=\"noopener\">crontab<\/a>\/<a target=\"_blank\" title='Linux or unix curl information from computerhope' href='http:\/\/www.computerhope.com\/unix\/curl.htm' rel=\"noopener\">curl<\/a> &#8220;once a day&#8221; administrative mode of use scheduled command &#8230;<\/p>\n<p><code><br \/>\n06 3 * * * ksh -c 'curl \"ht<font color=black>tp:<\/font>\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php?textcheck=all\"'<br \/>\n<\/code><\/p>\n<p> &#8230; sweeping up those unnecessary files getting through the &#8220;peer to peer&#8221; <i>net<\/i> because the user closes the parent Animated GIF creator parent window (to the child ImageMagick animated GIF popup window) ahead of <font size=1>our programmatical<\/font> time in <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php--------------------------------------------------------------GETME' rel=\"noopener\">the changed<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php--------------------------------------------------------------GETME' rel=\"noopener\">tutorial_to_animated_gif.php<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php' rel=\"noopener\">our inhouse Animated GIF Creator helper PHP web application<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-imagemagick-commercial-considerations-tutorial\/' rel=\"noopener\">Animated GIF ImageMagick Commercial Considerations Tutorial<\/a>.<\/p-->\n<hr>\n<p id='agifmrsimst'>Previous relevant <a target=\"_blank\" title='Animated GIF Meta Refresh Simulation ImageMagick Switches Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-meta-refresh-simulation-imagemagick-switches-tutorial\/' rel=\"noopener\">Animated GIF Meta Refresh Simulation ImageMagick Switches Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated GIF Meta Refresh Simulation ImageMagick Switches Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/ttag_simulate_switches.jpg\" title=\"Animated GIF Meta Refresh Simulation ImageMagick Switches Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Animated GIF Meta Refresh Simulation ImageMagick Switches Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Animated GIF Meta Refresh Simulation Download Tutorial' href='#agifmrsdt'>Animated GIF Meta Refresh Simulation Download Tutorial<\/a> established a link to the great <a target=\"_blank\" title='ImageMagick' href='http:\/\/www.imagemagick.org' rel=\"noopener\">ImageMagick<\/a> command line &#8220;convert&#8221; product to <i>simulate<\/i> what an animated GIF might look like, ahead of creating it.  To us, this is a <i>software integration<\/i> &#8220;mini-project&#8221; that does not feel complete until the user can get into the <i>innards<\/i> of ImageMagick thinking by supplying their own <i>convert<\/i> command line switches.  Who knows, the animated GIF from this <i>simulate<\/i> phase could suit your purposes and be a downloadable product from all this?  If you&#8217;re happy, so are we, and we&#8217;ll all learn more about ImageMagick in the process, for sure!<\/p>\n<p>As far as that goes, we change the way that &#8220;Simulate&#8221; button works.  We have a variation on what we&#8217;ve so admired in the past with GUIs when they have a <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/combobox-sort-tutorial\/' title='ComboBox Sort Tutorial' rel=\"noopener\">ComboBox type of element arrangement<\/a> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n<font size=1>$simb=\"&amp;nbsp;<\/font>&lt;input id=isimulate onmouseover=presimulate(); type=button value=Simulate onclick=setTimeout(presimulate,2000); data-style=display:inline-block;&gt;&lt;\/input&gt;&lt;div id=dsimulate style=display:inline-block;&gt;&lt;\/div&gt;<font size=1>\";<\/font><br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p>For non-mobile we have an <i>onmouseover<\/i> event and for mobile we have a slightly delayed <i>onclick<\/i> event Javascript function call to get us to the new &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction presimulate() {<br \/>\n  document.getElementById('isimulate').style.display='none';<br \/>\n  document.getElementById('dsimulate').innerHTML='&lt;select id=ssimulate onclick=setTimeout(simulate,30000); onchange=fninetyfive(this);&gt;&lt;option value=\\\"\\\"&gt;Default ImageMagick switches ...&lt;\/option&gt;&lt;option value=\\\"95\\\"&gt;Quality 95&lt;\/option&gt;&lt;option value=\\\"75\\\"&gt;Quality 75&lt;\/option&gt;&lt;option value=\\\"45\\\"&gt;Quality 45&lt;\/option&gt;&lt;option value=\\\"15\\\"&gt;Quality 15&lt;\/option&gt;&lt;option value=\\\" \\\"&gt;You choose switches&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n  document.getElementById('dsimulate').style.display='inline-block';<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; effectively hiding that <i>display:inline-block<\/i> button, via making it <i>display:none<\/i> while creating the dropdown (going from <i>display:none<\/i> to <i>display:inline-block<\/i>) to slot into its position.  For that dropdown a further click may cause the defaults to be in play for further ImageMagick animated GIF creations in more than thirty seconds, else that arrangement is superceded via a user selection &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nvar ninetyfive='95';<br \/>\nvar snoway=false, owvisited=false, odref=null;<br \/>\n<br \/>\nfunction fninetyfive(ioso) {<br \/>\n if (ioso.value.trim() == '' && ioso.value == '') {<br \/>\n   ninetyfive='95';<br \/>\n   if (document.getElementById('ow') && document.getElementById('oh')) {<br \/>\n    if (owvisited && document.getElementById('ow').value.replace('-1','').trim() != '' && document.getElementById('oh').value.replace('-1','').trim() != '') {<br \/>\n      ninetyfive+=' -resize ' + document.getElementById('ow').value + ',' + document.getElementById('oh').value;<br \/>\n    }<br \/>\n   }<br \/>\n   snoway=false;<br \/>\n   simulate();<br \/>\n   snoway=true;<br \/>\n   document.getElementById('dsimulate').style.display='none';<br \/>\n   document.getElementById('isimulate').style.display='inline-block';<br \/>\n   return '';<br \/>\n } else if (ioso.value.trim() == '' && ioso.value != '') {<br \/>\n   if (document.getElementById('ow') && document.getElementById('oh')) {<br \/>\n    if (owvisited && document.getElementById('ow').value.replace('-1','').trim() != '' && document.getElementById('oh').value.replace('-1','').trim() != '') {<br \/>\n      ninetyfive+=' -resize ' + document.getElementById('ow').value + ',' + document.getElementById('oh').value;<br \/>\n    }<br \/>\n   }<br \/>\n   snoway=true;<br \/>\n   ninetyfive=prompt('Enter ImageMagick switches for creating an animated GIF starting with quality setting.  Some good information is at <a target=\"_blank\" title='https:\/\/legacy.imagemagick.org\/Usage\/resize\/' href='https:\/\/legacy.imagemagick.org\/Usage\/resize\/' rel=\"noopener\">https:\/\/legacy.imagemagick.org\/Usage\/resize\/<\/a>', ninetyfive);<br \/>\n   if (ninetyfive == null) {<br \/>\n     ninetyfive='95';<br \/>\n   if (document.getElementById('ow') && document.getElementById('oh')) {<br \/>\n    if (owvisited && document.getElementById('ow').value.replace('-1','').trim() != '' && document.getElementById('oh').value.replace('-1','').trim() != '') {<br \/>\n      ninetyfive+=' -resize ' + document.getElementById('ow').value + ',' + document.getElementById('oh').value;<br \/>\n    }<br \/>\n   }<br \/>\n   }<br \/>\n   snoway=false;<br \/>\n   simulate();<br \/>\n   snoway=true;<br \/>\n   document.getElementById('dsimulate').style.display='none';<br \/>\n   document.getElementById('isimulate').style.display='inline-block';<br \/>\n   return '';<br \/>\n }<br \/>\n ninetyfive=ioso.value;<br \/>\n   if (document.getElementById('ow') && document.getElementById('oh')) {<br \/>\n    if (owvisited && document.getElementById('ow').value.replace('-1','').trim() != '' && document.getElementById('oh').value.replace('-1','').trim() != '') {<br \/>\n      ninetyfive+=' -resize ' + document.getElementById('ow').value + ',' + document.getElementById('oh').value;<br \/>\n    }<br \/>\n   }<br \/>\n   snoway=false;<br \/>\n simulate();<br \/>\n   snoway=true;<br \/>\n document.getElementById('dsimulate').style.display='none';<br \/>\n document.getElementById('isimulate').style.display='inline-block';<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; from that dropdown to, perhaps, alter those default arrangements.  Either way, we arrive at the <i>simulate<\/i> Javascript function, along with its <a target=\"_blank\" title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29' rel=\"noopener\">Ajax<\/a>\/<a target=\"_blank\" title='FormData object information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/FormData' rel=\"noopener\">FormData<\/a> &#8220;friends&#8221; should the data be too large for GET argument logic &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nvar simhtmlis='';<br \/>\nvar gwowo=null;<br \/>\n<br \/>\nfunction simulate() {<br \/>\n  if (snoway) { snoway=false; return ''; }<br \/>\n  var isdatau=false;<br \/>\n  simhtmlis='';<br \/>\n  var mstart='';<br \/>\n  var nextif=2;<br \/>\n  var mend='';<br \/>\n  var metamid='name=\\\"mymeta\\\" ';<br \/>\n  var starti=1, startc='slideshow';<br \/>\n  var firstd=0, oned=0;<br \/>\n  var hid='hidden';<br \/>\n  if (document.URL.toLowerCase().indexOf('rjmprogramming.com.au\/') != -1 && document.getElementById('slideshow').value.indexOf('data:') == 0) {<br \/>\n     hid='hidden'; \/\/'visible';<br \/>\n  }<br \/>\n  if (document.getElementById('slideshow').value.trim() != '') {<br \/>\n    firstd=Math.max(1,eval((document.getElementById('delay').value.split('#')[0].split(';')[0].split('.')[0].substring(0,eval(-2 + eval('' + document.getElementById('delay').value.split('#')[0].split(';')[0].split('.')[0].length))) + '.' + document.getElementById('delay').value.split('#')[0].split(';')[0].split('.')[0].slice(-2)).replace(\/^\\.\/g,'0.').split('.')[0]));<br \/>\n    if (oned == 0) { oned=firstd; }<br \/>\n    if (ninetyfive.replace('95','') != '') {<br \/>\n    simhtmlis='&lt;html&gt;&lt;head&gt;&lt;title&gt;Simulate Animated GIF - RJM Programming - November, 2022&lt;\/title&gt;&lt;scr' + 'ipt type=text\/javascript&gt; var xswitches=\\\"\\\"; xswitches=\\\"switches=' + encodeURIComponent(encodeURIComponent(ninetyfive)) + '&\\\"; function imc() {  if (window.opener) { var ims=document.getElementsByTagName(\\\"img\\\"); var ihj=0; while (ihj &lt; ims.length) { if (ims[ihj].src.indexOf(\\\"data:_\\\") == 0) { ims[ihj].src=window.opener.document.getElementById(ims[ihj].src.split(\\\"data:_\\\")[1].split(\\\"_\\\")[0]).value.split(\\\"#\\\")[0]; } ihj=ihj + 1; } } } function togglemeta() { var stuff=\\\"\\\"; if (!location.hash) { stuff=\\\"#open\\\"; } document.head.querySelector(' + \\\"'\\\" + 'meta[name=\\\"mymeta\\\"]' + \\\"'\\\" + ').content = (document.head.querySelector(' + \\\"'\\\" + 'meta[name=\\\"mymeta\\\"]' + \\\"'\\\" + ').content + stuff).replace(\\\"#open\\\",\\\"`close\\\").replace(\\\"#close\\\",\\\"#open\\\").replace(\\\"`close\\\",\\\"#close\\\"); } function checkiif(iois) {  if (iois.src.indexOf(\\\".gif\\\") != -1) { if (iois != null) { var xaconto = (iois.contentWindow || iois.contentDocument); if (xaconto != null) { if (xaconto.document) { xaconto = xaconto.document; } if (xaconto.body != null) { if (xaconto.body.innerHTML.replace(' + \\\"'&gt;t&lt;\/h1&gt;&lt;\/td&gt;&lt;td&gt;&lt;h1','ot found'\\\" + ').indexOf(' + \\\"'ot found'\\\" + ') == -1) { if (eval(eval((\\\"\\\" + location.hash).length) % 5) == 0) { document.getElementById(\\\"myhr\\\").setAttribute(\\\"open\\\",\\\"open\\\"); } else { document.getElementById(\\\"myhr\\\").removeAttribute(\\\"open\\\"); } document.getElementById(\\\"myhr\\\").style.display=\\\"block\\\"; iois.style.display=\\\"block\\\"; iois.frameborder=\\\"1\\\"; } } } } } } function ttisrc() { document.getElementById(\\\"tti\\\").src = \\\".\/tutorial_\\\" + \\\"to_animated_gif.php?irefresh=&switches=' + encodeURIComponent(encodeURIComponent(ninetyfive)) + '&idelay=\\\" + document.getElementById(\\\"idelay\\\").value;  } function domymeta(jrf) { var lst=document.getElementById(\\\"myimg\\\").getAttribute(\\\"data-list\\\"); lst=lst + \\\",\\\" + lst.split(\\\",\\\")[0];  document.head.querySelector(' + \\\"'\\\" + 'meta[name=\\\"mymeta\\\"]' + \\\"'\\\" + ').content = document.getElementById(\\\"idelay\\\").value + \\\"; URL=\\\" + String.fromCharCode(39) + document.URL.split(\\\"?\\\")[0].split(\\\"#\\\")[0] + \\\"?\\\" + xswitches + \\\"irefresh=\\\" + lst.split(jrf)[1].split(\\\",\\\")[1] + (\\\"#\\\" + (location.hash ? location.hash : \\\"open\\\")).replace(\\\"##\\\",\\\"#\\\"); } function onl() { imc(); var irf=(location.search.split(\\\"irefresh=\\\")[1] ? decodeURIComponent(location.search.split(\\\"irefresh=\\\")[1].split(\\\"&\\\")[0]) : \\\"\\\"); if (document.URL.indexOf(\\\"?\\\") != -1 && irf == \\\"\\\") { location.href=document.URL.split(\\\"?\\\")[0];  } if (irf != \\\"\\\") { setTimeout(ttisrc, eval(910 * document.getElementById(\\\"idelay\\\").value)); if (irf.substring(0,5) == \\\"myimg\\\") {  document.getElementById(\\\"myimg\\\").src = document.getElementById(irf).src; } else { document.getElementById(\\\"myimg\\\").src = irf; } if (1 == 1) { domymeta(irf); } else if (document.URL.indexOf(\\\"?\\\") != -1) { location.href=document.URL.split(\\\"?\\\")[0];  } } document.getElementById(\\\"myimg\\\").style.visibility=\\\"visible\\\"; document.body.style.cursor=\\\"pointer\\\"; } &lt;\/scr' + 'ipt&gt;&lt;\/head&gt;&lt;body style=cursor:progress; onload=onl();&gt;&lt;input type=hidden id=idelay value=\\\"' + firstd + '\\\"&gt;&lt;\/input&gt;&lt;iframe style=display:none; id=tti src=&gt;&lt;\/iframe&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;details onclick=togglemeta(); style=display:none; id=myhr&gt;&lt;summary style=background-color:yellow;&gt;Downloadable Animated GIF version below ...&lt;\/summary&gt;&lt;img id=\\\"gifimg\\\" style=\\\"display:NONE;\\\" data-gif=\\\"\\\" src=\\\".\/agif_slide.GIF\\\"&gt;&lt;\/img&gt;&lt;br&gt;&lt;br&gt;&lt;hr title=Downloadable&gt;&lt;\/hr&gt;&lt;a id=myhra target=_top download=agif_slide.gif style=width:100%;height:900px;background-color:#e0e0e0; id=dttiag href=' + \\\"'.\/agif_slide.gif'\\\" + '&gt;&lt;iframe frameborder=0 onload=checkiif(this); style=display:none;width:100%;height:900px; id=ttiag src=\\\".\/agif_slide.gif?rand=' + Math.floor(Math.random() * 19867543) + '\\\"&gt;&lt;\/iframe&gt;&lt;br&gt;&lt;\/a&gt;&lt;\/details&gt;&lt;\/body&gt;&lt;\/html&gt;';<br \/>\n    } else {<br \/>\n    simhtmlis='&lt;html&gt;&lt;head&gt;&lt;title&gt;Simulate Animated GIF - RJM Programming - November, 2022&lt;\/title&gt;&lt;scr' + 'ipt type=text\/javascript&gt; function imc() {  if (window.opener) { var ims=document.getElementsByTagName(\\\"img\\\"); var ihj=0; while (ihj &lt; ims.length) { if (ims[ihj].src.indexOf(\\\"data:_\\\") == 0) { ims[ihj].src=window.opener.document.getElementById(ims[ihj].src.split(\\\"data:_\\\")[1].split(\\\"_\\\")[0]).value.split(\\\"#\\\")[0]; } ihj=ihj + 1; } } } function togglemeta() { var stuff=\\\"\\\"; if (!location.hash) { stuff=\\\"#open\\\"; } document.head.querySelector(' + \\\"'\\\" + 'meta[name=\\\"mymeta\\\"]' + \\\"'\\\" + ').content = (document.head.querySelector(' + \\\"'\\\" + 'meta[name=\\\"mymeta\\\"]' + \\\"'\\\" + ').content + stuff).replace(\\\"#open\\\",\\\"`close\\\").replace(\\\"#close\\\",\\\"#open\\\").replace(\\\"`close\\\",\\\"#close\\\"); } function checkiif(iois) {  if (iois.src.indexOf(\\\".gif\\\") != -1) { if (iois != null) { var xaconto = (iois.contentWindow || iois.contentDocument); if (xaconto != null) { if (xaconto.document) { xaconto = xaconto.document; } if (xaconto.body != null) { if (xaconto.body.innerHTML.replace(' + \\\"'&gt;t&lt;\/h1&gt;&lt;\/td&gt;&lt;td&gt;&lt;h1','ot found'\\\" + ').indexOf(' + \\\"'ot found'\\\" + ') == -1) { if (eval(eval((\\\"\\\" + location.hash).length) % 5) == 0) { document.getElementById(\\\"myhr\\\").setAttribute(\\\"open\\\",\\\"open\\\"); } else { document.getElementById(\\\"myhr\\\").removeAttribute(\\\"open\\\"); } document.getElementById(\\\"myhr\\\").style.display=\\\"block\\\"; iois.style.display=\\\"block\\\"; iois.frameborder=\\\"1\\\"; } } } } } } function ttisrc() { document.getElementById(\\\"tti\\\").src = \\\".\/tutorial_\\\" + \\\"to_animated_gif.php?irefresh=&idelay=\\\" + document.getElementById(\\\"idelay\\\").value;  } function domymeta(jrf) { var lst=document.getElementById(\\\"myimg\\\").getAttribute(\\\"data-list\\\"); lst=lst + \\\",\\\" + lst.split(\\\",\\\")[0];  document.head.querySelector(' + \\\"'\\\" + 'meta[name=\\\"mymeta\\\"]' + \\\"'\\\" + ').content = document.getElementById(\\\"idelay\\\").value + \\\"; URL=\\\" + String.fromCharCode(39) + document.URL.split(\\\"?\\\")[0].split(\\\"#\\\")[0] + \\\"?irefresh=\\\" + lst.split(jrf)[1].split(\\\",\\\")[1] + (\\\"#\\\" + (location.hash ? location.hash : \\\"open\\\")).replace(\\\"##\\\",\\\"#\\\"); } function onl() { imc(); var irf=(location.search.split(\\\"irefresh=\\\")[1] ? decodeURIComponent(location.search.split(\\\"irefresh=\\\")[1].split(\\\"&\\\")[0]) : \\\"\\\"); if (document.URL.indexOf(\\\"?\\\") != -1 && irf == \\\"\\\") { location.href=document.URL.split(\\\"?\\\")[0];  } if (irf != \\\"\\\") { setTimeout(ttisrc, eval(910 * document.getElementById(\\\"idelay\\\").value)); if (irf.substring(0,5) == \\\"myimg\\\") {  document.getElementById(\\\"myimg\\\").src = document.getElementById(irf).src; } else { document.getElementById(\\\"myimg\\\").src = irf; } if (1 == 1) { domymeta(irf); } else if (document.URL.indexOf(\\\"?\\\") != -1) { location.href=document.URL.split(\\\"?\\\")[0];  } } document.getElementById(\\\"myimg\\\").style.visibility=\\\"visible\\\"; document.body.style.cursor=\\\"pointer\\\"; } &lt;\/scr' + 'ipt&gt;&lt;\/head&gt;&lt;body style=cursor:progress; onload=onl();&gt;&lt;input type=hidden id=idelay value=\\\"' + firstd + '\\\"&gt;&lt;\/input&gt;&lt;iframe style=display:none; id=tti src=&gt;&lt;\/iframe&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;details onclick=togglemeta(); style=display:none; id=myhr&gt;&lt;summary style=background-color:yellow;&gt;Downloadable Animated GIF version below ...&lt;\/summary&gt;&lt;img id=\\\"gifimg\\\" style=\\\"display:NONE;\\\" data-gif=\\\"\\\" src=\\\".\/agif_slide.GIF\\\"&gt;&lt;\/img&gt;&lt;br&gt;&lt;br&gt;&lt;hr title=Downloadable&gt;&lt;\/hr&gt;&lt;a id=myhra target=_top download=agif_slide.gif style=width:100%;height:900px;background-color:#e0e0e0; id=dttiag href=' + \\\"'.\/agif_slide.gif'\\\" + '&gt;&lt;iframe frameborder=0 onload=checkiif(this); style=display:none;width:100%;height:900px; id=ttiag src=\\\".\/agif_slide.gif?rand=' + Math.floor(Math.random() * 19867543) + '\\\"&gt;&lt;\/iframe&gt;&lt;br&gt;&lt;\/a&gt;&lt;\/details&gt;&lt;\/body&gt;&lt;\/html&gt;';<br \/>\n    }<br \/>\n    while (document.getElementById(startc)) {<br \/>\n      if (document.getElementById(startc).value.trim() != '') {<br \/>\n        isdatau=false;<br \/>\n        if (document.getElementById(startc).value.split('#')[0].indexOf('data:') == 0) {<br \/>\n          isdatau=true;<br \/>\n          simhtmlis=simhtmlis.replace('&lt;\/body&gt;', '&lt;img id=\\\"myimg' + nextif + '\\\" src=\\\"' + document.getElementById(startc).value.split('#')[0] + '\\\" style=display:none;&gt;&lt;\/img&gt;&lt;\/body&gt;');<br \/>\n        }<br \/>\n        if (startc == 'slideshow') {<br \/>\n        if (isdatau) {<br \/>\n        simhtmlis=simhtmlis.replace('&lt;\/input&gt;', '&lt;\/input&gt;&lt;img id=\\\"myimg\\\" style=visibility:' + hid + '; data-list=\\\"myimg' + nextif + '\\\" src=\\\"' + document.getElementById(startc).value.split('#')[0] + '\\\"&gt;&lt;\/img&gt;');<br \/>\n        hid='hidden';<br \/>\n        } else {<br \/>\n        simhtmlis=simhtmlis.replace('&lt;\/input&gt;', '&lt;\/input&gt;&lt;img id=\\\"myimg\\\" style=visibility:' + hid + '; data-list=\\\"' + document.getElementById(startc).value.split('#')[0] + '\\\" src=\\\"' + document.getElementById(startc).value.split('#')[0] + '\\\"&gt;&lt;\/img&gt;');<br \/>\n        hid='hidden';<br \/>\n        }<br \/>\n        } else {<br \/>\n        if (isdatau) {<br \/>\n        simhtmlis=simhtmlis.replace('\\\" src=\\\"', ',myimg' + nextif + '\\\" src=\\\"');<br \/>\n        simhtmlis=simhtmlis.replace('&lt;\/head&gt;', '&lt;' + mstart + 'meta ' + metamid + 'http-equiv=\\\"Refresh\\\" content=\\\"' + firstd + '; URL=' + String.fromCharCode(39) + '.\/tutorial_to_animated_gif.php?irefresh=myimg' + nextif + (location.hash ? location.hash : \\\"#open\\\") + String.fromCharCode(39) + '\\\"' + mend + '&gt;&lt;\/head&gt;');<br \/>\n        } else {<br \/>\n        simhtmlis=simhtmlis.replace('\\\" src=\\\"', ',' + document.getElementById(startc).value.split('#')[0] + '\\\" src=\\\"');<br \/>\n        simhtmlis=simhtmlis.replace('&lt;\/head&gt;', '&lt;' + mstart + 'meta ' + metamid + 'http-equiv=\\\"Refresh\\\" content=\\\"' + firstd + '; URL=' + String.fromCharCode(39) + '.\/tutorial_to_animated_gif.php?irefresh=' + document.getElementById(startc).value.split('#')[0] + (location.hash ? location.hash : \\\"#open\\\") + String.fromCharCode(39) + '\\\"' + mend + '&gt;&lt;\/head&gt;');<br \/>\n        }<br \/>\n        mstart='!--';<br \/>\n        mend='--';<br \/>\n        metamid='';<br \/>\n        firstd=firstd + oned;<br \/>\n        }<br \/>\n        nextif++;<br \/>\n      }<br \/>\n      starti++;<br \/>\n      startc='slideshow' + starti;<br \/>\n    }<br \/>\n  }<br \/>\n  dosim();<br \/>\n}<br \/>\n<br \/>\n  function mshowStuff(evt) {<br \/>\n  if (iizhr.readyState == 4) {<br \/>\n    console.log('iizhr.readyState=' + iizhr.readyState);<br \/>\n    console.log('iizhr.status=' + iizhr.status + ' and iizhr.responseText.length=' + iizhr.responseText.length);<br \/>\n    if (iizhr.status == 200) {<br \/>\n     if (iizhr.responseText.trim() != '' && eval('' + iizhr.responseText.length) &lt; 200) {<br \/>\n       if (!odref) { odref=setInterval(defreshit, 60000); }<br \/>\n       gwowo=window.open(iizhr.responseText, '_blank', 'left=10,top=10,width=800,height=800');<br \/>\n     } else {<br \/>\n       var ms='';<br \/>\n       var ims=2;<br \/>\n       while (document.getElementById('slideshow' + ms)) {<br \/>\n       \/\/alert('slideshow' + ms);<br \/>\n       \/\/if (simhtmlis.indexOf(document.getElementById('slideshow' + ms).value.split('#')[0]) == -1 && document.getElementById('slideshow' + ms).value.indexOf('data:') == 0) {<br \/>\n       \/\/ alert(document.getElementById('slideshow' + ms).value);<br \/>\n       \/\/}<br \/>\n       while (simhtmlis.indexOf(document.getElementById('slideshow' + ms).value.split('#')[0]) != -1 && document.getElementById('slideshow' + ms).value.indexOf('data:') == 0) {<br \/>\n       \/\/alert('simhtmlis length before ' + simhtmlis.length);<br \/>\n        simhtmlis=simhtmlis.replace(document.getElementById('slideshow' + ms).value.split('#')[0], 'data:_slideshow' + ms + '_');<br \/>\n       \/\/alert('simhtmlis length after ' + simhtmlis.length);<br \/>\n       }<br \/>\n       ms='' + ims;<br \/>\n       ims++;<br \/>\n       }<br \/>\n       \/\/alert(iizhr.responseText);<br \/>\n       \/\/var wowo=window.open('', '_blank', 'left=10,top=10,width=800,height=800');<br \/>\n       \/\/wowo.document.write(iizhr.responseText.replace(\/tutorial_to_animated_gif\\.php\/g, 'outtemp.htm'));<br \/>\n       \/\/       if (!odref) { odref=setInterval(defreshit, 60000); }<br \/>\n       dosim(); \/\/mshowagain();<br \/>\n     }<br \/>\n    }<br \/>\n  }<br \/>\n  }<br \/>\n<br \/>\nfunction dosim() {<br \/>\n  if (simhtmlis != '') {<br \/>\n   if (eval('' + ('.\/tutorial_to_animated_gif.php?refresh=' + encodeURIComponent(simhtmlis)).length) &lt; 900) {<br \/>\n   \/\/var wos=window.open('','_blank','left=10,top=10,width=800,height=800');<br \/>\n   \/\/wos.document.write(simhtmlis);<br \/>\n       if (!odref) { odref=setInterval(defreshit, 60000); }<br \/>\n   if (ninetyfive.replace('95','') != '') {<br \/>\n   window.open('.\/tutorial_to_animated_gif.php?refresh=' + encodeURIComponent(simhtmlis) + '&switches=' + encodeURIComponent(ninetyfive), '_blank','left=10,top=10,width=800,height=800');<br \/>\n   } else {<br \/>\n   window.open('.\/tutorial_to_animated_gif.php?refresh=' + encodeURIComponent(simhtmlis), '_blank','left=10,top=10,width=800,height=800');<br \/>\n   }<br \/>\n   } else {<br \/>\n   \/\/alert('Cannot do yet.');<br \/>\n  iizhr = new XMLHttpRequest();<br \/>\n  iizform=new FormData();<br \/>\n  if (ninetyfive.replace('95','') != '') {<br \/>\n   iizform.append('switches', ninetyfive);<br \/>\n  }<br \/>\n  iizform.append('refresh', simhtmlis);<br \/>\n  iizhr.open('post', '.\/tutorial_to_animated_gif.php', true);<br \/>\n  iizhr.onreadystatechange = mshowStuff;<br \/>\n  iizhr.send(iizform);<br \/>\n  \/\/alert('Take a look.');<br \/>\n  }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; ImageMagick &#8220;switch&#8221; maintenance logic made use of in recall logic <font color=blue>such as<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n  $isofar=0;<br \/>\n  <font color=blue>$ninetyfive=\"95\";<br \/>\n  if (isset($_GET['switches'])) {<br \/>\n    $pgs=\"\";<br \/>\n    if (strlen(trim($_GET['switches'])) > 0) {<br \/>\n      $pgs=str_replace('+',' ',urldecode($_GET['switches']));<br \/>\n      $pres=trim(explode(\"-\", $pgs)[0]);<br \/>\n      if ($pres == \"\") {<br \/>\n       $ninetyfive.=\" \" . $pgs;<br \/>\n      } else {<br \/>\n       $ninetyfive=$pgs;<br \/>\n      }<br \/>\n    }<br \/>\n  }<\/font><br \/>\n  if ($isofar == 0) {<br \/>\n  foreach (glob(tmpidea(sys_get_temp_dir() . DIRECTORY_SEPARATOR) . \"agifslide*.*\") as $dggfilename) {<br \/>\n       if (!$sparegifdone) {<br \/>\n         $sparegifdone=true;<br \/>\n         if (file_exists(dirname(__FILE__) . DIRECTORY_SEPARATOR . \"agif_slide.gif\")) {<br \/>\n         unlink(dirname(__FILE__) . DIRECTORY_SEPARATOR . \"agif_slide.gif\");<br \/>\n         }<br \/>\n         \/\/file_put_contents('nn.95', $ninetyfive);<br \/>\n         if (file_exists(\"\/usr\/local\/cpanel\/3rdparty\/bin\/convert\")) {<br \/>\n         exec(\"\/usr\/local\/cpanel\/3rdparty\/bin\/convert -delay \" . trim($dly) . \"0 \" . tmpidea(sys_get_temp_dir() . DIRECTORY_SEPARATOR) . \"agifslide*.* -quality <font color=blue>\" . $ninetyfive . \"<\/font> \" . dirname(__FILE__) . DIRECTORY_SEPARATOR . \"agif_slide.gif\");<br \/>\n         } else if (PHP_OS == \"Darwin\") {<br \/>\n         \/\/file_put_contents('cbo.cbo', \"\/usr\/local\/bin\/convert -delay \" . trim($dly) . \"0 \" . tmpidea(sys_get_temp_dir() . DIRECTORY_SEPARATOR) . \"agifslide*.* -quality <font color=blue>\" . $ninetyfive . \"<\/font> \" . dirname(__FILE__) . DIRECTORY_SEPARATOR . \"agif_slide.gif\");<br \/>\n         exec(\"\/usr\/local\/bin\/convert -delay \" . trim($dly) . \"0 \" . tmpidea(sys_get_temp_dir() . DIRECTORY_SEPARATOR) . \"agifslide*.* -quality \" . $ninetyfive . \" \" . dirname(__FILE__) . DIRECTORY_SEPARATOR . \"agif_slide.gif > \" . dirname(__FILE__) . DIRECTORY_SEPARATOR . \"cok.cok 2> \" . dirname(__FILE__) . DIRECTORY_SEPARATOR . \"cbd.cbd\");<br \/>\n         } else {<br \/>\n         exec(\"magick.exe -delay \" . trim($dly) . \"0 \" . tmpidea(sys_get_temp_dir() . DIRECTORY_SEPARATOR) . \"agifslide*.* -quality <font color=blue>\" . $ninetyfive . \"<\/font> \" . dirname(__FILE__) . DIRECTORY_SEPARATOR . \"agif_slide.gif\");<br \/>\n         }<br \/>\n       }<br \/>\n       unlink($dggfilename);<br \/>\n  }<br \/>\n  }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p>Again, you can revisit animated GIF creation via <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-------------------------------------------------------------GETME' rel=\"noopener\">the changed<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-------------------------------------------------------------GETME' rel=\"noopener\">tutorial_to_animated_gif.php<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php' rel=\"noopener\">our inhouse Animated GIF Creator helper PHP web application<\/a>, to see what we mean.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/new-animated-gif-meta-refresh-simulation-download-tutorial\/' rel=\"noopener\">New Animated GIF Meta Refresh Simulation Download Tutorial<\/a>.<\/p-->\n<hr>\n<p id='agifmrsdt'>Previous relevant <a target=\"_blank\" title='Animated GIF Meta Refresh Simulation Download Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-meta-refresh-simulation-download-tutorial\/' rel=\"noopener\">Animated GIF Meta Refresh Simulation Download Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated GIF Meta Refresh Simulation Download Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/ttag_simulate_downloadable.jpg\" title=\"Animated GIF Meta Refresh Simulation Download Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Animated GIF Meta Refresh Simulation Download Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='Animated GIF Meta Refresh Simulation Tutorial' href='#agifmrst'>Animated GIF Meta Refresh Simulation Tutorial<\/a> additional Simulation functionality, for your smaller image datasets we offer, today &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" title='ImageMagick' href='http:\/\/www.imagemagick.org' rel=\"noopener\">ImageMagick<\/a> <i>preview<\/i> downloadable animated GIF (sped up)<br \/>\n<\/code><\/p>\n<p> &#8230; achieved via macOS or Linux command like &#8230;<\/p>\n<p><code><br \/>\nconvert -delay 10 -quality 95 \/tmp\/agifslide*.* .\/agif_slide.gif<br \/>\n<\/code><\/p>\n<p> &#8230; means by which ImageMagick can take slides and construct an animated GIF, shown to the user under the other image slide display within a <a target=\"_blank\" title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp' rel=\"noopener\">details<\/a>\/<a target=\"_blank\" title='HTML summary tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp' rel=\"noopener\">summary<\/a> &#8220;reveal&#8221; scenario, the status of which is remembered between the meta &#8220;refresh&#8221; webpage reloadings.  This being a composite image resultant file, it can be downloaded.  And did you know, from there, at least on macOS, to open that downloaded animated GIF via <a target=\"_blank\" href='https:\/\/support.apple.com\/en-au\/guide\/preview\/welcome\/mac' title='macOS Preview info' rel=\"noopener\">Preview<\/a>, will show a PDF whose slides are those that go to make up the animated GIF?  Open it with other ideas and you&#8217;re more likely to see the animated GIF, animated.<\/p>\n<p>You can revisit animated GIF creation via <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php------------------------------------------------------------GETME' rel=\"noopener\">the changed<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php------------------------------------------------------------GETME' rel=\"noopener\">tutorial_to_animated_gif.php<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php' rel=\"noopener\">our inhouse Animated GIF Creator helper PHP web application<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-meta-refresh-simulation-download-tutorial\/' rel=\"noopener\">Animated GIF Meta Refresh Simulation Download Tutorial<\/a>.<\/p-->\n<hr>\n<p id='agifmrst'>Previous relevant <a target=\"_blank\" title='Animated GIF Meta Refresh Simulation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-meta-refresh-simulation-tutorial\/' rel=\"noopener\">Animated GIF Meta Refresh Simulation Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated GIF Meta Refresh Simulation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/ttag_simulate.jpg\" title=\"Animated GIF Meta Refresh Simulation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Animated GIF Meta Refresh Simulation Tutorial<\/p><\/div>\n<p>With <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/webpage-meta-refresh-primer-tutorial\/' rel=\"noopener\">Webpage Meta Refresh Primer Tutorial<\/a> we used an HTML meta &#8220;refresh&#8221; tag as a means to navigate HTML data.  You can add arguments here whereby the data you are dealing with does not have to be thought of as &#8220;vanilla HTML&#8221;.  Supposing we wanted to navigate in this way, and be amending image data?!  Well, the animated GIF creator web application of <a title='Video to Amended Animated GIF Mobile Slide Swap Tutorial' href='#vaagifmsst'>Video to Amended Animated GIF Mobile Slide Swap Tutorial<\/a> could benefit from the use of this HTML meta &#8220;refresh&#8221; tag means by which we can take a set of images, along with a &#8220;delay&#8221; value, and simulate the look of the animated GIF ahead of time, in a new window &#8230; like a &#8220;preview&#8221; if you will, before creating any animated GIFs, as such.<\/p>\n<p>We needed to set up the &#8220;recall&#8221; PHP logic, as per &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\nif (isset($_GET['irefresh'])) {<br \/>\n  $lrc=\"\";<br \/>\n  if (file_exists('lastrefresh.txt')) {<br \/>\n    $lrc=@file_get_contents('lastrefresh.txt');<br \/>\n    if (strpos($lrc, '~!~') !== false) { \/\/ && strpos($lrc, str_replace('   ',' + ',str_replace('+',' ',urldecode($_GET['irefresh'])))) !== false) {<br \/>\n    \/\/file_put_contents('cmn.cmn', explode('~!~', $lrc)[0]);<br \/>\n    if (!file_exists(explode('~!~', $lrc)[0])) {<br \/>\n      if (trim(explode('~!~', $lrc)[0]) == '') {<br \/>\n  $htis=explode('~!~', $lrc)[1];<br \/>\n  if (strpos($htis, \"URL='\") !== false) {<br \/>\n    $hts=explode(\"URL='\", $htis);<br \/>\n    for ($ikm=1; $ikm&lt;sizeof($hts); $ikm++) {<br \/>\n      if (strpos(explode(\"'\", $hts[$ikm])[0], ' ') !== false) {<br \/>\n        $htis=str_replace(explode(\"'\", $hts[$ikm])[0], str_replace(' ','+',explode(\"'\", $hts[$ikm])[0]), $htis);<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  if (strpos($htis, ' data-list=\"') !== false) {<br \/>\n    $hts=explode(' data-list=\"', $htis);<br \/>\n    for ($ikm=1; $ikm&lt;sizeof($hts); $ikm++) {<br \/>\n      if (strpos(explode('\"', $hts[$ikm])[0], ' ') !== false) {<br \/>\n        $htis=str_replace(explode('\"', $hts[$ikm])[0], str_replace(' ','+',explode(\"'\", $hts[$ikm])[0]), $htis);<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  if (strpos($htis, ' src=\"') !== false) {<br \/>\n    $hts=explode(' src=\"', $htis);<br \/>\n    for ($ikm=1; $ikm&lt;sizeof($hts); $ikm++) {<br \/>\n      if (strpos(explode('\"', $hts[$ikm])[0], ' ') !== false) {<br \/>\n        $htis=str_replace(explode('\"', $hts[$ikm])[0], str_replace(' ','+',explode(\"'\", $hts[$ikm])[0]), $htis);<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n    <br \/>\n  $suff=\"\";<br \/>\n  $isuff=1;<br \/>\n  $fnis=\"outtemp\";<br \/>\n  $fidea=$fnis . $suff . \".htm\";<br \/>\n  while (file_exists($fidea)) {<br \/>\n    $suff='' . $isuff;<br \/>\n    $fidea=$fnis . $suff . \".htm\";<br \/>\n    $isuff++;<br \/>\n  }<br \/>\n  $dy=\"\";<br \/>\n  $ldy=\"\";<br \/>\n  $irf=\"\";<br \/>\n  if (strpos($htis, ' src=\"') !== false) {<br \/>\n    $irf='?irefresh' . rand(1,6754345) . '=' . (explode('\"', explode(' src=\"', $htis)[1])[0]);<br \/>\n  }<br \/>\n  if (strpos($htis, ' content=\"') !== false) {<br \/>\n    $dy=explode('\"', explode(';', explode(' content=\"', $htis)[1])[0])[0];<br \/>\n    $ldy=explode('\"', explode(';', explode(' content=\"', $htis)[-1 + sizeof(explode(' content=\"', $htis))])[0])[0];<br \/>\n  }<br \/>\n  if ($dy != \"\") {<br \/>\n  file_put_contents($fidea, str_replace('tutorial_to_animated_gif.php',$fidea,str_replace(\"&lt;\/head&gt;\", \"&lt;meta http-equiv='Refresh' content='\" . ($ldy + $dy) . \"; URL=.\/\" . $fidea . $irf . \"'&gt;\\n&lt;\/head&gt;\", $htis)));<br \/>\n  } else {<br \/>\n  file_put_contents($fidea, str_replace('tutorial_to_animated_gif.php',$fidea,$htis));<br \/>\n  }<br \/>\n  $_SESSION['refreshname']=$fidea;<br \/>\n  $_SESSION['refreshcontents']=file_get_contents($fidea);<br \/>\n  file_put_contents('lastrefresh.txt', $_SESSION['refreshname'] . '~!~' . $_SESSION['refreshcontents']);<br \/>\n<br \/>\n      file_put_contents($fidea, $htis);<br \/>\n      } else {<br \/>\n      file_put_contents(explode('~!~', $lrc)[0], explode('~!~', $lrc)[1]);<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n  if (isset($_SESSION['refreshname']) && isset($_SESSION['refreshcontents'])) {<br \/>\n    \/\/file_put_contents('amn.amn', $_SESSION['refreshname']);<br \/>\n    if (!file_exists($_SESSION['refreshname'])) {<br \/>\n      file_put_contents($_SESSION['refreshname'], $_SESSION['refreshcontents']);<br \/>\n    }<br \/>\n  } else if (file_exists('lastrefresh.txt')) {<br \/>\n    $lrc=@file_get_contents('lastrefresh.txt');<br \/>\n    if (strpos($lrc, '~!~') !== false) { \/\/ && strpos($lrc, str_replace('   ',' + ',str_replace('+',' ',urldecode($_GET['irefresh'])))) !== false) {<br \/>\n    \/\/file_put_contents('bmn.bmn', explode('~!~', $lrc)[0]);<br \/>\n    if (!file_exists(explode('~!~', $lrc)[0])) {<br \/>\n      file_put_contents(explode('~!~', $lrc)[0], explode('~!~', $lrc)[1]);<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n  if (strlen($_GET['irefresh']) &gt; 0) {<br \/>\n  echo \"&lt;html&gt;&lt;body&gt;&lt;img id=myimg src='\" . str_replace('   ',' + ',str_replace('+',' ',urldecode($_GET['irefresh']))) . \"'&gt;&lt;\/img&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n  } else if (isset($_GET['idelay'])) {<br \/>\n  \/\/sleep($_GET['idelay']);<br \/>\n  $isofar=0;<br \/>\n  while ($isofar &lt; $_GET['idelay']) {<br \/>\n  if (file_exists('lastrefresh.txt')) {<br \/>\n    $lrc=@file_get_contents('lastrefresh.txt');<br \/>\n    if (strpos($lrc, '~!~') !== false) { \/\/ && strpos($lrc, str_replace('   ',' + ',str_replace('+',' ',urldecode($_GET['irefresh'])))) !== false) {<br \/>\n    \/\/file_put_contents('dmn.dmn', explode('~!~', $lrc)[0]);<br \/>\n    if (!file_exists(explode('~!~', $lrc)[0])) {<br \/>\n      file_put_contents(explode('~!~', $lrc)[0], explode('~!~', $lrc)[1]);<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n  sleep(1);<br \/>\n  $isofar++;<br \/>\n  }<br \/>\n  }<br \/>\n  exit;<br \/>\n} else if (isset($_GET['refresh'])) {<br \/>\n  session_start();<br \/>\n  $htis=str_replace('   ',' + ',str_replace('+',' ',urldecode($_GET['refresh'])));<br \/>\n  if (strpos($htis, \"URL='\") !== false) {<br \/>\n    $hts=explode(\"URL='\", $htis);<br \/>\n    for ($ikm=1; $ikm&lt;sizeof($hts); $ikm++) {<br \/>\n      if (strpos(explode(\"'\", $hts[$ikm])[0], ' ') !== false) {<br \/>\n        $htis=str_replace(explode(\"'\", $hts[$ikm])[0], str_replace(' ','+',explode(\"'\", $hts[$ikm])[0]), $htis);<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  if (strpos($htis, ' data-list=\"') !== false) {<br \/>\n    $hts=explode(' data-list=\"', $htis);<br \/>\n    for ($ikm=1; $ikm&lt;sizeof($hts); $ikm++) {<br \/>\n      if (strpos(explode('\"', $hts[$ikm])[0], ' ') !== false) {<br \/>\n        $htis=str_replace(explode('\"', $hts[$ikm])[0], str_replace(' ','+',explode(\"'\", $hts[$ikm])[0]), $htis);<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  if (strpos($htis, ' src=\"') !== false) {<br \/>\n    $hts=explode(' src=\"', $htis);<br \/>\n    for ($ikm=1; $ikm&lt;sizeof($hts); $ikm++) {<br \/>\n      if (strpos(explode('\"', $hts[$ikm])[0], ' ') !== false) {<br \/>\n        $htis=str_replace(explode('\"', $hts[$ikm])[0], str_replace(' ','+',explode(\"'\", $hts[$ikm])[0]), $htis);<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  $suff=\"\";<br \/>\n  $isuff=1;<br \/>\n  $fnis=\"outtemp\";<br \/>\n  $fidea=$fnis . $suff . \".htm\";<br \/>\n  while (file_exists($fidea)) {<br \/>\n    $suff='' . $isuff;<br \/>\n    $fidea=$fnis . $suff . \".htm\";<br \/>\n    $isuff++;<br \/>\n  }<br \/>\n  $dy=\"\";<br \/>\n  $ldy=\"\";<br \/>\n  $irf=\"\";<br \/>\n  if (strpos($htis, ' src=\"') !== false) {<br \/>\n    $irf='?irefresh' . rand(1,6754345) . '=' . (explode('\"', explode(' src=\"', $htis)[1])[0]);<br \/>\n  }<br \/>\n  if (strpos($htis, ' content=\"') !== false) {<br \/>\n    $dy=explode('\"', explode(';', explode(' content=\"', $htis)[1])[0])[0];<br \/>\n    $ldy=explode('\"', explode(';', explode(' content=\"', $htis)[-1 + sizeof(explode(' content=\"', $htis))])[0])[0];<br \/>\n  }<br \/>\n  if ($dy != \"\") {<br \/>\n  file_put_contents($fidea, str_replace('tutorial_to_animated_gif.php',$fidea,str_replace(\"&lt;\/head&gt;\", \"&lt;meta http-equiv='Refresh' content='\" . ($ldy + $dy) . \"; URL=.\/\" . $fidea . $irf . \"'&gt;\\n&lt;\/head&gt;\", $htis)));<br \/>\n  } else {<br \/>\n  file_put_contents($fidea, str_replace('tutorial_to_animated_gif.php',$fidea,$htis));<br \/>\n  }<br \/>\n  $_SESSION['refreshname']=$fidea;<br \/>\n  $_SESSION['refreshcontents']=file_get_contents($fidea);<br \/>\n  file_put_contents('lastrefresh.txt', $_SESSION['refreshname'] . '~!~' . $_SESSION['refreshcontents']);<br \/>\n  header('Location: .\/' . $fidea);<br \/>\n  exit;<br \/>\n} else if (isset($_POST['refresh'])) {<br \/>\n  session_start();<br \/>\n  $htis=str_replace('   ',' + ',str_replace('+',' ',urldecode($_POST['refresh'])));<br \/>\n  if (strpos($htis, \"URL='\") !== false) {<br \/>\n    $hts=explode(\"URL='\", $htis);<br \/>\n    for ($ikm=1; $ikm&lt;sizeof($hts); $ikm++) {<br \/>\n      if (strpos(explode(\"'\", $hts[$ikm])[0], ' ') !== false) {<br \/>\n        $htis=str_replace(explode(\"'\", $hts[$ikm])[0], str_replace(' ','+',explode(\"'\", $hts[$ikm])[0]), $htis);<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  if (strpos($htis, ' data-list=\"') !== false) {<br \/>\n    $hts=explode(' data-list=\"', $htis);<br \/>\n    for ($ikm=1; $ikm&lt;sizeof($hts); $ikm++) {<br \/>\n      if (strpos(explode('\"', $hts[$ikm])[0], ' ') !== false) {<br \/>\n        $htis=str_replace(explode('\"', $hts[$ikm])[0], str_replace(' ','+',explode(\"'\", $hts[$ikm])[0]), $htis);<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  if (strpos($htis, ' src=\"') !== false) {<br \/>\n    $hts=explode(' src=\"', $htis);<br \/>\n    for ($ikm=1; $ikm&lt;sizeof($hts); $ikm++) {<br \/>\n      if (strpos(explode('\"', $hts[$ikm])[0], ' ') !== false) {<br \/>\n        $htis=str_replace(explode('\"', $hts[$ikm])[0], str_replace(' ','+',explode(\"'\", $hts[$ikm])[0]), $htis);<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  $suff=\"\";<br \/>\n  $isuff=1;<br \/>\n  $fnis=\"outtemp\";<br \/>\n  $fidea=$fnis . $suff . \".htm\";<br \/>\n  while (file_exists($fidea)) {<br \/>\n    $suff='' . $isuff;<br \/>\n    $fidea=$fnis . $suff . \".htm\";<br \/>\n    $isuff++;<br \/>\n  }<br \/>\n  $dy=\"\";<br \/>\n  $ldy=\"\";<br \/>\n  $irf=\"\";<br \/>\n  if (strpos($htis, ' src=\"') !== false) {<br \/>\n    $irf='?irefresh' . rand(1,6754345) . '=' . (explode('\"', explode(' src=\"', $htis)[1])[0]);<br \/>\n  }<br \/>\n  if (strpos($htis, ' content=\"') !== false) {<br \/>\n    $dy=explode('\"', explode(';', explode(' content=\"', $htis)[1])[0])[0];<br \/>\n    $ldy=explode('\"', explode(';', explode(' content=\"', $htis)[-1 + sizeof(explode(' content=\"', $htis))])[0])[0];<br \/>\n  }<br \/>\n  if ($dy != \"\") {<br \/>\n  file_put_contents($fidea, str_replace('tutorial_to_animated_gif.php',$fidea,str_replace(\"&lt;\/head&gt;\", \"&lt;meta http-equiv='Refresh' content='\" . ($ldy + $dy) . \"; URL=.\/\" . $fidea . $irf . \"'&gt;\\n&lt;\/head&gt;\", $htis)));<br \/>\n  } else {<br \/>\n  file_put_contents($fidea, str_replace('tutorial_to_animated_gif.php',$fidea,$htis));<br \/>\n  }<br \/>\n  $_SESSION['refreshname']=$fidea;<br \/>\n  $_SESSION['refreshcontents']=file_get_contents($fidea);<br \/>\n  file_put_contents('lastrefresh.txt', $_SESSION['refreshname'] . '~!~' . $_SESSION['refreshcontents']);<br \/>\n  echo $fidea;<br \/>\n  \/\/header('Location: .\/' . $fidea);<br \/>\n  exit;<br \/>\n} else if (isset($_GET['defresh'])) {<br \/>\n  if (1 == 1) {<br \/>\n  foreach (glob(\"outtemp*.htm\") as $dggfilename) {<br \/>\n       unlink($dggfilename);<br \/>\n  }<br \/>\n  } else {<br \/>\n  $doit=true;<br \/>\n  \/\/while ($doit) {<br \/>\n  $suff=\"\";<br \/>\n  $isuff=1;<br \/>\n  $fnis=\"outtemp\";<br \/>\n  $fidea=$fnis . $suff . \".htm\";<br \/>\n  while (file_exists($fidea)) {<br \/>\n    unlink($fidea);<br \/>\n    $suff='' . $isuff;<br \/>\n    $fidea=$fnis . $suff . \".htm\";<br \/>\n    $isuff++;<br \/>\n  }<br \/>\n  \/\/sleep(60);<br \/>\n  \/\/if (file_exists('lastrefresh.txt')) {<br \/>\n  \/\/  $lrc=@file_get_contents('lastrefresh.txt');<br \/>\n  \/\/  if (strpos($lrc, '~!~') !== false) { \/\/ && strpos($lrc, str_replace('   ',' + ',str_replace('+',' ',urldecode($_GET['irefresh'])))) !== false) {<br \/>\n  \/\/  file_put_contents('emn.emn', explode('~!~', $lrc)[0]);<br \/>\n  \/\/  if (!file_exists(explode('~!~', $lrc)[0])) {<br \/>\n  \/\/    $doit=false;<br \/>\n  \/\/    unlink('lastrefresh.txt');<br \/>\n  \/\/  }<br \/>\n  \/\/  }<br \/>\n  \/\/}<br \/>\n  \/\/}<br \/>\n  }<br \/>\n  exit;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; supplied by a new PHP written Javascript function simulate() as per &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction defreshit() {<br \/>\n  document.getElementById('xxxlocit').src='.\/tutorial_to_animated_gif.php?defresh=&rand=' + Math.floor(Math.random() * 198767564);<br \/>\n}<br \/>\n<br \/>\nfunction simulate() {<br \/>\n  var isdatau=false;<br \/>\n  var simhtmlis='';<br \/>\n  var mstart='';<br \/>\n  var nextif=2;<br \/>\n  var mend='';<br \/>\n  var metamid='name=\\\"mymeta\\\" ';<br \/>\n  var starti=1, startc='slideshow';<br \/>\n  var firstd=0, oned=0;;<br \/>\n  if (document.getElementById('slideshow').value.trim() != '') {<br \/>\n    firstd=Math.max(1,eval((document.getElementById('delay').value.split('#')[0].split(';')[0].split('.')[0].substring(0,eval(-2 + eval('' + document.getElementById('delay').value.split('#')[0].split(';')[0].split('.')[0].length))) + '.' + document.getElementById('delay').value.split('#')[0].split(';')[0].split('.')[0].slice(-2)).replace(\/^\\.\/g,'0.').split('.')[0]));<br \/>\n    if (oned == 0) { oned=firstd; }<br \/>\n    simhtmlis='&lt;html&gt;&lt;head&gt;&lt;title&gt;Simulate Animated GIF - RJM Programming - November, 2022&lt;\/title&gt;&lt;scr' + 'ipt type=text\/javascript&gt; function ttisrc() { document.getElementById(\\\"tti\\\").src=\\\".\/tutorial_\\\" + \\\"to_animated_gif.php?irefresh=&idelay=\\\" + document.getElementById(\\\"idelay\\\").value;  } function domymeta(jrf) { var lst=document.getElementById(\\\"myimg\\\").getAttribute(\\\"data-list\\\"); lst=lst + \\\",\\\" + lst.split(\\\",\\\")[0];  document.head.querySelector(' + \\\"'\\\" + 'meta[name=\\\"mymeta\\\"]' + \\\"'\\\" + ').content = document.getElementById(\\\"idelay\\\").value + \\\"; URL=\\\" + String.fromCharCode(39) + document.URL.split(\\\"?\\\")[0].split(\\\"#\\\")[0] + \\\"?irefresh=\\\" + lst.split(jrf)[1].split(\\\",\\\")[1];  } function onl() { var irf=(location.search.split(\\\"irefresh=\\\")[1] ? decodeURIComponent(location.search.split(\\\"irefresh=\\\")[1].split(\\\"&\\\")[0]) : \\\"\\\"); if (document.URL.indexOf(\\\"?\\\") != -1 && irf == \\\"\\\") { location.href=document.URL.split(\\\"?\\\")[0];  } if (irf != \\\"\\\") { setTimeout(ttisrc, eval(910 * document.getElementById(\\\"idelay\\\").value)); if (irf.substring(0,5) == \\\"myimg\\\") {  document.getElementById(\\\"myimg\\\").src=document.getElementById(irf).src; } else { document.getElementById(\\\"myimg\\\").src=irf; } if (1 == 1) { domymeta(irf); } else if (document.URL.indexOf(\\\"?\\\") != -1) { location.href=document.URL.split(\\\"?\\\")[0];  } } } &lt;\/scr' + 'ipt&gt;&lt;\/head&gt;&lt;body onload=onl();&gt;&lt;input type=hidden id=idelay value=\\\"' + firstd + '\\\"&gt;&lt;\/input&gt;&lt;iframe style=display:none; id=tti src=&gt;&lt;\/iframe&gt;&lt;\/body&gt;&lt;\/html&gt;';<br \/>\n    while (document.getElementById(startc)) {<br \/>\n      if (document.getElementById(startc).value.trim() != '') {<br \/>\n        isdatau=false;<br \/>\n        if (document.getElementById(startc).value.split('#')[0].indexOf('data:') == 0) {<br \/>\n          isdatau=true;<br \/>\n          simhtmlis=simhtmlis.replace('&lt;\/body&gt;', '&lt;img id=\\\"myimg' + nextif + '\\\" src=\\\"' + document.getElementById(startc).value.split('#')[0] + '\\\" style=display:none;&gt;&lt;\/img&gt;&lt;\/body&gt;');<br \/>\n        }<br \/>\n        if (startc == 'slideshow') {<br \/>\n        if (isdatau) {<br \/>\n        simhtmlis=simhtmlis.replace('&lt;\/body&gt;', '&lt;img id=\\\"myimg\\\" data-list=\\\"myimg' + nextif + '\\\" src=\\\"' + document.getElementById(startc).value.split('#')[0] + '\\\"&gt;&lt;\/img&gt;&lt;\/body&gt;');<br \/>\n        } else {<br \/>\n        simhtmlis=simhtmlis.replace('&lt;\/body&gt;', '&lt;img id=\\\"myimg\\\" data-list=\\\"' + document.getElementById(startc).value.split('#')[0] + '\\\" src=\\\"' + document.getElementById(startc).value.split('#')[0] + '\\\"&gt;&lt;\/img&gt;&lt;\/body&gt;');<br \/>\n        }<br \/>\n        } else {<br \/>\n        if (isdatau) {<br \/>\n        simhtmlis=simhtmlis.replace('\\\" src=\\\"', ',myimg' + nextif + '\\\" src=\\\"');<br \/>\n        simhtmlis=simhtmlis.replace('&lt;\/head&gt;', '&lt;' + mstart + 'meta ' + metamid + 'http-equiv=\\\"Refresh\\\" content=\\\"' + firstd + '; URL=' + String.fromCharCode(39) + '.\/tutorial_to_animated_gif.php?irefresh=myimg' + nextif + String.fromCharCode(39) + '\\\"' + mend + '&gt;&lt;\/head&gt;');<br \/>\n        } else {<br \/>\n        simhtmlis=simhtmlis.replace('\\\" src=\\\"', ',' + document.getElementById(startc).value.split('#')[0] + '\\\" src=\\\"');<br \/>\n        simhtmlis=simhtmlis.replace('&lt;\/head&gt;', '&lt;' + mstart + 'meta ' + metamid + 'http-equiv=\\\"Refresh\\\" content=\\\"' + firstd + '; URL=' + String.fromCharCode(39) + '.\/tutorial_to_animated_gif.php?irefresh=' + document.getElementById(startc).value.split('#')[0] + String.fromCharCode(39) + '\\\"' + mend + '&gt;&lt;\/head&gt;');<br \/>\n        }<br \/>\n        mstart='!--';<br \/>\n        mend='--';<br \/>\n        metamid='';<br \/>\n        firstd=firstd + oned;<br \/>\n        }<br \/>\n        nextif++;<br \/>\n      }<br \/>\n      starti++;<br \/>\n      startc='slideshow' + starti;<br \/>\n    }<br \/>\n  }<br \/>\n  if (simhtmlis != '') {<br \/>\n   if (eval('' + ('.\/tutorial_to_animated_gif.php?refresh=' + encodeURIComponent(simhtmlis)).length) &lt; 900) {<br \/>\n   \/\/var wos=window.open('','_blank','left=10,top=10,width=800,height=800');<br \/>\n   \/\/wos.document.write(simhtmlis);<br \/>\n   window.open('.\/tutorial_to_animated_gif.php?refresh=' + encodeURIComponent(simhtmlis), '_blank','left=10,top=10,width=800,height=800');<br \/>\n   setInterval(defreshit, 60000);<br \/>\n   } else {<br \/>\n   \/\/alert('Cannot do yet.');<br \/>\n  iizhr = new XMLHttpRequest();<br \/>\n  iizform=new FormData();<br \/>\n  iizform.append('refresh', simhtmlis);<br \/>\n  iizhr.open('post', '.\/tutorial_to_animated_gif.php?xxx=' + Math.floor(Math.random() * 198756432), true);<br \/>\n  iizhr.onreadystatechange = mshowStuff;<br \/>\n  iizhr.send(iizform);<br \/>\n  \/\/alert('Take a look.');<br \/>\n  }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; for <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-----------------------------------------------------------GETME' rel=\"noopener\">the changed<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-----------------------------------------------------------GETME' rel=\"noopener\">tutorial_to_animated_gif.php<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php' rel=\"noopener\">our inhouse Animated GIF Creator helper PHP web application<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-meta-refresh-simulation-tutorial\/' rel=\"noopener\">Animated GIF Meta Refresh Simulation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='vaagifmsst'>Previous relevant <a target=\"_blank\" title='Video to Amended Animated GIF Mobile Slide Swap Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/video-to-amended-animated-gif-mobile-slide-swap-tutorial\/' rel=\"noopener\">Video to Amended Animated GIF Mobile Slide Swap Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Video to Amended Animated GIF Mobile Slide Swap Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif_mobile.jpg\" title=\"Video to Amended Animated GIF Mobile Slide Swap Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Video to Amended Animated GIF Mobile Slide Swap Tutorial<\/p><\/div>\n<p>The &#8220;drag&#8221; about yesterday&#8217;s <a title='Video to Amended Animated GIF Drag Slide Swap Tutorial' href='#vaagifdsst'>Video to Amended Animated GIF Drag Slide Swap Tutorial<\/a>&#8216;s slide swapping functionality was that mobile platforms were left out.  Sometimes there is no alternative modus operandi to offer a mobile user, but here, we did not need to &#8230;<\/p>\n<ul>\n<li>simulate drag and drop with double clicking kind of logic &#8230; but, rather, just &#8230;<\/li>\n<li>simulate drag and drop with single clicking kind of logic &#8230; and so, also not restrict the swapping to adjoining slides &#8230; via new &#8220;onclick&#8221; Javascript function logic &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction mspanhover(elmnt) {<br \/>\n  if (spanso.length == 0) {<br \/>\n    if (dragto.length == 0) {<br \/>\n      dragto.push(elmnt.id.replace('ours',''));<br \/>\n    } else {<br \/>\n      dragto[0]=elmnt.id.replace('ours','');<br \/>\n    }<br \/>\n    if (document.getElementById(('slideshow' + dragto[0]).replace(\/slideshow1$\/g,'slideshow')).value != '') {<br \/>\n      spanso.push(elmnt);<br \/>\n    }<br \/>\n  } else if (spanso.length == 1) {<br \/>\n    if (elmnt.id != spanso[0].id) {<br \/>\n    if (dragfrom.length == 0) {<br \/>\n      dragfrom.push(elmnt.id.replace('ours',''));<br \/>\n    } else {<br \/>\n      dragfrom[0]=elmnt.id.replace('ours','');<br \/>\n    }<br \/>\n    if (document.getElementById(('slideshow' + dragfrom[0]).replace(\/slideshow1$\/g,'slideshow')).value != '') {<br \/>\n        var yesdoit=confirm('Swap Image ' + dragto[0] + ' for Image ' + dragfrom[0] + ' content?');<br \/>\n        if (yesdoit) {<br \/>\n          var fromx=document.getElementById(('slideshow' + dragto[0]).replace(\/slideshow1$\/g,'slideshow')).value;<br \/>\n          var tox=document.getElementById(('slideshow' + dragfrom[0]).replace(\/slideshow1$\/g,'slideshow')).value;<br \/>\n          document.getElementById(('slideshow' + dragto[0]).replace(\/slideshow1$\/g,'slideshow')).value=tox;<br \/>\n          document.getElementById(('slideshow' + dragfrom[0]).replace(\/slideshow1$\/g,'slideshow')).value=fromx;<br \/>\n          var inthis=document.getElementById(('slideshow' + dragto[0]).replace(\/slideshow1$\/g,'slideshow'));<br \/>\n          inthis.style.color='black';<br \/>\n          inthis.style.opacity='1.0';<br \/>\n          inthis.style.background='';<br \/>\n          inthis.style.border='';<br \/>\n          inthis.style.outset='';<br \/>\n          inthis=document.getElementById(('slideshow' + dragfrom[0]).replace(\/slideshow1$\/g,'slideshow'));<br \/>\n          inthis.style.color='black';<br \/>\n          inthis.style.opacity='1.0';<br \/>\n          inthis.style.background='';<br \/>\n          inthis.style.border='';<br \/>\n          inthis.style.outset='';<br \/>\n        }<br \/>\n        spanso=[];<br \/>\n        dragfrom=[];<br \/>\n        dragto=[];<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;\n<\/li>\n<\/ul>\n<p>Which, of course, begs the question, why not apply &#8220;single clicking kind of logic&#8221; for non-mobile platforms?<\/p>\n<blockquote><p>\nIrresistible arguments.  Well presented.  Joy to have in the class.\n<\/p><\/blockquote>\n<p>And so, is there any role going forward for the drag logic?<\/p>\n<blockquote><p>\nInteresting argument.  But there are users who love drag and drop.\n<\/p><\/blockquote>\n<p>And so, for those non-mobile users we allow the two approaches to co-exist.  One thing we do for mobile platforms, alone, though, is to set the &#8220;text-decoration&#8221; (CSS) styling of those &#8220;Tutorial Slideshow&#8221; elements be set to &#8220;underline&#8221; to make up for the lack of a span title attribute the user would see on a non-mobile platform as they hover over that span element for <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php----------------------------------------------------------GETME' rel=\"noopener\">the changed<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php----------------------------------------------------------GETME' rel=\"noopener\">tutorial_to_animated_gif.php<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php' rel=\"noopener\">our inhouse Animated GIF Creator helper PHP web application<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/video-to-amended-animated-gif-mobile-slide-swap-tutorial\/' rel=\"noopener\">Video to Amended Animated GIF Drag Slide Swap Tutorial<\/a>.<\/p-->\n<hr>\n<p id='vaagifdsst'>Previous relevant <a target=\"_blank\" title='Video to Amended Animated GIF Drag Slide Swap Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/video-to-amended-animated-gif-drag-slide-swap-tutorial\/' rel=\"noopener\">Video to Amended Animated GIF Drag Slide Swap Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Video to Amended Animated GIF Drag Slide Swap Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif_drag_swap.jpg\" title=\"Video to Amended Animated GIF Drag Slide Swap Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Video to Amended Animated GIF Drag Slide Swap Tutorial<\/p><\/div>\n<p>Today&#8217;s work improving on yesterday&#8217;s <a title='Video to Amended Animated GIF Alignment Tutorial' href='#vaagifat'>Video to Amended Animated GIF Alignment Tutorial<\/a>, has, yet again, alas, only a non-mobile platform applicability, that being &#8230;<\/p>\n<blockquote><p>\nDrag and Drop\n<\/p><\/blockquote>\n<p> &#8230; methodologies to allow for Animated GIF slide swaps with an adjoining slide (slot) <a href='#vtaagspt'>because<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/video-to-amended-animated-gif-slide-preview-tutorial'><p>\nThe reason we think those non-mobile users will enjoy this functionality, if anything like me, is that we might browse for images in a sorted bunch and assume all is well, but that order may not suit in the animated GIF order structure, and here is a mechanism that might help.\n<\/p><\/blockquote>\n<p>We got great help from <a target=\"_blank\" href='https:\/\/www.w3schools.com\/howto\/howto_js_draggable.asp' title='How To Create a Draggable HTML Element' rel=\"noopener\">How To Create a Draggable HTML Element<\/a> (by <a target=\"_blank\" href='https:\/\/www.w3schools.com\/' title='W3Schools' rel=\"noopener\">W3Schools<\/a>), thanks, piecing together the (PHP writes) Javascript benefitting from yesterday&#8217;s work lining up the &#8220;Tutorial Slideshow&#8221; span ( now including <i>onmouseover=spanhover(this); onmouseout=spanunhover(this);<\/i> ) elements over to the left of the webpage, with &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n var dragfrom=[];<br \/>\n var dragto=[];<br \/>\n<br \/>\nfunction spanhover(elmnt) {<br \/>\n  var srectz=null, srecty=null, srectx=null, sifilter=null;<br \/>\n  if (1 == 1) {<br \/>\n  if (document.getElementById('y' + elmnt.id)) {<br \/>\n    srecty=document.getElementById('y' + elmnt.id).getBoundingClientRect();<br \/>\n  }<br \/>\n  if (document.getElementById('z' + elmnt.id)) {<br \/>\n    srectz=document.getElementById('z' + elmnt.id).getBoundingClientRect();<br \/>\n    srectx=document.getElementById('x' + elmnt.id).getBoundingClientRect();<br \/>\n    sifilter=document.getElementById('x' + elmnt.id).getBoundingClientRect();<br \/>\n    document.getElementById('z' + elmnt.id).style.position='absolute';<br \/>\n    \/\/document.getElementById('z' + elmnt.id).style.left='' + srectz.left + 'px';<br \/>\n    document.getElementById('x' + elmnt.id).style.position='absolute';<br \/>\n    \/\/document.getElementById('x' + elmnt.id).style.left='' + srectx.left + 'px';<br \/>\n    document.getElementById('ifilter').style.position='absolute';<br \/>\n    \/\/document.getElementById('ifilter').style.left='' + sifilter.left + 'px';<br \/>\n  }<br \/>\n  if (document.getElementById('y' + elmnt.id)) {<br \/>\n    document.getElementById('y' + elmnt.id).style.position='absolute';<br \/>\n    \/\/document.getElementById('y' + elmnt.id).style.left='' + srecty.left + 'px';<br \/>\n    document.getElementById('y' + elmnt.id).style.color='blue';<br \/>\n  }<br \/>\n  }<br \/>\n  elmnt.style.opacity='0.5';<br \/>\n  elmnt.title='You can swap (or drag) this image content one down or up';<br \/>\n  elmnt.style.position='absolute';<br \/>\n  dragElement(elmnt);<br \/>\n}<br \/>\n<br \/>\nfunction spanunhover(elmnt) {<br \/>\n  if (1 == 1) {<br \/>\n  if (document.getElementById('z' + elmnt.id)) {<br \/>\n    document.getElementById('z' + elmnt.id).style.position='relative';<br \/>\n    document.getElementById('x' + elmnt.id).style.position='relative';<br \/>\n    document.getElementById('ifilter').style.position='relative';<br \/>\n  }<br \/>\n  if (document.getElementById('y' + elmnt.id)) {<br \/>\n    document.getElementById('y' + elmnt.id).style.position='relative';<br \/>\n    document.getElementById('y' + elmnt.id).style.color='black';<br \/>\n  }<br \/>\n  }<br \/>\n  elmnt.style.opacity='1.0';<br \/>\n  elmnt.style.position='relative';<br \/>\n  elmnt.title='';<br \/>\n  elmnt.onmousedown=function(evt){ evt=evt; };<br \/>\n  elmnt.onmouseup=function(evt){ evt=evt; };<br \/>\n  elmnt.onmousemove=function(evt){ evt=evt; };<br \/>\n}<br \/>\n<br \/>\nfunction dragElement(elmnt) {  \/\/ thanks to https:\/\/www.w3schools.com\/howto\/howto_js_draggable.asp<br \/>\n  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;<br \/>\n  if (document.getElementById(elmnt.id + 'header')) {<br \/>\n    \/\/ if present, the header is where you move the DIV from:<br \/>\n    document.getElementById(elmnt.id + 'eader').onmousedown = dragMouseDown;<br \/>\n  } else {<br \/>\n    \/\/ otherwise, move the DIV from anywhere inside the DIV:<br \/>\n    elmnt.onmousedown = dragMouseDown;<br \/>\n    if (dragfrom.length == 1) {<br \/>\n      closeDragElement();<br \/>\n      \/\/if (('dragfrom[0]=' + dragfrom[0] + ' and dragto[0]=' + dragto[0]).length &lt;= 40) {<br \/>\n      \/\/alert('dragfrom[0]=' + dragfrom[0] + ' and dragto[0]=' + dragto[0]);<br \/>\n      \/\/ \/\/dragfrom[0]=eval('' + elmnt.target.id.replace('ours',''));<br \/>\n      \/\/}<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  function dragMouseDown(e) {<br \/>\n    e = e || window.event;<br \/>\n    e.preventDefault();<br \/>\n    \/\/ get the mouse cursor position at startup:<br \/>\n    pos3 = e.clientX;<br \/>\n    pos4 = e.clientY;<br \/>\n    document.onmouseup = closeDragElement;<br \/>\n    \/\/ call a function whenever the cursor moves:<br \/>\n    document.onmousemove = elementDrag;<br \/>\n  }<br \/>\n<br \/>\n  function elementDrag(e) {<br \/>\n    e = e || window.event;<br \/>\n    e.preventDefault();<br \/>\n    \/\/ calculate the new cursor position:<br \/>\n    if (e.clientX) {<br \/>\n    pos1 = pos3 - e.clientX;<br \/>\n    pos2 = pos4 - e.clientY;<br \/>\n    pos3 = e.clientX;<br \/>\n    pos4 = e.clientY;<br \/>\n    } else if (e.pageX) {<br \/>\n    pos1 = pos3 - e.pageX;<br \/>\n    pos2 = pos4 - e.pageY;<br \/>\n    pos3 = e.pageX;<br \/>\n    }<br \/>\n    \/\/ set the element new position:<br \/>\n    if (eval('' + pos2) &gt; 0) {<br \/>\n    if (dragfrom.length == 0) {<br \/>\n      dragfrom.push(eval('' + e.target.id.replace('ours','')));<br \/>\n      dragto.push(eval(1 + eval('' + e.target.id.replace('ours',''))));<br \/>\n    } else {<br \/>\n      dragfrom[0]=eval('' + e.target.id.replace('ours',''));<br \/>\n      dragto[0]=eval(1 + eval('' + e.target.id.replace('ours','')));<br \/>\n    }<br \/>\n    \/\/alert('heading south');<br \/>\n    } else if (eval('' + pos2) &lt; 0) {<br \/>\n    \/\/alert('heading north');<br \/>\n    if (dragfrom.length == 0) {<br \/>\n      dragfrom.push(eval('' + e.target.id.replace('ours','')));<br \/>\n      dragto.push(eval(-1 + eval('' + e.target.id.replace('ours',''))));<br \/>\n    } else {<br \/>\n      dragfrom[0]=eval('' + e.target.id.replace('ours',''));<br \/>\n      dragto[0]=eval(-1 + eval('' + e.target.id.replace('ours','')));<br \/>\n    }<br \/>\n    } else if (1 == 3) {<br \/>\n    elmnt.style.top = (elmnt.offsetTop - pos2) + 'px';<br \/>\n    elmnt.style.left = (elmnt.offsetLeft - pos1) + 'px';<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  function closeDragElement() {<br \/>\n    \/\/ stop moving when mouse button is released:<br \/>\n    if (dragfrom.length != 0) {<br \/>\n      if (document.getElementById('ours' + dragto[0])) {<br \/>\n       if (document.getElementById(('slideshow' + dragto[0]).replace(\/slideshow1$\/g,'slideshow')).value != '' && document.getElementById(('slideshow' + dragfrom[0]).replace(\/slideshow1$\/g,'slideshow')).value != '') {<br \/>\n        var yesdoit=confirm('Swap Image ' + dragto[0] + ' for Image ' + dragfrom[0] + ' content?');<br \/>\n        if (yesdoit) {<br \/>\n          var fromx=document.getElementById(('slideshow' + dragto[0]).replace(\/slideshow1$\/g,'slideshow')).value;<br \/>\n          var tox=document.getElementById(('slideshow' + dragfrom[0]).replace(\/slideshow1$\/g,'slideshow')).value;<br \/>\n          document.getElementById(('slideshow' + dragto[0]).replace(\/slideshow1$\/g,'slideshow')).value=tox;<br \/>\n          document.getElementById(('slideshow' + dragfrom[0]).replace(\/slideshow1$\/g,'slideshow')).value=fromx;<br \/>\n          var inthis=document.getElementById(('slideshow' + dragto[0]).replace(\/slideshow1$\/g,'slideshow'));<br \/>\n          inthis.style.color='black';<br \/>\n          inthis.style.opacity='1.0';<br \/>\n          inthis.style.background='';<br \/>\n          inthis.style.border='';<br \/>\n          inthis.style.outset='';<br \/>\n          inthis=document.getElementById(('slideshow' + dragfrom[0]).replace(\/slideshow1$\/g,'slideshow'));<br \/>\n          inthis.style.color='black';<br \/>\n          inthis.style.opacity='1.0';<br \/>\n          inthis.style.background='';<br \/>\n          inthis.style.border='';<br \/>\n          inthis.style.outset='';<br \/>\n        }<br \/>\n       }<br \/>\n      }<br \/>\n      dragfrom=[];<br \/>\n      dragto=[];<br \/>\n    }<br \/>\n    document.onmouseup = null;<br \/>\n    document.onmousemove = null;<br \/>\n    document.onmousedown = null;<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; to bring this about for <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php----------------------------------------------------------GETME' rel=\"noopener\">the changed<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php----------------------------------------------------------GETME' rel=\"noopener\">tutorial_to_animated_gif.php<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php' rel=\"noopener\">our inhouse Animated GIF Creator helper PHP web application<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/video-to-amended-animated-gif-alignment-tutorial\/' rel=\"noopener\">Video to Amended Animated GIF Drag Slide Swap Tutorial<\/a>.<\/p-->\n<hr>\n<p id='vaagifat'>Previous relevant <a target=\"_blank\" title='Video to Amended Animated GIF Alignment Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/video-to-amended-animated-gif-alignment-tutorial\/' rel=\"noopener\">Video to Amended Animated GIF Alignment Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Video to Amended Animated GIF Preview Forever Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif_float_align.jpg\" title=\"Video to Amended Animated GIF Preview Forever Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Video to Amended Animated GIF Alignment Tutorial<\/p><\/div>\n<p>Around here when &#8220;alignment&#8221; thoughts are teamed with &#8220;web design&#8221; we still like the &#8220;oldy worldy&#8221; HTML table element approach, but such an idea felt a bit too extra kludgy regarding the &#8220;dynamically vertically expanding&#8221; ideas in the Animated GIF Creator (PHP) web application of yesterday&#8217;s <a title='Video to Amended Animated GIF Preview Forever Tutorial' href='#vaagifpft'>Video to Amended Animated GIF Preview Forever Tutorial<\/a>.<\/p>\n<p>We could apply pretty complex CSS styling and use &#8220;div&#8221; elements, no doubt!  But we opted for some application of <font color=blue>new<\/font> textbox applicable CSS that uses &#8230;<\/p>\n<ol>\n<li>percentage widths ( width: 80%; )<\/li>\n<li><font color=blue><a target=\"_blank\" title='CSS float property information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_class_float.asp' rel=\"noopener\">float<\/a>: right;<\/font><\/li>\n<li><font color=blue><a target=\"_blank\" title='CSS margin-right property information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_margin-right.asp' rel=\"noopener\">margin-right<\/a>: 1%;<\/font><\/li>\n<\/ol>\n<p> &#8230; and then work at making other elements align around this &#8220;good start&#8221; having a neat right hand edge for the &#8220;delay(s)&#8221; and &#8220;slide(s)&#8221; textboxes.  An impediment to good &#8220;alignment&#8221; results also had us revisiting our penchant for any CSS &#8220;align: center&#8221; ideas, instead making &#8220;alignment&#8221; on the left hand side of the web application be &#8220;to the left&#8221; <font size=1>(doh!)<\/font><\/p>\n<p>Let&#8217;s take a look at <font color=blue>(PHP writes) Javascript alignment related changes to &#8220;previewing&#8221; logic<\/font> that augments the PHP variable <font color=purple>change<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$seventypc=\"<font color=purple>80%;float:right;margin-right:1%<\/font>\";<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; is &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n var lastiid='', relatedto=null;<br \/>\n var delaylastiid='', delayrelatedto=null, delayslidenum=-1, delaythisslide=-1, delaysare=[];<br \/>\n<br \/> <br \/>\nfunction prenext() {<br \/>\n    if (delayrelatedto) {<br \/>\n    if (delaythisslide &gt;= delayslidenum) {<br \/>\n      delaythisslide=1;<br \/>\n      document.getElementById('delay').style.backgroundImage='linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\\\"' + document.getElementById('slideshow').value + '\\\")';<br \/>\n      setTimeout(prenext, eval('' + delaysare[0]));<br \/>\n    } else {<br \/>\n      delaythisslide++;<br \/>\n      document.getElementById('delay').style.backgroundImage='linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\\\"' + document.getElementById('slideshow' + eval(0 + eval(delaythisslide))).value + '\\\")';<br \/>\n      if (delaythisslide &lt;= delaysare.length) {<br \/>\n       setTimeout(prenext, eval('' + delaysare[eval(-1 + eval('' + delaythisslide))]));<br \/>\n      } else {<br \/>\n       setTimeout(prenext, eval('' + delaysare[0]));<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction preanimate(inthis, inthisvalue) {<br \/>\n  var delaysuff='';<br \/>\n  delaysare=inthisvalue.split(',');<br \/>\n  if (delayslidenum == -1 || 1 == 1) {<br \/>\n    delayslidenum=-1;<br \/>\n    while (document.getElementById('slideshow' + delaysuff).value != '') {<br \/>\n     if (delayslidenum == -1) {<br \/>\n       delayslidenum=1;<br \/>\n       delaysuff='' + eval(1 + eval('' + delayslidenum));<br \/>\n     } else {<br \/>\n       delayslidenum++;<br \/>\n       delaysuff='' + eval(1 + eval('' + delayslidenum));<br \/>\n     }<br \/>\n    }<br \/>\n  }<br \/>\n  delaythisslide=1;<br \/>\n  setTimeout(prenext, eval('' + delaysare[0]));<br \/>\n  return document.getElementById('slideshow').value;<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction preafterbithis() {<br \/>\n  if (delayrelatedto) {<br \/>\n  if (delaylastiid == ('' + delayrelatedto.id)) {<br \/>\n    delaylastiid='';<br \/>\n    \/\/delayrelatedto=null;<br \/>\n  }<br \/>\n  } else {<br \/>\n    delaylastiid='';<br \/>\n  }<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction preinrelatedto() {<br \/>\n  var thisappi=1;<br \/>\n  if (delayrelatedto) {<br \/>\n      if (('' + delayrelatedto.title).indexOf('ong hover') != -1) {<br \/>\n        var appiwords=('' + delayrelatedto.title).replace(' after losing focus', ' after losing focus 0').split(' ');<br \/>\n        delayrelatedto.title+=' ' + eval(1 + eval(appiwords[eval(-1 + appiwords.length)]));<br \/>\n        if (eval(1 + eval(appiwords[eval(-1 + appiwords.length)])) &lt;= 7) { delayrelatedto.style.border='' + eval(1 + eval(appiwords[eval(-1 + appiwords.length)])) + 'px dotted yellow';  delayrelatedto.style.borderLeftStyle='solid';  }<br \/>\n        setTimeout(preinrelatedto, 990);<br \/>\n      }<br \/>\n  }<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction prebithis(inthis) {<br \/>\n  if (inthis.value.trim() != '') {<br \/>\n      if (delayrelatedto) {<br \/>\n        if (('' + inthis.id) != ('' + delayrelatedto.id)) {<br \/>\n          preunbithis(delayrelatedto);<br \/>\n          delayrelatedto=null;<br \/>\n        }<br \/>\n      }<br \/>\n      if (('' + inthis.getAttribute('data-oh')).replace(\/^undefined$\/g,'').replace(\/^null$\/g,'') == '') {<br \/>\n        inthis.setAttribute('data-oh', '' + inthis.getBoundingClientRect().height);<br \/>\n        <font color=blue>if (document.getElementById('ours0')) {   document.getElementById('ours0').setAttribute('data-oh', '' + document.getElementById('ours0').getBoundingClientRect().height); }<\/font><br \/>\n      }<br \/>\n      if (('' + inthis.title).indexOf('ong hover') == -1) {<br \/>\n         inthis.title+=' ... long hover of 7 seconds keeps background image in place after losing focus';<br \/>\n      } else {<br \/>\n         inthis.title=inthis.title.split('ong hover')[0] + 'ong hover of 7 seconds keeps background image in place after losing focus';<br \/>\n      }<br \/>\n      inthis.style.backgroundImage='linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\\\"' + preanimate(inthis, inthis.value) + '\\\")';<br \/>\n      inthis.style.height='80px';<br \/>\n      <font color=blue>if (document.getElementById('ours0')) {<br \/>\n        document.getElementById('ours0').style.height='80px';<br \/>\n        document.getElementById('ours0').style.display='inline-block';<br \/>\n      }<\/font><br \/>\n      inthis.style.backgroundSize='contain';<br \/>\n      inthis.style.backgroundRepeat='no-repeat';<br \/>\n      inthis.style.backgroundPosition='right top';<br \/>\n      delaylastiid='' + inthis.id;<br \/>\n      delayrelatedto=inthis;<br \/>\n      setTimeout(preinrelatedto, 990);<br \/>\n      setTimeout(preafterbithis, 7000);<br \/>\n  }<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction preunbithis(inthis) {<br \/>\n  if (inthis.value.trim() != '' && delaylastiid == ('' + inthis.id)) {<br \/>\n    if (('' + inthis.title).indexOf('ong hover') != -1) {<br \/>\n      inthis.title=inthis.title.split('ong hover')[0] + 'ong hover keeps background animated GIF image in place after losing focus';<br \/>\n    }<br \/>\n    if (delayrelatedto) {<br \/>\n      delayrelatedto=null;<br \/>\n    }<br \/>\n    if (('' + inthis.getAttribute('data-oh')).replace(\/^undefined$\/g,'').replace(\/^null$\/g,'') != '') {<br \/>\n      inthis.style.height='' + inthis.getAttribute('data-oh') + 'px';<br \/>\n      <font color=blue>if (document.getElementById('ours0')) {   document.getElementById('ours0').style.height='' + document.getElementById('ours0').getAttribute('data-oh') + 'px'; document.getElementById('ours0').style.display='inline'; }<\/font><br \/>\n    }<br \/>\n    inthis.style.color='black';<br \/>\n    inthis.style.opacity='1.0';<br \/>\n    inthis.style.background='';<br \/>\n    inthis.style.border='';<br \/>\n    inthis.style.outset='';<br \/>\n  }<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction afterbithis() {<br \/>\n  if (relatedto) {<br \/>\n  if (lastiid == ('' + relatedto.id)) {<br \/>\n    lastiid='';<br \/>\n    relatedto=null;<br \/>\n  }<br \/>\n  } else {<br \/>\n    lastiid='';<br \/>\n  }<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction inrelatedto() {<br \/>\n  var thisappi=1;<br \/>\n  if (relatedto) {<br \/>\n      if (('' + relatedto.title).indexOf('ong hover') != -1) {<br \/>\n        var appiwords=('' + relatedto.title).replace(' after losing focus', ' after losing focus 0').split(' ');<br \/>\n        relatedto.title+=' ' + eval(1 + eval(appiwords[eval(-1 + appiwords.length)]));<br \/>\n        if (eval(1 + eval(appiwords[eval(-1 + appiwords.length)])) &lt;= 7) { relatedto.style.border='' + eval(1 + eval(appiwords[eval(-1 + appiwords.length)])) + 'px dotted yellow';  relatedto.style.borderLeftStyle='solid'; }<br \/>\n        setTimeout(inrelatedto, 990);<br \/>\n      }<br \/>\n  }<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction bithis(inthis) {<br \/>\n  if (inthis.value.trim() != '') {<br \/>\n    if (relatedto) {<br \/>\n      if (('' + inthis.id) != ('' + relatedto.id)) {<br \/>\n        unbithis(relatedto);<br \/>\n        relatedto=null;<br \/>\n      }<br \/>\n    }<br \/>\n    if (('' + inthis.getAttribute('data-oh')).replace(\/^undefined$\/g,'').replace(\/^null$\/g,'') == '') {<br \/>\n      inthis.setAttribute('data-oh', '' + inthis.getBoundingClientRect().height);<br \/>\n      <font color=blue>if (('' + inthis.id) == 'slideshow') {<br \/>\n        if (document.getElementById('ours1')) {   document.getElementById('ours1').setAttribute('data-oh', '' + document.getElementById('ours1').getBoundingClientRect().height); }<br \/>\n      } else if (('' + inthis.id).indexOf('slideshow') == 0) {<br \/>\n        document.getElementById('ours' + ('' + inthis.id).replace('slideshow','')).setAttribute('data-oh', '' + document.getElementById('ours' + ('' + inthis.id).replace('slideshow','')).getBoundingClientRect().height);<br \/>\n      }<\/font><br \/>\n    }<br \/>\n    if (inthis.value.indexOf('data:') == 0) {<br \/>\n      if (('' + inthis.title).indexOf('ong hover') == -1) {<br \/>\n         inthis.title+=' ... long hover of 7 seconds keeps background image in place after losing focus';<br \/>\n      } else {<br \/>\n         inthis.title=inthis.title.split('ong hover')[0] + 'ong hover of 7 seconds keeps background image in place after losing focus';<br \/>\n      }<br \/>\n      inthis.style.backgroundImage='linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\\\"' + inthis.value + '\\\")';<br \/>\n      inthis.style.color='rgba(240,240,240,0.2)';<br \/>\n      inthis.style.height='80px';<br \/>\n      <font color=blue>if (('' + inthis.id) == 'slideshow') {<br \/>\n        if (document.getElementById('ours1')) {   document.getElementById('ours1').style.height='80px'; document.getElementById('ours1').style.display='inline-block'; }<br \/>\n      } else if (('' + inthis.id).indexOf('slideshow') == 0) {<br \/>\n        document.getElementById('ours' + ('' + inthis.id).replace('slideshow','')).style.height='80px';<br \/>\n        document.getElementById('ours' + ('' + inthis.id).replace('slideshow','')).style.display='inline-block';<br \/>\n      }<\/font><br \/>\n      inthis.style.backgroundSize='contain';<br \/>\n      inthis.style.backgroundRepeat='no-repeat';<br \/>\n      inthis.style.backgroundPosition='right top';<br \/>\n      lastiid='' + inthis.id;<br \/>\n      relatedto=inthis;<br \/>\n      setTimeout(inrelatedto, 1000);<br \/>\n    } else if (inthis.value.indexOf('.') != -1) {<br \/>\n      if (('' + inthis.title).indexOf('ong hover') == -1) {<br \/>\n         inthis.title+=' ... long hover of 7 seconds keeps background image in place after losing focus';<br \/>\n      } else {<br \/>\n         inthis.title=inthis.title.split('ong hover')[0] + 'ong hover of 7 seconds keeps background image in place after losing focus';<br \/>\n      }<br \/>\n      inthis.style.backgroundImage='linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\\\"' + inthis.value + '\\\")';<br \/>\n      inthis.style.height='80px';<br \/>\n      <font color=blue>if (('' + inthis.id) == 'slideshow') {<br \/>\n        if (document.getElementById('ours1')) {   document.getElementById('ours1').style.height='80px'; document.getElementById('ours1').style.display='inline-block'; }<br \/>\n      } else if (('' + inthis.id).indexOf('slideshow') == 0) {<br \/>\n        document.getElementById('ours' + ('' + inthis.id).replace('slideshow','')).style.height='80px';<br \/>\n        document.getElementById('ours' + ('' + inthis.id).replace('slideshow','')).style.display='inline-block';<br \/>\n      }<\/font><br \/>\n      inthis.style.backgroundSize='contain';<br \/>\n      inthis.style.backgroundRepeat='no-repeat';<br \/>\n      inthis.style.backgroundPosition='right top';<br \/>\n      lastiid='' + inthis.id;<br \/>\n      relatedto=inthis;<br \/>\n      setTimeout(inrelatedto, 990);<br \/>\n    }<br \/>\n    setTimeout(afterbithis, 7000);<br \/>\n  }<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction unbithis(inthis) {<br \/>\n  if (inthis.value.trim() != '' && lastiid == ('' + inthis.id)) {<br \/>\n    if (('' + inthis.title).indexOf('ong hover') != -1) {<br \/>\n      inthis.title=inthis.title.split('ong hover')[0] + 'ong hover keeps background image in place after losing focus';<br \/>\n    }<br \/>\n    if (relatedto) {<br \/>\n      relatedto=null;<br \/>\n    }<br \/>\n    if (('' + inthis.getAttribute('data-oh')).replace(\/^undefined$\/g,'').replace(\/^null$\/g,'') != '') {<br \/>\n      inthis.style.height='' + inthis.getAttribute('data-oh') + 'px';<br \/>\n      <font color=blue>if (('' + inthis.id) == 'slideshow') {<br \/>\n        if (document.getElementById('ours1')) {   document.getElementById('ours1').style.height='' + document.getElementById('ours1').getAttribute('data-oh') + 'px'; document.getElementById('ours1').style.display='inline'; }<br \/>\n      } else if (('' + inthis.id).indexOf('slideshow') == 0) {<br \/>\n        document.getElementById('ours' + ('' + inthis.id).replace('slideshow','')).style.height='' + document.getElementById('ours' + ('' + inthis.id).replace('slideshow','')).getAttribute('data-oh') + 'px';<br \/>\n        document.getElementById('ours' + ('' + inthis.id).replace('slideshow','')).style.display='inline';<br \/>\n      }<\/font><br \/>\n    }<br \/>\n    inthis.style.color='black';<br \/>\n    inthis.style.opacity='1.0';<br \/>\n    inthis.style.background='';<br \/>\n    inthis.style.border='';<br \/>\n    inthis.style.outset='';<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; for <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php---------------------------------------------------------GETME' rel=\"noopener\">the changed<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php---------------------------------------------------------GETME' rel=\"noopener\">tutorial_to_animated_gif.php<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php' rel=\"noopener\">our inhouse Animated GIF Creator helper PHP web application<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/video-to-amended-animated-gif-alignment-tutorial\/' rel=\"noopener\">Video to Amended Animated GIF Alignment Tutorial<\/a>.<\/p-->\n<hr>\n<p id='vaagifpft'>Previous relevant <a target=\"_blank\" title='Video to Amended Animated GIF Preview Forever Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/video-to-amended-animated-gif-preview-forever-tutorial\/' rel=\"noopener\">Video to Amended Animated GIF Preview Forever Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Video to Amended Animated GIF Preview Forever Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif_delayag_preview.jpg\" title=\"Video to Amended Animated GIF Preview Forever Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Video to Amended Animated GIF Preview Forever Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='Video to Amended Animated GIF Slide Preview Forever Tutorial' href='#vaagifspft'>Video to Amended Animated GIF Slide Preview Forever Tutorial<\/a>, am sure there are a lot of readers out there who&#8217;d like &#8230;<\/p>\n<ul>\n<li>not only the possibility for a preview of individual slide images &#8230; but &#8230;<\/li>\n<li>a preview approximation of the final animated GIF (we decide to offer in non-mobile hover and long hover scenarios for the &#8220;delay&#8221; textbox)<\/li>\n<\/ul>\n<p> &#8230; positioned there because the delay is what makes an animated GIF be the &#8220;animation&#8221; it is.<\/p>\n<p>If you saw this coming, you&#8217;ll not be too surprised by the PHP self contained work that complements the &#8220;delay&#8221; textbox&#8217;s <i>onmouseover=prebithis(this); onmouseout=preunbithis(this);<\/i> new Javascript functionality &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n var delaylastiid='', delayrelatedto=null, delayslidenum=-1, delaythisslide=-1, delaysare=[];<br \/>\n<br \/>\nfunction prenext() {<br \/>\n    if (delayrelatedto) {<br \/>\n    if (delaythisslide &gt;= delayslidenum) {<br \/>\n      delaythisslide=1;<br \/>\n      document.getElementById('delay').style.backgroundImage='linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\\\"' + document.getElementById('slideshow').value + '\\\")';<br \/>\n      setTimeout(prenext, eval('' + delaysare[0]));<br \/>\n    } else {<br \/>\n      delaythisslide++;<br \/>\n      document.getElementById('delay').style.backgroundImage='linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\\\"' + document.getElementById('slideshow' + eval(0 + eval(delaythisslide))).value + '\\\")';<br \/>\n      if (delaythisslide &lt;= delaysare.length) {<br \/>\n       setTimeout(prenext, eval('' + delaysare[eval(-1 + eval('' + delaythisslide))]));<br \/>\n      } else {<br \/>\n       setTimeout(prenext, eval('' + delaysare[0]));<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n}<br \/>\n<br \/>\nfunction preanimate(inthis, inthisvalue) {<br \/>\n  var delaysuff='';<br \/>\n  delaysare=inthisvalue.split(',');<br \/>\n  if (delayslidenum == -1 || 1 == 1) {<br \/>\n    delayslidenum=-1;<br \/>\n    while (document.getElementById('slideshow' + delaysuff).value != '') {<br \/>\n     if (delayslidenum == -1) {<br \/>\n       delayslidenum=1;<br \/>\n       delaysuff='' + eval(1 + eval('' + delayslidenum));<br \/>\n     } else {<br \/>\n       delayslidenum++;<br \/>\n       delaysuff='' + eval(1 + eval('' + delayslidenum));<br \/>\n     }<br \/>\n    }<br \/>\n  }<br \/>\n  delaythisslide=1;<br \/>\n  setTimeout(prenext, eval('' + delaysare[0]));<br \/>\n  return document.getElementById('slideshow').value;<br \/>\n}<br \/>\n<br \/>\nfunction preafterbithis() {<br \/>\n  if (delayrelatedto) {<br \/>\n  if (delaylastiid == ('' + delayrelatedto.id)) {<br \/>\n    delaylastiid='';<br \/>\n    \/\/delayrelatedto=null;<br \/>\n  }<br \/>\n  } else {<br \/>\n    delaylastiid='';<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction preinrelatedto() {<br \/>\n  var thisappi=1;<br \/>\n  if (delayrelatedto) {<br \/>\n      if (('' + delayrelatedto.title).indexOf('ong hover') != -1) {<br \/>\n        var appiwords=('' + delayrelatedto.title).replace(' after losing focus', ' after losing focus 0').split(' ');<br \/>\n        delayrelatedto.title+=' ' + eval(1 + eval(appiwords[eval(-1 + appiwords.length)]));<br \/>\n        if (eval(1 + eval(appiwords[eval(-1 + appiwords.length)])) &lt;= 7) { delayrelatedto.style.border='' + eval(1 + eval(appiwords[eval(-1 + appiwords.length)])) + 'px dotted yellow'; }<br \/>\n        setTimeout(preinrelatedto, 1000);<br \/>\n      }<br \/>\n  }<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction prebithis(inthis) {<br \/>\n  if (inthis.value.trim() != '') {<br \/>\n      if (delayrelatedto) {<br \/>\n        if (('' + inthis.id) != ('' + delayrelatedto.id)) {<br \/>\n          preunbithis(delayrelatedto);<br \/>\n          delayrelatedto=null;<br \/>\n        }<br \/>\n      }<br \/>\n      if (('' + inthis.getAttribute('data-oh')).replace(\/^undefined$\/g,'').replace(\/^null$\/g,'') == '') {<br \/>\n        inthis.setAttribute('data-oh', '' + inthis.getBoundingClientRect().height);<br \/>\n      }<br \/>\n      if (('' + inthis.title).indexOf('ong hover') == -1) {<br \/>\n         inthis.title+=' ... long hover of 7 seconds keeps background image in place after losing focus';<br \/>\n      } else {<br \/>\n         inthis.title=inthis.title.split('ong hover')[0] + 'ong hover of 7 seconds keeps background image in place after losing focus';<br \/>\n      }<br \/>\n      inthis.style.backgroundImage='linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\\\"' + preanimate(inthis, inthis.value) + '\\\")';<br \/>\n      inthis.style.height='80px';<br \/>\n      inthis.style.backgroundSize='contain';<br \/>\n      inthis.style.backgroundRepeat='no-repeat';<br \/>\n      inthis.style.backgroundPosition='right top';<br \/>\n      delaylastiid='' + inthis.id;<br \/>\n      delayrelatedto=inthis;<br \/>\n      setTimeout(preinrelatedto, 1000);<br \/>\n      setTimeout(preafterbithis, 7000);<br \/>\n  }<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction preunbithis(inthis) {<br \/>\n  if (inthis.value.trim() != '' && delaylastiid == ('' + inthis.id)) {<br \/>\n    if (('' + inthis.title).indexOf('ong hover') != -1) {<br \/>\n      inthis.title=inthis.title.split('ong hover')[0] + 'ong hover keeps background animated GIF image in place after losing focus';<br \/>\n    }<br \/>\n    if (delayrelatedto) {<br \/>\n      delayrelatedto=null;<br \/>\n    }<br \/>\n    if (('' + inthis.getAttribute('data-oh')).replace(\/^undefined$\/g,'').replace(\/^null$\/g,'') != '') {<br \/>\n      inthis.style.height='' + inthis.getAttribute('data-oh') + 'px';<br \/>\n    }<br \/>\n    inthis.style.color='black';<br \/>\n    inthis.style.opacity='1.0';<br \/>\n    inthis.style.background='';<br \/>\n    inthis.style.border='';<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; for <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php--------------------------------------------------------GETME' rel=\"noopener\">the changed<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php--------------------------------------------------------GETME' rel=\"noopener\">tutorial_to_animated_gif.php<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php' rel=\"noopener\">our inhouse Animated GIF Creator helper PHP web application<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/new-video-to-amended-animated-gif-preview-forever-tutorial\/' rel=\"noopener\">Video to Amended Animated GIF Preview Forever Tutorial<\/a>.<\/p-->\n<hr>\n<p id='vaagifspft'>Previous relevant <a target=\"_blank\" title='Video to Amended Animated GIF Slide Preview Forever Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/video-to-amended-animated-gif-slide-preview-forever-tutorial\/' rel=\"noopener\">Video to Amended Animated GIF Slide Preview Forever Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Video to Amended Animated GIF Slide Preview Forever Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif_preview_forever.jpg\" title=\"Video to Amended Animated GIF Slide Preview Forever Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Video to Amended Animated GIF Slide Preview Forever Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='Video to Amended Animated GIF Slide Preview Tutorial' href='#vaagifspt'>Video to Amended Animated GIF Slide Preview Tutorial<\/a> &#8230;<\/p>\n<blockquote><p>\n &#8230; and then, there&#8217;s the idea to leave the image thumbnail there\n<\/p><\/blockquote>\n<p> &#8230; concept.  Wouldn&#8217;t you say?  But, how to implement this?  Well, as for the recent <a target=\"_blank\" title='Landing Page Linked Background Images Long Hover Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-linked-background-images-long-hover-tutorial' rel=\"noopener\">Landing Page Linked Background Images Long Hover Tutorial<\/a> we figured that the &#8220;Long Hover&#8221; ideas form that independent and non-interfering (with existent non-mobile functionality) methodology we could look into, so that the &#8220;just hover&#8221; <font color=blue>work became<\/font> &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n<font color=blue> var lastiid='', relatedto=null;<br \/>\n<br \/> <br \/>\nfunction afterbithis() {<br \/>\n  if (relatedto) {<br \/>\n  if (lastiid == ('' + relatedto.id)) {<br \/>\n    lastiid='';<br \/>\n    relatedto=null;<br \/>\n  }<br \/>\n  } else {<br \/>\n    lastiid='';<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction inrelatedto() {<br \/>\n  var thisappi=1;<br \/>\n  if (relatedto) {<br \/>\n      if (('' + relatedto.title).indexOf('ong hover') != -1) {<br \/>\n        var appiwords=('' + relatedto.title).replace(' after losing focus', ' after losing focus 0').split(' ');<br \/>\n        relatedto.title+=' ' + eval(1 + eval(appiwords[eval(-1 + appiwords.length)]));<br \/>\n        if (eval(1 + eval(appiwords[eval(-1 + appiwords.length)])) &lt;= 7) { relatedto.style.border='' + eval(1 + eval(appiwords[eval(-1 + appiwords.length)])) + 'px dotted yellow'; }<br \/>\n        setTimeout(inrelatedto, 1000);<br \/>\n      }<br \/>\n  }<br \/>\n}<\/font><br \/>\n<br \/> <br \/>\nfunction bithis(inthis) {<br \/>\n  if (inthis.value.trim() != '') {<br \/>\n    <font color=blue>if (relatedto) {<br \/>\n      if (('' + inthis.id) != ('' + relatedto.id)) {<br \/>\n        unbithis(relatedto);<br \/>\n        relatedto=null;<br \/>\n      }<br \/>\n    }<\/font><br \/>\n    if (('' + inthis.getAttribute('data-oh')).replace(\/^undefined$\/g,'').replace(\/^null$\/g,'') == '') {<br \/>\n      inthis.setAttribute('data-oh', '' + inthis.getBoundingClientRect().height);<br \/>\n    }<br \/>\n    if (inthis.value.indexOf('data:') == 0) {<br \/>\n      <font color=blue>if (('' + inthis.title).indexOf('ong hover') == -1) {<br \/>\n         inthis.title+=' ... long hover of 7 seconds keeps background image in place after losing focus';<br \/>\n      } else {<br \/>\n         inthis.title=inthis.title.split('ong hover')[0] + 'ong hover of 7 seconds keeps background image in place after losing focus';<br \/>\n      }<\/font><br \/>\n      inthis.style.backgroundImage='linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\\\"' + inthis.value + '\\\")';<br \/>\n      inthis.style.color='rgba(240,240,240,0.2)';<br \/>\n      inthis.style.height='80px';<br \/>\n      inthis.style.backgroundSize='contain';<br \/>\n      inthis.style.backgroundRepeat='no-repeat';<br \/>\n      inthis.style.backgroundPosition='right top';<br \/>\n      <font color=blue>lastiid='' + inthis.id;<br \/>\n      relatedto=inthis;<br \/>\n      setTimeout(inrelatedto, 1000);<\/font><br \/>\n    } else if (inthis.value.indexOf('.') != -1) {<br \/>\n      <font color=blue>if (('' + inthis.title).indexOf('ong hover') == -1) {<br \/>\n         inthis.title+=' ... long hover of 7 seconds keeps background image in place after losing focus';<br \/>\n      } else {<br \/>\n         inthis.title=inthis.title.split('ong hover')[0] + 'ong hover of 7 seconds keeps background image in place after losing focus';<br \/>\n      }<\/font><br \/>\n      inthis.style.backgroundImage='linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\\\"' + inthis.value + '\\\")';<br \/>\n      inthis.style.height='80px';<br \/>\n      inthis.style.backgroundSize='contain';<br \/>\n      inthis.style.backgroundRepeat='no-repeat';<br \/>\n      inthis.style.backgroundPosition='right top';<br \/>\n      <font color=blue>lastiid='' + inthis.id;<br \/>\n      relatedto=inthis;<br \/>\n      setTimeout(inrelatedto, 1000);<\/font><br \/>\n    }<br \/>\n    setTimeout(afterbithis, 7000);<br \/>\n  }<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction unbithis(inthis) {<br \/>\n  if (inthis.value.trim() != ''<font color=blue> && lastiid == ('' + inthis.id)<\/font>) {<br \/>\n    <font color=blue>if (('' + inthis.title).indexOf('ong hover') != -1) {<br \/>\n      inthis.title=inthis.title.split('ong hover')[0] + 'ong hover keeps background image in place after losing focus';<br \/>\n    }<br \/>\n    if (relatedto) {<br \/>\n      relatedto=null;<br \/>\n    }<\/font><br \/>\n    if (('' + inthis.getAttribute('data-oh')).replace(\/^undefined$\/g,'').replace(\/^null$\/g,'') != '') {<br \/>\n      inthis.style.height='' + inthis.getAttribute('data-oh') + 'px';<br \/>\n    }<br \/>\n    inthis.style.color='black';<br \/>\n    inthis.style.opacity='1.0';<br \/>\n    inthis.style.background='';<br \/>\n    <font color=blue>inthis.style.border='';<\/font><br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; to, again, accompany the (input type=text) slide textbox <i>onmouseover=bithis(this); onmouseout=unbithis(this);<\/i> &#8220;short hover&#8221; event logic callers, to get a taste for what is involved here, in <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-------------------------------------------------------GETME' rel=\"noopener\">the changed<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-------------------------------------------------------GETME' rel=\"noopener\">tutorial_to_animated_gif.php<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php' rel=\"noopener\">our inhouse Animated GIF Creator helper PHP web application<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/video-to-amended-animated-gif-slide-preview-forever-tutorial\/' rel=\"noopener\">Video to Amended Animated GIF Slide Preview Forever Tutorial<\/a>.<\/p-->\n<hr>\n<p id='vaagifspt'>Previous relevant <a target=\"_blank\" title='Video to Amended Animated GIF Slide Preview Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/video-to-amended-animated-gif-slide-preview-tutorial\/' rel=\"noopener\">Video to Amended Animated GIF Slide Preview Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Video to Amended Animated GIF Slide Preview Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif_preview.jpg\" title=\"Video to Amended Animated GIF Slide Preview Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Video to Amended Animated GIF Slide Preview Tutorial<\/p><\/div>\n<p>Keeping to the recent theme of interest in (the non-mobile) &#8220;onmouseover&#8221; (hover) and &#8220;onmouseout&#8221; events, today we improve our inhouse Animated GIF Creator helper PHP web application last talked about with <a title='Video to Amended Animated GIF via ffmpeg Tutorial' href='#vaagift'>Video to Amended Animated GIF via ffmpeg Tutorial<\/a>.<\/p>\n<p>The reason we think those non-mobile users will enjoy this functionality, if anything like me, is that we might browse for images in a sorted bunch and assume all is well, but that order may not suit in the animated GIF order structure, and here is a mechanism that might help.<\/p>\n<p>And so take a look at <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php------------------------------------------------------GETME' rel=\"noopener\">the changed<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php------------------------------------------------------GETME' rel=\"noopener\">tutorial_to_animated_gif.php<\/a> <a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php' rel=\"noopener\">our inhouse Animated GIF Creator helper PHP web application<\/a> &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction bithis(inthis) {<br \/>\n  if (inthis.value.trim() != '') {<br \/>\n    if (('' + inthis.getAttribute('data-oh')).replace(\/^undefined$\/g,'').replace(\/^null$\/g,'') == '') {<br \/>\n      inthis.setAttribute('data-oh', '' + inthis.getBoundingClientRect().height);<br \/>\n    }<br \/>\n    if (inthis.value.indexOf('data:') == 0) {<br \/>\n      inthis.style.backgroundImage='linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\\\"' + inthis.value + '\\\")';<br \/>\n      inthis.style.color='rgba(240,240,240,0.2)';<br \/>\n      inthis.style.height='80px';<br \/>\n      inthis.style.backgroundSize='contain';<br \/>\n      inthis.style.backgroundRepeat='no-repeat';<br \/>\n      inthis.style.backgroundPosition='right top';<br \/>\n    } else if (inthis.value.indexOf('.') != -1) {<br \/>\n      inthis.style.backgroundImage='linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\\\"' + inthis.value + '\\\")';<br \/>\n      inthis.style.height='80px';<br \/>\n      inthis.style.backgroundSize='contain';<br \/>\n      inthis.style.backgroundRepeat='no-repeat';<br \/>\n      inthis.style.backgroundPosition='right top';<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction unbithis(inthis) {<br \/>\n  if (inthis.value.trim() != '') {<br \/>\n    if (('' + inthis.getAttribute('data-oh')).replace(\/^undefined$\/g,'').replace(\/^null$\/g,'') != '') {<br \/>\n      inthis.style.height='' + inthis.getAttribute('data-oh') + 'px';<br \/>\n    }<br \/>\n    inthis.style.color='black';<br \/>\n    inthis.style.opacity='1.0';<br \/>\n    inthis.style.background='';<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; to accompany the (input type=text) slide textbox <i>onmouseover=bithis(this); onmouseout=unbithis(this);<\/i> event logic callers, to get a taste for what is involved here.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/video-to-amended-animated-gif-slide-preview-tutorial\/' rel=\"noopener\">New Video to Amended Animated GIF via ffmpeg Tutorial<\/a> ...<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='vaagift'>Previous relevant <a target=\"_blank\" title='Video to Amended Animated GIF via ffmpeg Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/video-to-amended-animated-gif-via-ffmpeg-tutorial\/' rel=\"noopener\">Video to Amended Animated GIF via ffmpeg Tutorial<\/a> is shown below.<\/p>\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"Video to Amended Animated GIF via ffmpeg Tutorial\"]<a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/rolling.mov\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Video to Amended Animated GIF via ffmpeg Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/rolling.gif\" title=\"Video to Amended Animated GIF via ffmpeg Tutorial\"  style=\"float:left;\" \/><\/a>[\/caption]\n\n\n\n<p>So many of us are enthralled by our pet dog(s).  We have the joy of bringing up a Golden Retriever called <i>Nala<\/i> and her good friend <i>Luna<\/i>, the English Springer Spaniel.  Now Luna is normally the naturally talented dog, at many things, but she has taken an \"L\" plate quality interest, off Nala, with grass rolling.  She'll get there, and it's kind of cute watching her learn a skill that doesn't immediately fit into her instinctual skillset!<\/p>\n\n\n\n\n\n<p>And so, today, we're revisiting some of the techniques described in <a title='Video iPad Time Lapse Animated GIF via ffmpeg Tutorial' href='#vptlagift'>Video iPad Time Lapse Animated GIF via ffmpeg Tutorial<\/a>  to ...<\/p>\n\n\n\n\n\n<ul>\n\n\n<li>create a video via an iPhone Camera app<\/li>\n\n\n\n\n<li>share via iPhone Photo app Messages option via mobile phone number<\/li>\n\n\n\n\n<li>download to MacBook Air via its Messages (desktop) app and its two finger gesture \"Open\" option (to QuickTime Player in our setup)<\/li>\n\n\n\n\n<li>in QuickTime Player File -&gt; Export As... rolling.mov\n<video style=\"width:100%;\" controls><source src='\/\/www.rjmprogramming.com.au\/Mac\/rolling.mov' type='video\/mp4'><\/source><\/video>\n<\/li>\n\n\n\n\n<li>use <a target=\"_blank\" title=\"ffmpeg\" href='https:\/\/www.ffmpeg.org\/' rel=\"noopener\">ffmpeg<\/a> in macOS Terminal application as per ...\n<code>\nffmpeg -i rolling.mov -r 1 rolling-%04d.jpeg\n<\/code>\n<\/li>\n\n\n\n\n<li>find an \"L\" plate amongst images on the net and get it into Paintbrush macOS desktop application via Select\/File -&gt; Copy<\/li>\n\n\n\n\n<li>use Paintbrush macOS desktop application on selected rolling-%04d.jpeg slides to include that \"L\" plate into selected images to File -&gt; Save As... *.jpg<\/li>\n\n\n\n\n<li>on our macOS local <a target=\"_blank\" title='MAMP local Apache\/PHP\/MySql web server' href='http:\/\/mamp.info' rel=\"noopener\">MAMP<\/a> (Apache\/PHP\/MySql) web server we access Safari web browser address bar URL<br \/> <i>HTTP:\/\/localhost:8888\/PHP\/animegif\/<a target=\"_blank\" title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-----------------------------------------------------GETME' rel=\"noopener\">tutorial_to_animated_gif.php<\/a><\/i><br \/> and browse for the relevant images to construct our \"L\" plate animated GIF ... Save As Image rolling.gif\n<img decoding=\"async\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/rolling.gif\"><\/img>\n<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p>Enjoy a dog's rol<strike style='color:red;text-weight:bold;'>e<\/strike>l!<\/p>\n\n\n\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/video-to-amended-animated-gif-via-ffmpeg-tutorial\/' rel=\"noopener\">Video to Amended Animated GIF via ffmpeg Tutorial<\/a>.<\/p-->\n<hr>\n<p id='vptlagift'>Previous relevant <a target=\"_blank\" title='Video iPad Time Lapse Animated GIF via ffmpeg Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/video-ipad-time-lapse-animated-gif-via-ffmpeg-tutorial\/' rel=\"noopener\">Video iPad Time Lapse Animated GIF via ffmpeg Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/nala_timelapse.mov\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Video iPad Time Lapse Animated GIF via ffmpeg Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/nala_timelapse.gif\" title=\"Video iPad Time Lapse Animated GIF via ffmpeg Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Video iPad Time Lapse Animated GIF via ffmpeg Tutorial<\/p><\/div>\n<p>We wanted to try out a <i>small<\/i> <a target=\"_blank\" title='Time Lapse information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Time-lapse_photography' rel=\"noopener\">Time Lapse<\/a> video &#8230;<\/p>\n<blockquote cite='https:\/\/en.wikipedia.org\/wiki\/Time-lapse_photography'><p>\nTime-lapse photography is a technique whereby the frequency at which film frames are captured (the frame rate) is much more spread out than the frequency used to view the sequence. When played at normal speed, time appears to be moving faster and thus lapsing. For example, an image of a scene may be captured at 1 frame per second, but then played back at 30 frames per second; the result is an apparent 30 times speed increase. In a similar manner, film can also be played at a much lower rate than it was captured at, slowing down an otherwise fast action, as in slow motion or high-speed photography.\n<\/p><\/blockquote>\n<p> &#8230; created with the iPad Camera app &#8220;Video Time Lapse&#8221; option.  <i>Small<\/i> being the operative word.  So <i>small<\/i> in fact, that for a few seconds of video, it is possible to email your video off to an emailee receiver, the tradeoff being that when they play it at many speeds it is likely to play in the jerky fashion &#8230; like with our Nala Time Lapse (iPad Camera app created) <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/nala_timelapse.mov\" title=\"Click picture\" rel=\"noopener\">video below<\/a> &#8230; <\/p>\n<p><video style=\"width:100%;\" controls><source src='http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/nala_timelapse.mov' type='video\/mp4'><\/source><\/video><\/p>\n<p> &#8230; which we downloaded to this MacBook Pro that has (the great opensource) <a target=\"_blank\" title='ffmpeg' href='https:\/\/www.ffmpeg.org\/' rel=\"noopener\">ffmpeg<\/a> installed ready to reconstitute some <b>slides from the video<\/b> via &#8230;<\/p>\n<p><code><br \/>\n$ <b>ffmpeg -i nala_timelapse.mov -r 5 nala_image-%04d.jpeg<\/b><br \/>\nffmpeg version 4.1.1 Copyright (c) 2000-2019 the FFmpeg developers<br \/>\n  built with Apple LLVM version 10.0.0 (clang-1000.11.45.5)<br \/>\n  configuration: --prefix=\/usr\/local\/Cellar\/ffmpeg\/4.1.1 --enable-shared --enable-pthreads --enable-version3 --enable-hardcoded-tables --enable-avresample --cc=clang --host-cflags='-I\/Library\/Java\/JavaVirtualMachines\/openjdk-11.0.2.jdk\/Contents\/Home\/include -I\/Library\/Java\/JavaVirtualMachines\/openjdk-11.0.2.jdk\/Contents\/Home\/include\/darwin' --host-ldflags= --enable-ffplay --enable-gnutls --enable-gpl --enable-libaom --enable-libbluray --enable-libmp3lame --enable-libopus --enable-librubberband --enable-libsnappy --enable-libtesseract --enable-libtheora --enable-libvorbis --enable-libvpx --enable-libx264 --enable-libx265 --enable-libxvid --enable-lzma --enable-libfontconfig --enable-libfreetype --enable-frei0r --enable-libass --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-librtmp --enable-libspeex --enable-videotoolbox --disable-libjack --disable-indev=jack --enable-libaom --enable-libsoxr<br \/>\n  libavutil      56. 22.100 \/ 56. 22.100<br \/>\n  libavcodec     58. 35.100 \/ 58. 35.100<br \/>\n  libavformat    58. 20.100 \/ 58. 20.100<br \/>\n  libavdevice    58.  5.100 \/ 58.  5.100<br \/>\n  libavfilter     7. 40.101 \/  7. 40.101<br \/>\n  libavresample   4.  0.  0 \/  4.  0.  0<br \/>\n  libswscale      5.  3.100 \/  5.  3.100<br \/>\n  libswresample   3.  3.100 \/  3.  3.100<br \/>\n  libpostproc    55.  3.100 \/ 55.  3.100<br \/>\nInput #0, mov,mp4,m4a,3gp,3g2,mj2, from 'nala_timelapse.mov':<br \/>\n  Metadata:<br \/>\n    major_brand     : qt<br \/>\n    minor_version   : 0<br \/>\n    compatible_brands: qt<br \/>\n    creation_time   : 2019-03-10T06:32:49.000000Z<br \/>\n    com.apple.quicktime.location.ISO6709: -33.9074+151.1764+013.000\/<br \/>\n    com.apple.quicktime.make: Apple<br \/>\n    com.apple.quicktime.model: iPad (5th generation)<br \/>\n    com.apple.quicktime.software: 12.1.1<br \/>\n    com.apple.quicktime.creationdate: 2019-03-10T17:32:19+1100<br \/>\n  Duration: 00:00:01.23, start: 0.000000, bitrate: 20015 kb\/s<br \/>\n    Stream #0:0(und): Video: h264 (High) (avc1 \/ 0x31637661), yuvj420p(pc), 1920x1080, 20003 kb\/s, 30 fps, 30 tbr, 600 tbn, 1200 tbc (default)<br \/>\n    Metadata:<br \/>\n      rotate          : 180<br \/>\n      creation_time   : 2019-03-10T06:32:49.000000Z<br \/>\n      handler_name    : Core Media Video<br \/>\n      encoder         : H.264<br \/>\n    Side data:<br \/>\n      displaymatrix: rotation of -180.00 degrees<br \/>\nStream mapping:<br \/>\n  Stream #0:0 -&gt; #0:0 (h264 (native) -&gt; mjpeg (native))<br \/>\nPress [q] to stop, [?] for help<br \/>\nOutput #0, image2, to 'nala_image-%04d.jpeg':<br \/>\n  Metadata:<br \/>\n    major_brand     : qt<br \/>\n    minor_version   : 0<br \/>\n    compatible_brands: qt<br \/>\n    com.apple.quicktime.creationdate: 2019-03-10T17:32:19+1100<br \/>\n    com.apple.quicktime.location.ISO6709: -33.9074+151.1764+013.000\/<br \/>\n    com.apple.quicktime.make: Apple<br \/>\n    com.apple.quicktime.model: iPad (5th generation)<br \/>\n    com.apple.quicktime.software: 12.1.1<br \/>\n    encoder         : Lavf58.20.100<br \/>\n    Stream #0:0(und): Video: mjpeg, yuvj420p(pc), 1920x1080, q=2-31, 200 kb\/s, 5 fps, 5 tbn, 5 tbc (default)<br \/>\n    Metadata:<br \/>\n      encoder         : Lavc58.35.100 mjpeg<br \/>\n      creation_time   : 2019-03-10T06:32:49.000000Z<br \/>\n      handler_name    : Core Media Video<br \/>\n    Side data:<br \/>\n      cpb: bitrate max\/min\/avg: 0\/0\/200000 buffer size: 0 vbv_delay: -1<br \/>\n      displaymatrix: rotation of -0.00 degrees<br \/>\nframe=    8 fps=0.0 q=12.5 Lsize=N\/A time=00:00:01.60 bitrate=N\/A dup=0 drop=29 speed=4.67x<br \/>\nvideo:974kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: unknown<br \/>\n$ <b>ls -l nala_image-*.jpeg<br \/>\n-rw-r--r--  1 user  admin  124191 10 Mar 19:36 nala_image-0001.jpeg<br \/>\n-rw-r--r--  1 user  admin  174070 10 Mar 19:36 nala_image-0002.jpeg<br \/>\n-rw-r--r--  1 user  admin  190966 10 Mar 19:36 nala_image-0003.jpeg<br \/>\n-rw-r--r--  1 user  admin  150169 10 Mar 19:36 nala_image-0004.jpeg<br \/>\n-rw-r--r--  1 user  admin  141476 10 Mar 19:36 nala_image-0005.jpeg<br \/>\n-rw-r--r--  1 user  admin   91377 10 Mar 19:36 nala_image-0006.jpeg<br \/>\n-rw-r--r--  1 user  admin   69113 10 Mar 19:36 nala_image-0007.jpeg<br \/>\n-rw-r--r--  1 user  admin   56253 10 Mar 19:36 nala_image-0008.jpeg<\/b><br \/>\n$<br \/>\n<\/code><\/p>\n<p>And then to generate our Animated GIF animation used in today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/nala_timelapse.gif\" title=\"Tutorial picture\" rel=\"noopener\">blog posting image<\/a> we used the inhouse (with great help as you can read at <a target=\"_blank\" title='Animated GIF and Video via PHP Writing PHP Data URI Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/Animated GIF and Video via PHP Writing PHP Data URI Tutorial\/' rel=\"noopener\">Animated GIF and Video via PHP Writing PHP Data URI Tutorial<\/a>) <a target=\"_blank\" title='Animated GIF creator' href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php' rel=\"noopener\">Animated GIF creator<\/a> &#8230; &#8220;an animation cycle&#8221;.<\/p>\n<p>Read more at <a title='Video via Slide Images and Back Again via ffmpeg Primer Tutorial' href='#vsibapt'>Video via Slide Images and Back Again via ffmpeg Primer Tutorial<\/a> below for more information, especially if you need to install ffmpeg yourself.<\/p>\n<hr>\n<p id='vsibapt'>Previous relevant <a target=\"_blank\" title='Video via Slide Images and Back Again via ffmpeg Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/video-via-slide-images-and-back-again-via-ffmpeg-primer-tutorial\/' rel=\"noopener\">Video via Slide Images and Back Again via ffmpeg Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/ants.pdf\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Video via Slide Images and Back Again via ffmpeg Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/ants.jpg\" title=\"Video via Slide Images and Back Again via ffmpeg Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Video via Slide Images and Back Again via ffmpeg Primer Tutorial<\/p><\/div>\n<p>Reading yesterday&#8217;s <a target=\"_blank\" title='LibreOffice Spreadsheet via dBase Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/libreoffice-spreadsheet-via-dbase-primer-tutorial\/' rel=\"noopener\">LibreOffice Spreadsheet via dBase Primer Tutorial<\/a> you can&#8217;t say I didn&#8217;t warn you about my interest in ants (and bees)?  Glad you asked?<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<ul>\n<li>the queen ant (often just one per ant colony) is not a leader as such in thinking out strategies &#8230; believe it or not &#8230;<\/li>\n<li>it is believed ant colony strategies are worked by what we might call &#8220;groupthink&#8221;<\/li>\n<li>ants march in line often and the scent that the ants leave behind is pheromone, that non-leader ants follow off that left behind by the &#8220;leader ant&#8221; &#8230; ie. &#8220;leader&#8221; of position, rather than &#8220;leader&#8221; of hierarchy<\/li>\n<\/ul>\n<p>So seeing some ants walking in line up a power pole, used an iPhone to capture a very short video (short enough to use the iPhone&#8217;s Photo app&#8217;s Share via Mail (attachment) method of emailing to the MacBook Pro, and then (<a target=\"_blank\" title='Gmail' href='http:\/\/gmail.com' rel=\"noopener\">Gmail website<\/a>) downloading) of this, and later, buck the &#8220;ant&#8221; trend, and &#8220;anthropomorphise&#8221; a &#8220;star ant&#8221;, by honing in on an ant in this video and ring it (and its movement) before creating another &#8220;Star Ant Video&#8221;.<\/p>\n<p>There are video editing approaches you could use, but what got us interested was the thought of &#8230;<\/p>\n<ul>\n<li>break the video into its component parts &#8230; just like animations like <a target=\"_blank\" href='https:\/\/www.youtube.com\/watch?v=tJBeih6JZrs' title='?' rel=\"noopener\">&#8220;Bugs Bunny&#8221;<\/a> &#8230; a series of (slide, or frame) images<\/li>\n<li>edit those (slide) images to add the (we&#8217;ve decided should be) red ringing of our &#8220;Star Ant&#8221; &#8230; who we&#8217;ve decided you, the user can call whatever you so desire &#8230; aaaaaaarrrrrrr<\/li>\n<li>reconstitute a new video from some new (slide) image components<\/li>\n<\/ul>\n<p>That&#8217;s where one of our favourite Mac Os X friendly media players, which is also a command line &#8220;player&#8221; (yayyyyyy!) comes to the fore, for us.  It&#8217;s the wonderful <a target=\"_blank\" title='ffmpeg' href='https:\/\/www.ffmpeg.org\/' rel=\"noopener\">ffmpeg<\/a> which we&#8217;ve had for a long time now on this MacBook Pro until a disk crash mentioned some weeks back.  Could get it back off restore, but decided to reconsitute &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='Xcode IDE information from Apple' href='https:\/\/developer.apple.com\/technologies\/tools\/' rel=\"noopener\">Xcode<\/a> command line tools<\/li>\n<li><a target=\"_blank\" title='Homebrew as alternative to Package Manager' href='http:\/\/brew.sh\/' rel=\"noopener\">Homebrew<\/a><\/li>\n<li>ffmpeg<\/li>\n<\/ul>\n<p> &#8230; as a fairly straightforward exercise (given you have Xcode installed already) via a <a target=\"_blank\" title='Ren\u00e9 Calles webpage' href='http:\/\/www.renevolution.com\/ffmpeg\/2013\/03\/16\/how-to-install-ffmpeg-on-mac-os-x.html' rel=\"noopener\">How to install FFmpeg on Mac OS X<\/a> webpage by Ren\u00e9 Calles, thanks, heaps, we discovered the commands that worked well for us that go &#8230;<\/p>\n<p><code><br \/>\nruby -e \"$(curl -fsSL https:\/\/raw.githubusercontent.com\/Homebrew\/install\/master\/install)\"<br \/>\nbrew install ffmpeg --with-fdk-aac --with-ffplay --with-freetype --with-frei0r --with-libass --with-libvo-aacenc --with-libvorbis --with-libvpx --with-opencore-amr --with-openjpeg --with-opus --with-rtmpdump --with-schroedinger --with-speex --with-theora --with-tools<br \/>\n<\/code><\/p>\n<p> &#8230; to (re)install ffmpeg so that, then &#8230;<\/p>\n<p><code><br \/>\nffmpeg -i IMG_0738.MOV -r 1 image-%04d.jpeg<br \/>\n<\/code><\/p>\n<p> &#8230; could create those original 7 (slide) images, though the use of a value bigger than <a target=\"_blank\" title='ffmpeg information' href='http:\/\/www.ffmpeg.org\/ffmpeg.html' rel=\"noopener\">1<\/a> frames per second for the &#8220;-r&#8221; switch could be on the cards for your usages.<\/p>\n<p>How to edit those images?  We just used the Mac OS X version of <a target=\"_blank\" title='Paintbrush for Mac' href='http:\/\/paintbrush.sourceforge.net\/downloads\/' rel=\"noopener\">PaintBrush<\/a> and lined a lot of these images side by side across the screen to try to track our &#8220;Star Ant&#8221; and award it the &#8220;Red Ellipse PaintBrush Order of Merit&#8221; (for individualism &#8230; tee hee).<\/p>\n<p>Reconstituting the new slides into a new video we remember was another talent of ffmpeg and found this <a target=\"_blank\" title='Useful webpage, thanks' href='https:\/\/stackoverflow.com\/questions\/24961127\/how-to-create-a-video-from-images-with-ffmpeg' rel=\"noopener\">useful webpage<\/a>, thanks, on the topic of taking raw (slide) images to create a video via ffmpeg.  Actually, though, we also had our previous very useful <a target=\"_blank\" href='#agifvphpwphpdurit' title='Animated GIF and Video via PHP Writing PHP Data URI Tutorial' rel=\"noopener\">Animated GIF and Video via PHP Writing PHP Data URI Tutorial<\/a> (presented below) to turn to to end up with the Mac OS X (Terminal session command line command &#8230;<\/p>\n<p><code><br \/>\nffmpeg -r 1 -i image-%04d.jpg ants.mp4<br \/>\n<\/code><\/p>\n<p>There are no worries with video file &#8220;workings&#8221; to do with uppercase and lowercase and names, so we &#8230;<\/p>\n<p><code><br \/>\ncp IMG_0738.MOV ants.mov<br \/>\n<\/code><\/p>\n<p> &#8230; just for some consistency purposes (and could use &#8220;mv&#8221; to rename instead) so that we can show you &#8230;<\/p>\n<table style=width:100%>\n<tr>\n<th>Before &#8230;<\/th>\n<th>After &#8230; &#8220;Star Ant Video&#8221;<\/th>\n<\/tr>\n<tr>\n<td><video controls type='video\/mp4' style='width:300px;'><source src='http:\/\/www.rjmprogramming.com.au\/Mac\/ants.mov'><\/source><\/video><\/td>\n<td><video controls type='video\/mp4' style='width:300px;'><source src='http:\/\/www.rjmprogramming.com.au\/Mac\/ants.mp4'><\/source><\/video><\/td>\n<\/tr>\n<\/table>\n<p>See a lot of all these goings on at today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/ants.pdf\" title=\"Click picture\" rel=\"noopener\">PDF slideshow<\/a>.<\/p>\n<hr>\n<p id='agifvphpwphpdurit'>Previous relevant <a target=\"_blank\" title='Animated GIF and Video via PHP Writing PHP Data URI Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-and-video-via-php-writing-php-data-uri-tutorial\/' rel=\"noopener\">Animated GIF and Video via PHP Writing PHP Data URI Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated GIF and Video via PHP Writing PHP Data URI Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/video_or_not.jpg\" title=\"Animated GIF and Video via PHP Writing PHP Data URI Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Animated GIF and Video via PHP Writing PHP Data URI Tutorial<\/p><\/div>\n<p>There is a great open source command line application called <a target=\"_blank\" title='FFmpeg' href='https:\/\/www.ffmpeg.org\/' rel=\"noopener\">&#8220;FFmpeg&#8221;<\/a> that can create video (or convert video) from image slides (for instance), and so, if we <b>merge functionality for this<\/b> into yesterday&#8217;s <a title='Animated GIF and Slideshow via PHP Writing PHP Data URI Tutorial' href='#agifsphpwphpdurit'>Animated GIF and Slideshow via PHP Writing PHP Data URI Tutorial<\/a> some &#8220;presentation&#8221; styles that our <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" title=\"Click picture\" rel=\"noopener\">web application<\/a> can process are now &#8230;<\/p>\n<ul>\n<li>animated GIF<\/li>\n<li>slideshow<\/li>\n<li><b>video<\/b><\/li>\n<\/ul>\n<p>As useful as &#8220;FFmpeg&#8221; is, it is not necessarily a default application existing on web server operating systems like our rjmprogramming.com.au&#8217;s CentOS server.  But we do have it on our Mac OS X (MacBook Pro) operating system&#8217;s command line, so we write our PHP determining whether to &#8230;<\/p>\n<ul>\n<li>create the video data there and then via &#8220;FFmpeg&#8221; and PHP&#8217;s <a target=\"_blank\" title='PHP exec() method information' href='http:\/\/php.net\/manual\/en\/function.exec.php' rel=\"noopener\">exec<\/a> method &#8230; or &#8230;<\/li>\n<li>provide instructions to be able to create the video back at your client computer (that has &#8220;FFmpeg&#8221; perhaps) &#8230; to suit the &#8230;<br \/>\n<code><br \/>\nffmpeg -r 1 -i %03d.jpg video.mp4<br \/>\n<\/code><br \/>\n &#8230; to create a video called video.mp4 with 1 second delays between (input) slides named 001.jpg then 002.jpg then 003.jpg etcetera &#8230; thanks <a target=\"_blank\" title='Useful link' href='https:\/\/stackoverflow.com\/questions\/5892308\/create-video-file-using-php' rel=\"noopener\">useful webpage<\/a> for the help &#8230; that in the command line can sometimes be played via &#8230;<br \/>\n<code><br \/>\nopen video.mp4<br \/>\n<\/code><br \/>\n &#8230; or used in some HTML as per &#8230;<br \/>\n<code><br \/>\n&lt;video controls id=ivideo type='video\/mp4'&gt;&lt;source src='video.mp4'&gt;&lt;\/source&gt;&lt;\/video&gt;<br \/>\n<\/code><br \/>\n &#8230; that we show you, below, the Mac OS X local <a target=\"_blank\" title='MAMP local Apache\/PHP\/MySql web server' href='http:\/\/mamp.info' rel=\"noopener\">MAMP<\/a> (Apache\/PHP\/MySql) web server running of today&#8217;s PHP to create &#8230;<br \/>\n<video style='width:100%;' controls id=ivideo type='video\/mp4'><source src='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/vid_eo.mp4'><\/source><\/video>\n<\/li>\n<\/ul>\n<p>If you are a regular at this blog and &#8220;FFmpeg&#8221; sounds a bit familiar to you, that&#8217;s probably because you&#8217;ve read <a target=\"_blank\" title='FFmpeg Image Optimization Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-image-optimization-primer-tutorial\/' rel=\"noopener\">FFmpeg Image Optimization Primer Tutorial<\/a> on an earlier occasion <font size=2>&#8230; by candlelight <\/font><font size=1>&#8230; with the lights dimmed?!<\/font><\/p>\n<p>See this in the context of how this PHP <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php----GETME\" title=\"tutorial_to_animated_gif.php\" rel=\"noopener\">tutorial_to_animated_gif.php<\/a> code changed for videos in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php----GETME\" rel=\"noopener\">this way<\/a> or try it as a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" title=\"Click picture\" rel=\"noopener\">live run<\/a>.<\/p>\n<hr>\n<p id='agifsphpwphpdurit'>Previous relevant <a target=\"_blank\" title='Animated GIF and Slideshow via PHP Writing PHP Data URI Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-and-slideshow-via-php-writing-php-data-uri-tutorial\/' rel=\"noopener\">Animated GIF and Slideshow via PHP Writing PHP Data URI Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated GIF and Slideshow via PHP Writing PHP Data URI Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/agmore.jpg\" title=\"Animated GIF via PHP Writing PHP Data URI Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Animated GIF and Slideshow via PHP Writing PHP Data URI Tutorial<\/p><\/div>\n<p>To us, there are great similarities between animated GIFs and slideshows, as two forms of &#8220;presentation&#8221;, and so to extend yesterday&#8217;s <a title='Animated GIF via PHP Writing PHP Data URI Tutorial' href='#agifphpwphpdurit'>Animated GIF via PHP Writing PHP Data URI Tutorial<\/a> animated GIF creator &#8220;PHP Writes PHP&#8221; web application that now has the option for <a target=\"_blank\" title='Data URI information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Data_URI_scheme' rel=\"noopener\">data URI<\/a> &#8220;exports&#8221; we add the functionality for &#8230;<\/p>\n<ul>\n<li>slideshow creation (using our inhouse methods) which defaults to a horizontal (hashtag type of) navigation &#8230; as well as adding a &#8230;<\/li>\n<li>slideshow creation, with Data URI image data, using functionality as if CSS <a target=\"_blank\" title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp' rel=\"noopener\">z-index<\/a> (ie. slides stacked on top of each other in <a target=\"_blank\" title='Overlay blog postings at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay' rel=\"noopener\">&#8220;overlay&#8221;<\/a> style) was being used, but actually isn&#8217;t &#8230;<\/li>\n<\/ul>\n<p> &#8230; that little bit different to another &#8220;stacked&#8221; (or z-index feeling) approach we talked about with <a target=\"_blank\" title='Multiple Class Slideshow Details Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/multiple-class-slideshow-details-tutorial\/' rel=\"noopener\">Multiple Class Slideshow Details Tutorial<\/a>, where HTML element <a target=\"_blank\" title='HTML class information from w3schools' href='http:\/\/www.w3schools.com\/html\/html_classes.asp' rel=\"noopener\">&#8220;class&#8221;<\/a> properties were changed so that the last class defined reflects the look of the slideshow slide desired at any given time.  We just use an array, and a <a target=\"_blank\" title='Javascript setTimeout() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp' rel=\"noopener\">setTimeout<\/a> timer to achieve the same ends today, with our work (or &#8220;presentation&#8221;).  If this &#8220;horizontal versus stack&#8221; navigation choice interests you, also take a read of <a target=\"_blank\" title='HTML Input Element Types Randomized History Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-input-element-types-randomized-history-tutorial\/' rel=\"noopener\">HTML Input Element Types Randomized History Tutorial<\/a>.<\/p>\n<p>Again, with all this added functionality, because it is &#8220;hosted&#8221; in an HTML <a target=\"_blank\" title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp' rel=\"noopener\">iframe<\/a> element all the existant web browser (Windows right click or Mac OS X two finger gesture) functionality can come into play, and make life quite interesting for your non-mobile users &#8220;collecting&#8221; data URIs <font size=1>&#8230; there are worse hobbies!<\/font><\/p>\n<p>You can see this in the context of how this PHP <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php---GETME\" title=\"tutorial_to_animated_gif.php\" rel=\"noopener\">tutorial_to_animated_gif.php<\/a> code changed for slideshows in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php---GETME\" rel=\"noopener\">this way<\/a> or try it as a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" title=\"Click picture\" rel=\"noopener\">live run<\/a>.<\/p>\n<hr>\n<p id='agifphpwphpdurit'>Previous relevant <a target=\"_blank\" title='Animated GIF via PHP Writing PHP Data URI Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-via-php-writing-php-data-uri-tutorial\/' rel=\"noopener\">Animated GIF via PHP Writing PHP Data URI Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Animated GIF via PHP Writing PHP Data URI Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/animegif_datauri.jpg\" title=\"Animated GIF via PHP Writing PHP Data URI Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF via PHP Writing PHP Data URI Tutorial<\/p><\/div>\n<p>The previous relevant &#8220;PHP writes PHP&#8221; methodology <a target=\"_blank\" title='Animated GIF information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/GIF' rel=\"noopener\">animated GIF<\/a> creator we talked about, first, with <a title='Animated GIF via PHP Writing PHP Primer Tutorial' href='#agvpwppt'>Animated GIF via PHP Writing PHP Primer Tutorial<\/a> came back to mind yesterday with our <a target=\"_blank\" title='Missing Javascript Audio on Unmute Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/missing-javascript-audio-on-unmute-tutorial\/' rel=\"noopener\">Missing Javascript Audio on Unmute Tutorial<\/a>, where we pondered on whether an animated GIF could be represented on a webpage by a <a target=\"_blank\" title='Data URI information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Data_URI_scheme' rel=\"noopener\">data URI<\/a>.  Why take an interest in this?  Data URIs are very important to do with &#8230;<\/p>\n<ul>\n<li>future mobile development web form navigation benefits from their usage<\/li>\n<li>the use of data URIs make your web pages independent of web server location issues, so make your web data more portable, and flexible<\/li>\n<\/ul>\n<p> &#8230; and ideally, animated GIFs are also not just a decorative part of all this web application usage (as they can be a very efficient representation of an animation that could not be a more succinct way to show that animation or presentation), and if they can be made to be like any other GIF or image data file in the ways they can be represented (and used), then that is all for the good.<\/p>\n<p>So we changed the Jeroen van Wissen&#8217;s <a target=\"_blank\" href='http:\/\/www.jeroenvanwissen.nl\/weblog\/php\/howto-generate-animated-gif-with-php' title='Great PHP library for Animated GIF creation work, thanks' rel=\"noopener\">inspired<\/a> PHP (&#8220;PHP writes PHP&#8221; methodology) code <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php--GETME\" rel=\"noopener\">tutorial_to_animated_gif.php<\/a> code allow for this extra animated GIF data URI representation in a new additional HTML iframe (containing the animegif.html of code below) that when harnessing existant web browser (Windows right click or Mac OS X two finger gesture) functionality can glean for us, as required, that animated GIF&#8217;s data URI representation.  But don&#8217;t get too excited about this being rocket science, in that with a bit of effort, and PHP, it could have been gleaned <b>from what we already produced<\/b>, in that (in PHP &#8220;land&#8221;) &#8230;<\/p>\n<p><code><br \/>\n$lastbitto=\"\\$fp = fopen('animegif.gif', 'w');<br \/>\n\\$data = \\$gif->GetAnimation();<br \/>\n<b>\\$dataUri = 'data:image\/gif;base64,' . <a target=\"_blank\" title='PHP base64_encode information' href='http:\/\/php.net\/manual\/en\/function.base64-encode.php' rel=\"noopener\">base64_encode<\/a>(\\$data);<\/b><br \/>\nfwrite(\\$fp, \\$data);<br \/>\nfclose(\\$fp);<br \/>\n<b>\\$fp = fopen('animegif.html', 'w');<br \/>\nfwrite(\\$fp, '&lt;!doctype html&gt;&lt;html&gt;&lt;body&gt;&lt;h1&gt;Data URI version below&lt;h1&gt;&lt;br&gt;&lt;h4&gt; ... via web browser (Windows right click, Mac OS X two finger gesture ...&lt;\/h4&gt;&lt;br&gt;&lt;img src=' . \\\"\\\\n\\\" . \\$dataUri . \\\"\\\\n\\\" . ' title=DataURI&gt;&lt;\/img&gt;&lt;\/body&gt;&lt;\/html&gt;');<br \/>\nfclose(\\$fp);\";<\/b><br \/>\n<\/code><\/p>\n<p>You can see this in the context of how this PHP code changed in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php--GETME\" rel=\"noopener\">this way<\/a> or try it as a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" title=\"Click picture\" rel=\"noopener\">live run<\/a>.<\/p>\n<hr>\n<p id='agvpwppt'>Previous relevant <a target=\"_blank\" title='Animated GIF via PHP Writing PHP Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-via-php-writing-php-primer-tutorial\/' rel=\"noopener\">Animated GIF via PHP Writing PHP Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated GIF via PHP Writing PHP Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/animated_gif-186of.jpg\" title=\"Animated GIF via PHP Writing PHP Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF via PHP Writing PHP Primer Tutorial<\/p><\/div>\n<p>We find another very useful reason for PHP to write PHP.  Today we establish a PHP web application to dynamically create Animated GIF images via some still images, like <a target=\"_blank\" title='Gifpal' href='http:\/\/www.gifpal.com' rel=\"noopener\">Gifpal<\/a> would do.<\/p>\n<p>We have some great open source PHP code to thank for the basis of the functionality we found at Jeroen van Wissen&#8217;s very <a target=\"_blank\" href='http:\/\/www.jeroenvanwissen.nl\/weblog\/php\/howto-generate-animated-gif-with-php' rel=\"noopener\">useful link<\/a>, thanks.<\/p>\n<p>Then we added a more user friendly interface to get the information off the user we need.   We present this in an HTML form, which navigates to the same PHP to do the actual assembly of the Animated GIF via techniques where PHP writes PHP &#8230; and really needs to, to be useful.<\/p>\n<p>Do you remember, last, when we did some PHP writing PHP functionality &#8230; <a target=\"_blank\" title='PHP Writes PHP Vertical TextBoxes Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-writes-php-vertical-textboxes-primer-tutorial\/' rel=\"noopener\">PHP Writes PHP Vertical TextBoxes Primer Tutorial<\/a>?<\/p>\n<p>And inside the PHP it makes big use of the <a target=\"_blank\" title='GD and Image Functions' href='http:\/\/php.net\/manual\/en\/ref.image.php' rel=\"noopener\">GD and Image Functions<\/a> to read and write the image data we assemble via the user information.<\/p>\n<p>This Animated GIF form of animation is the easiest to implement, as it consists of just the one GIF image file, but the user has very little control over the animation settings, such as the delay between stills, one of the settings we ask about in our web application.<\/p>\n<p>Our PHP source code today you could call <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php_GETME\" title='tutorial_to_animated_gif.php' rel=\"noopener\">tutorial_to_animated_gif.php<\/a> and we redirect you to some live run ideas &#8230;<\/p>\n<ul>\n<li>normal run with HTML form which posts back to itself &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" title='live run' rel=\"noopener\">live run<\/a><\/li>\n<li>example GET parameters <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php?delay=500&#038;stitle=PaintBrush%20Panning%20Primer%20Tutorial&#038;slideshow=http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/index.html\" title='get parameters live run' rel=\"noopener\">run<\/a> (like our tutorial picture)<\/li>\n<\/ul>\n<p>Hope you find this tutorial useful.<\/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='#d17197' onclick='var dv=document.getElementById(\"d17197\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/category\/animation\/\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17197' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d35097' onclick='var dv=document.getElementById(\"d35097\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/category\/animated-gif\/\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35097' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d35120' onclick='var dv=document.getElementById(\"d35120\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/slideshow\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35120' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d35146' onclick='var dv=document.getElementById(\"d35146\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ffmpeg\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35146' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d39732' onclick='var dv=document.getElementById(\"d39732\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/video\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d39732' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d44071' onclick='var dv=document.getElementById(\"d44071\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ffmpeg\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d44071' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d55227' onclick='var dv=document.getElementById(\"d55227\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/slide\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55227' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d55486' onclick='var dv=document.getElementById(\"d55486\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onmouseover\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55486' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d55491' onclick='var dv=document.getElementById(\"d55491\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/settimeout\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55491' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d55499' onclick='var dv=document.getElementById(\"d55499\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/preview\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55499' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d55503' onclick='var dv=document.getElementById(\"d55503\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/alignment\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55503' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d55516' onclick='var dv=document.getElementById(\"d55516\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/drag\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55516' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d55525' onclick='var dv=document.getElementById(\"d55525\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/text-decoration\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55525' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d57540' onclick='var dv=document.getElementById(\"d57540\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/simulation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57540' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d57550' onclick='var dv=document.getElementById(\"d57550\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/imagemagick\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57550' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d57557' onclick='var dv=document.getElementById(\"d57557\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/switch\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57557' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d57575' onclick='var dv=document.getElementById(\"d57575\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/crontab\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57575' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d57589' onclick='var dv=document.getElementById(\"d57589\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/cache\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57589' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>As a programmer, am sure am no &#8220;Robinson Crusoe&#8221; thinking that we wish more often the web browser cache would come to our rescue, especially when web server tidying up results in the &#8220;rug being pulled from under&#8221; a programmatical &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-imagemagick-cache-backup-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":[2,4,12,14,29,37],"tags":[3848,4159,69,83,84,85,128,177,2928,233,234,4155,2650,274,284,1654,297,302,2310,1750,360,367,1929,400,405,418,3336,429,430,452,2730,1533,1615,549,2212,587,590,1658,599,629,652,707,4156,776,4154,4157,3220,861,871,4158,913,914,2306,932,970,983,997,3274,1911,1063,1893,2994,2589,1149,2734,2311,3883,3945,1279,1319,1411],"class_list":["post-57589","post","type-post","status-publish","format-standard","hentry","category-ajax","category-animation","category-elearning","category-event-driven-programming","category-operating-system","category-tutorials","tag-3848","tag-404-shtml","tag-ajax","tag-animated-gif","tag-animation-2","tag-apache","tag-backup","tag-cache","tag-combobox","tag-command","tag-command-line","tag-commerce","tag-convert","tag-crontab","tag-curl","tag-data-uri","tag-data-url","tag-datetime","tag-details","tag-document-root","tag-download","tag-dropdown","tag-error","tag-event","tag-exec","tag-file","tag-filename","tag-file_get_contents","tag-file_put_contents","tag-form","tag-formdata","tag-get","tag-glob","tag-gui","tag-head","tag-iframe","tag-image","tag-imagemagick","tag-img","tag-ip-address","tag-javascript","tag-linux","tag-localize","tag-meta","tag-methos","tag-modified-date","tag-navigate","tag-onclick","tag-onmouseover","tag-page-not-found","tag-pdf","tag-peer-to-peer","tag-personalize","tag-php","tag-post","tag-preview","tag-programming","tag-recall","tag-refresh","tag-reveal","tag-schedule","tag-simulate","tag-simulation","tag-slide","tag-slides","tag-summary","tag-switch","tag-tidy","tag-time","tag-tutorial","tag-web-server"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57589"}],"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=57589"}],"version-history":[{"count":15,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57589\/revisions"}],"predecessor-version":[{"id":67865,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57589\/revisions\/67865"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=57589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=57589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=57589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}