Slideshow Animation via Image Visibility Follow Up Tutorial

Slideshow Animation via Image Visibility Follow Up Tutorial

Slideshow Animation via Image Visibility Follow Up Tutorial

We continue on with yesterday’s tutorial Slideshow Animation via Image Visibility Primer Tutorial which extended the “overlay” idea presented previously with WordPress Blog Search Within Search Overlay Tutorial 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” property to work) by changing which one was visible at any given time (and at any given time, only one is visible).

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 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.

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

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


<td id='twording' style=' background-color: #f0f0f0; display: table-cell; vertical-align: bottom;'>

We wanted to thank this link heaps, for advice, here.

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 which changed from yesterday as per this link, or try a live run … believe me, it is better than a dead run.


Previous relevant Slideshow Animation via Image Visibility Primer Tutorial is shown below.

Slideshow Animation via Image Visibility Primer Tutorial

Slideshow Animation via Image Visibility Primer Tutorial

Today’s tutorial extends the “overlay” idea presented yesterday with WordPress Blog Search Within Search Overlay Tutorial 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” property to work) by changing which one was visible at any given time (and at any given time, only one is visible).

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

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.

Some other concepts we’ve visited today with PHP source code you could call slideshow_via_invisibility_and_fade.php are …

  • homemade Javascript image fading via controlling the image (HTML img tag) CSS opacity property via an independent setTimeout controlled Javascript function
  • using the HTML meter element’s onclick event to turn it into more than a display, but rather a user means to adapt the presentation … believe me, there are many other ways to achieve this, and this is just an idea for you to mull over … maybe you remember that last time we talked about the HTML meter element at HTML/Javascript Staged Animation Meter Presentation Tutorial
  • CSS rotation (of an HTML div element) which we talked about previously with CSS3 3D Rotation and Transformation Primer Tutorial … why? … well, the HTML meter we wanted to control the “position:absolute; top:70px;” of (ie. leave the “left” property relative), so that we could calibrate the user’s click from a known top Y co-ordinate, along with the known length of the HTML meter element (which we specify)
  • the wording to go with the images garnered from the web via PHP’s file_get_contents() method

Hope this topic is of interest to you, or of practical benefit for something you are trying … it is a topic where cross-browser and cross-platform thoughts could be very important as to how you proceed.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

This entry was posted in Animation, eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , , , , , . Bookmark the permalink.

13 Responses to Slideshow Animation via Image Visibility Follow Up Tutorial

  1. Luis Zebley says:

    Merely wanna say that this is extremely helpful, Thanks for taking your time to write this.

  2. You produced some decent points there. I looked on-line for any difficulty and identified most individuals will go in conjunction with with your web site.

  3. whoah this weblog is excellent i really like studying your articles. Stay up the good work! You recognize, lots of people are hunting around for this information, you could aid them greatly.

  4. topics and share it with us. I believe it will assist a lot of individuals. Many thanks

  5. Absorbing says:

    Useful info. Lucky me I discovered your website by accident, and I’m surprised why this coincidence didn’t happened in advance! I bookmarked it.

  6. Save says:

    I loved as much as you will receive carried out right here. The sketch is attractive, your authored material stylish. nonetheless, you command get bought an nervousness over that you wish be delivering the following. unwell unquestionably come more formerly again as exactly the same nearly very often inside case you shield this increase.

  7. Jayne Hilbun says:

    Sometimes your blog is loading slowly, improved locate a far better host.`*-;`

  8. Sue Johnston says:

    Really appreciate you sharing this post.Much thanks again. Great.

  9. Lynne Mensi says:

    Hey there, You’ve done a great job. I will definitely digg it and personally suggest to my friends. I am sure they’ll be benefited from this website.

  10. CARLITA says:

    I’m amazed, I have to admit. Seldom do I encounter a
    blog that’s equally educative and engaging, and let
    me tell you, you’ve hit the nail on the head. The issue is
    an issue that not enough men and women are speaking intelligently about.
    Now i’m very happy I stumbled across this during my hunt for something concerning this.

  11. The method is quite useful when you teach a software or computer based program to your audience. Of course, you need to follow your presentation with hands on session for practice.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>