{"id":16532,"date":"2015-08-11T05:01:26","date_gmt":"2015-08-10T19:01:26","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=16532"},"modified":"2015-08-10T14:05:39","modified_gmt":"2015-08-10T04:05:39","slug":"slideshow-animation-via-image-visibility-follow-up-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/slideshow-animation-via-image-visibility-follow-up-tutorial\/","title":{"rendered":"Slideshow Animation via Image Visibility Follow Up Tutorial"},"content":{"rendered":"
\"Slideshow<\/a>

Slideshow Animation via Image Visibility Follow Up Tutorial<\/p><\/div>\n

We continue on with yesterday’s tutorial Slideshow Animation via Image Visibility Primer Tutorial<\/a> which extended the “overlay” idea presented previously with WordPress Blog Search Within Search Overlay Tutorial<\/a> where, you might remember, we had three HTML elements, one visible and the rest invisible, and we “overlayed” (in quotes, because the technique does not need the CSS “position:absolute”<\/a> property to work) by changing which one was visible at any given time (and at any given time, only one is visible).<\/p>\n

Yesterday’s work had a hard coded feel to it, and today we widen the scope out a bit more to be generic enough to handle other blog postings, here at this blog, with a pictorial, and where possible, textual, synopsis of the blog posting … an encapsulation, should we say, presented in the form of a slideshow. We cater for this genericity by introducing an HTML form<\/a> element into the mix, which facilitates navigation to other blog postings, where those blog posting are examined via the PHP $_GET[] parameters posted to itself, scrutinising the relevant blog posting for its image-related data. For each blog posting, this can take on a different “guise” and so this is the greatest challenge with this project.<\/p>\n

As well, regarding yesterday’s work … the HTML meter<\/a> element is not supported with Internet Explorer, nor mobile platforms, so let’s substitute in an HTML input type=number element instead.<\/p>\n

Another matter of interest is the way we have the wording to accompany the images sit within an HTML div<\/a> element within a table cell (HTML td<\/a> element) so that it justifies to the bottom of the table cell, achieved via the bold<\/b> CSS bits …<\/p>\n


\n<td id='twording' style=' background-color: #f0f0f0; display: table-cell; vertical-align: bottom;<\/b>'>
\n<\/code><\/p>\n

We wanted to thank this link<\/a> heaps, for advice, here.<\/p>\n

There’s more to do, but isn’t there just about always. You can see our progression for yourself with the PHP source code you could call slideshow_via_invisibility_and_fade.php<\/a> which changed from yesterday as per this link<\/a>, or try a live run<\/a> … believe me, it is better than a dead run.<\/p>\n

\n

Previous relevant Slideshow Animation via Image Visibility Primer Tutorial<\/a> is shown below.<\/p>\n

\"Slideshow<\/a>

Slideshow Animation via Image Visibility Primer Tutorial<\/p><\/div>\n

Today’s tutorial extends the “overlay” idea presented yesterday with WordPress Blog Search Within Search Overlay Tutorial<\/a> where, you might remember, we had three HTML elements, one visible and the rest invisible, and we “overlayed” (in quotes, because the technique does not need the CSS “position:absolute”<\/a> property to work) by changing which one was visible at any given time (and at any given time, only one is visible).<\/p>\n

Today’s tutorial takes the image data from Developing Black and White Photos Primer Tutorial<\/a> as a good candidate to use with PHP’s glob()<\/a> method we discussed last when we presented PHP Modularization for Lighthouses in Australia Tutorial<\/a>.<\/p>\n

The images of this tutorial are “relatively” stacked into a table cell and take their turns at being the visible one to create the slideshow animation feel to our resultant presentation<\/a>.<\/p>\n

Some other concepts we’ve visited today with PHP source code you could call slideshow_via_invisibility_and_fade.php<\/a> are …<\/p>\n