{"id":44787,"date":"2019-04-25T03:01:24","date_gmt":"2019-04-24T17:01:24","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=44787"},"modified":"2019-04-24T21:14:14","modified_gmt":"2019-04-24T11:14:14","slug":"image-gallery-figcaption-slideshow-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/image-gallery-figcaption-slideshow-tutorial\/","title":{"rendered":"Image Gallery Figcaption Slideshow 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=\"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","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Image Gallery Figcaption Primer Tutorial 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 tutorial picture), &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/image-gallery-figcaption-slideshow-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,2571,2944,475,576,578,590,2348,932,980,997,1151,1254,1319],"class_list":["post-44787","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-tutorials","tag-animation-2","tag-caption","tag-figcaption","tag-gallery","tag-html","tag-html5","tag-image","tag-image-gallery","tag-php","tag-presentation","tag-programming","tag-slideshow","tag-text","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44787"}],"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=44787"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44787\/revisions"}],"predecessor-version":[{"id":44790,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44787\/revisions\/44790"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=44787"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=44787"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=44787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}