{"id":44794,"date":"2019-04-26T03:01:06","date_gmt":"2019-04-25T17:01:06","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=44794"},"modified":"2019-04-26T07:25:44","modified_gmt":"2019-04-25T21:25:44","slug":"media-gallery-figcaption-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/media-gallery-figcaption-tutorial\/","title":{"rendered":"Media Gallery Figcaption Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gallery_via_figcaption.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Media Gallery Figcaption Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gallery_via_figcaption_yet_again.jpg\" title=\"Media Gallery Figcaption Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Media Gallery Figcaption Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Image Gallery Figcaption Slideshow Tutorial' href='#igfst'>Image Gallery Figcaption Slideshow Tutorial<\/a> added some animation to the &#8220;Image Gallery (via Figcapture elements)&#8221; web application we&#8217;d been developing.  Today we &#8230;<\/p>\n<ul>\n<li>extend to &#8220;Media Gallery (via Figcapture elements)&#8221; (from &#8220;Image Gallery (via Figcapture elements)&#8221;) via code to extend the accepted data (of gallery &#8220;slides&#8221;) to image or video or audio &#8220;media&#8221; types of URLs<\/li>\n<li>allow for reruns in a child HTML iframe below the gallery, adding in hashtag navigations to reach this rerun functionality, and from there hashtag navigate back up to the gallery headings (in addition to yesterday&#8217;s hashtag navigations) &#8230; and &#8230;<\/li>\n<li>nullify the onclick logic of an image slide that opens that image in a new window, when finding a <a target=_blank href='http:\/\/www.w3schools.com\/html\/html5_video.asp' title='HTML video tag information from w3schools'>video<\/a> and\/or <a target=_blank href='http:\/\/www.w3schools.com\/html\/html5_audio.asp' title='HTML audio tag information from w3schools'>audio<\/a>, where it is better to let an onclick piece of logic and action handle the media&#8217;s &#8220;play&#8221; functionality (in that we specify &#8220;controls&#8221; attribute for video and audio elements)<\/li>\n<\/ul>\n<p>How do we approach that first idea?  As we so often do.  Set up (and making use of) two PHP arrays mapping non-image <a target=_blank title='MIME information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/MIME'>mime types<\/a> to (URL) file extensions, as per &#8230;<\/p>\n<p><code><br \/>\n$types = array(\"audio\/wav\",\"audio\/x-wav\",\"audio\/x-pn-realaudio\",\"audio\/x-mpegurl\",\"audio\/x-aiff\",\"audio\/mpeg\",\"audio\/mid\",\"video\/mp4\",<br \/>\n      \"audio\/basic\",\"audio\/ogg\",\"video\/x-sgi-movie\",\"video\/x-msvideo\",\"video\/quicktime\",\"audio\/mp3\",\"video\/mp4\",\"video\/mpeg\",<br \/>\n      \"video\/x-la-asf\",\"video\/ogg\",\"video\/webm\",\"audio\/mp4\");<br \/>\n$exts = array(\".wav\",\".wav\",\".ram\",\".m3u\",\".aiff\",\".mp3\",\".rmi\",\".mp4\",<br \/>\n      \".snd\",\".ogg\",\".movie\",\".avi\",\".mov\",\".mp3\",\".m4v\",\".mpeg\",<br \/>\n      \".lsx\",\".ogv\",\".webm\",\".m4a\");<br \/>\n<\/code><\/p>\n<p> &#8230; where for these non-image media the &#8230;<\/p>\n<ol>\n<li>element type is the bit before the &#8220;\/&#8221; in matching (with $exts off the URL entered) $types array<\/li>\n<li>that media element&#8217;s source (sub)element type attribute is given the whole (mime type) $types value, to maximize the chance your web browser can play the media appropriately<\/li>\n<\/ol>\n<p>The <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gallery_via_figcaption_yet_again.jpg\" title=\"Tutorial picture\">tutorial picture<\/a> today shows us doing this for the .\/*.m*4* media of HTTP:\/\/www.rjmprogramming.com.au\/PHP web server &#8220;address&#8221; where the PHP code below resides.<\/p>\n<p>Again, we hope you agree that these are improvements to what is possible here with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/gallery_via_figcaption.php--GETME\" title=\"gallery_via_figcaption.php\">the changed PHP<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gallery_via_figcaption.php--GETME\" title=\"gallery_via_figcaption.php\">gallery_via_figcaption.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gallery_via_figcaption.php\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='igfst'>Previous relevant <a target=_blank title='Image Gallery Figcaption Slideshow Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/image-gallery-figcaption-slideshow-tutorial\/'>Image Gallery Figcaption Slideshow 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\/gallery_via_figcaption.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Image Gallery Figcaption Slideshow Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gallery_via_figcaption_more.jpg\" title=\"Image Gallery Figcaption Slideshow Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Image Gallery Figcaption Slideshow Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Image Gallery Figcaption Primer Tutorial' href='#igfpt'>Image Gallery Figcaption Primer Tutorial<\/a> progress regarding Image Galleries Based On Figcapture elements involved no animation in its makeup or functionality.  Around here, though, we often deal with related sets of images (as with example of our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gallery_via_figcaption_more.jpg\" title=\"Tutorial picture\">tutorial picture<\/a>), and sure you do too on occasions.  That is why we are extending Image Gallery (via Figcapture elements) as per &#8230;<\/p>\n<ul>\n<li>add a means to animate the Image Gallery into a hashtag navigation based Slideshow (and the means to stop that Slideshow &#8230; and return to) &#8230; and &#8230;<\/li>\n<li>add a means by which you can jump (ie. navigate) to an image of the presentation, via an associated dropdown list of images &#8230; whose user specification functionality has been improved via &#8230;<\/li>\n<li>add a means by which the user can not only define images using single image absolute URLs, but now can define relative URLs (ie. to images on the rjmprogramming.com.au domain), where good ol&#8217; PHP <a target=_blank title='PHP glob() method information' href='http:\/\/php.net\/manual\/en\/function.glob.php'>glob<\/a> usage can allow the user to specify relative URLs containing the wildcards ? (one character), [] (range of characters) or * (any number of characters), to specify a single relative URL file specification capable of pointing at several Image Gallery images &#8230; and we also offer the chance for the user to &#8230;<\/li>\n<li>add a means by which the user can specify the maximum number of Image Gallery slides per row<\/li>\n<\/ul>\n<p>We hope you agree that these are improvements to what is possible here with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/gallery_via_figcaption.php-GETME\" title=\"gallery_via_figcaption.php\">the changed PHP<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gallery_via_figcaption.php-GETME\" title=\"gallery_via_figcaption.php\">gallery_via_figcaption.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gallery_via_figcaption.php\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='igfpt'>Previous relevant <a target=_blank title='Image Gallery Figcaption Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/image-gallery-figcaption-primer-tutorial\/'>Image Gallery Figcaption 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\/gallery_via_figcaption.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Image Gallery Figcaption Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/figcaption_poc.jpg\" title=\"Image Gallery Figcaption Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Image Gallery Figcaption Primer Tutorial<\/p><\/div>\n<p>We have a new slideshow presentation, or image gallery web application idea, today.  It uses in its methodologies the HTML <a target=_blank title='HTML figcaption information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_figcaption.asp'>figcaption<\/a> tag, new to HTML5, and useful, in that it associates images with explanatory words, though you don&#8217;t have to follow the &#8220;every picture tells a thousand words&#8221; adage here, as you add your optional caption data.<\/p>\n<p>Think, though, if you do caption when trying out today&#8217;s proof of concept PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gallery_via_figcaption.php_GETME\" title=\"gallery_via_figcaption.php\">gallery_via_figcaption.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gallery_via_figcaption.php\" title=\"Click picture\">live run<\/a> link, that captions make your image galleries that much better.<\/p>\n<p>We&#8217;re pretty sure we&#8217;ll be improving this web application&#8217;s functionality over time, but in the meantime, we hope it helps you out with some image presentation ideas, and we&#8217;ll add the idea onto our list of presentation ideas at <a target=_blank title='PDF on Mac OS X via Images and Finder and Preview Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/pdf-on-mac-os-x-via-images-and-finder-and-preview-tutorial\/'>PDF on Mac OS X via Images and Finder and Preview Tutorial<\/a>.<\/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='#d44776' onclick='var dv=document.getElementById(\"d44776\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gallery\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d44776' 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='#d44787' onclick='var dv=document.getElementById(\"d44787\"); 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='d44787' 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='#d44794' onclick='var dv=document.getElementById(\"d44794\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/media\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d44794' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Image Gallery Figcaption Slideshow Tutorial added some animation to the &#8220;Image Gallery (via Figcapture elements)&#8221; web application we&#8217;d been developing. Today we &#8230; extend to &#8220;Media Gallery (via Figcapture elements)&#8221; (from &#8220;Image Gallery (via Figcapture elements)&#8221;) via code to &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/media-gallery-figcaption-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":[4,12,14,37],"tags":[84,113,2571,2944,475,576,578,590,2348,760,861,932,2362,980,997,1151,1254,1319,1369],"class_list":["post-44794","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-tutorials","tag-animation-2","tag-audio","tag-caption","tag-figcaption","tag-gallery","tag-html","tag-html5","tag-image","tag-image-gallery","tag-media","tag-onclick","tag-php","tag-play","tag-presentation","tag-programming","tag-slideshow","tag-text","tag-tutorial","tag-video"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44794"}],"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=44794"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44794\/revisions"}],"predecessor-version":[{"id":44799,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44794\/revisions\/44799"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=44794"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=44794"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=44794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}