PHP usort in Slideshow Animation via Image Visibility Tutorial

PHP usort in Slideshow Animation via Image Visibility Tutorial

PHP usort in Slideshow Animation via Image Visibility Tutorial

Was a bit of a surprise to learn that we have not mentioned much about PHP sorting techniques … so let’s get that sorted now.

You may recall the (Microsoft) C “qsort” method we talked about here at this blog (C Sorting ASP.Net Primer Tutorial), and how it facilitates the use of locally written comparison functionality (the method for which “channels” how the C “strcmp” function works).

Such arrangements are very useful for “tailoring” your business logic, as we do today with our use of PHP’s “usort” in conjunction with Slideshow Animation via Image Visibility Modelling Tutorial as shown below, where it is applied to two separate sets of “base data” and has three local comparison function variations of sort when working with that second base data set …

  1. after the use of PHP glob the resultant array ($myarray) of files uses PHP “usort” to sort the files via modified datetime … as in …
    usort($myarray, create_function('$a,$b', 'return filemtime($b) - filemtime($a);'));
  2. the Blog Post base data derived dropdown (HTML select element) (contained in PHP variable $optbits) is first PHP $exoptbits=explode("<option ", $optbits); and then
    usort($exoptbits, “scmp”); function scmp($a, $b) { // oldest to latest comparison method
    if ($a == $b) {
    return 0;
    }
    return ($a < $b) ? -1 : 1;
    }
    usort($exoptbits, “cmp”); function cmp($a, $b) { // alphabetical comparison method
    $ta=explode(“title=”, $a);
    $tb=explode(“title=”, $b);
    if ($ta[sizeof($ta) – 1] == $tb[sizeof($tb) – 1]) {
    return 0;
    }
    return ($ta[sizeof($ta) – 1] < $tb[sizeof($tb) – 1]) ? -1 : 1;
    }
    usort($exoptbits, “revcmp”); function revcmp($a, $b) { // reverse alphabetical comparison method
    $ta=explode(“title=”, $a);
    $tb=explode(“title=”, $b);
    if ($ta[sizeof($ta) – 1] == $tb[sizeof($tb) – 1]) {
    return 0;
    }
    return ($ta[sizeof($ta) – 1] > $tb[sizeof($tb) – 1]) ? -1 : 1;
    }

The message here is, spend the most time getting good base data together, because methods like PHP’s “usort” make it easy to present that same base data in a variety of different “guises” to suit the business logic needs of the software.

You can see this “sorting” progress 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.


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

Slideshow Animation via Image Visibility Modelling Tutorial

Slideshow Animation via Image Visibility Modelling Tutorial

Yesterday, with Slideshow Animation via Image Visibility Follow Up Tutorial as shown below, we continued our pictorial, and where possible, textual, synopsis of blog postings … an encapsulation, should we say, presented in the form of a slideshow, where we introduced 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.

Today’s coding of this current project brought issues of “genericity” to the fore. As programmers we often strive for genericity with our work. After all, once you put in all the hours on a piece of software, it can be a bit of a letdown if it applies to too small a set of circumstances or user usage. On the flipside, though, to obsess about genericity can be a good aim, but should stop at a certain point, because, no matter how well you do with it, it can be argued by someone, somewhere, that it doesn’t measure up. Think of the “language” requirements for instance. Think of, “will it work with no electricity” for instance. So obsessing overly, is a waste of angst, but if you don’t care either, it makes for a lazy approach to programming, which will not be noticed with the narrow scope of your endeavours.

“Genericity” obviously helps explain code to the next person, who perhaps won’t have to do a thing, but you can also “model” a solution and make it pretty obvious what modelling assumptions you’ve made. Our big issue with “genericity” in our current endeavour is how to pin down how image-related data could be represented in a “genericist’s head” in …

  1. any web page … too ambitious … so …
  2. any blog page … too many blog “brands” … so …
  3. any WordPress blog posting … getting closer, but too many WordPress themes … so …
  4. any WordPress Twenty Ten theme blog posting … let’s say … and we’ll do the “modelling” for what happens here at this blog to point following programmers into the right direction to make modifications

… as a personal observation find the most useful “leads” to a “modelling” scenario, are global variables up the top of the code (and it doesn’t have to be too many, even … just something “to hang your hat on”), and comments at the top of the code … nothing more … you should be able to “remodel” with just these cues, we figure. Take a look at slideshow_via_invisibility_and_fade.php and hope you understand enough to rework it for your own purposes.

Okay, today we tackled that thorny issue to do with image-related data “extraction” from the contents of a WordPress TwentyTen theme blog posting (here at this blog … but reworkable for others, we feel sure) We identified four scenarios …

  1. <a …></a> tag href to an internal slideshow HTML file
  2. Twirling Javascript onmouseover scenario … use eval([PHPequivalentOfJavascript]) to derive next image name (until, and excluding when, we get back to first image name)
  3. Single image scenario … and …
  4. Image place specified that has <td> … </td> encasing <ing … /> and any relevant displayable text (comment) wording

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.


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

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.


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 eLearning, Event-Driven Programming, Software, Tutorials and tagged , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

30 Responses to PHP usort in Slideshow Animation via Image Visibility Tutorial

  1. Louise says:

    CzeΕ›Δ‡, super wpis. JakiΕ› czas nie widziaΕ‚em tak interesujΔ…cego dzieΕ‚a

  2. I have been absent for a while, but now I remember why I used to love this web site. Thanks , I‘¦ll try and check back more often. How frequently you update your site?

  3. You made a number of nice points there. I did a search on the topic and found mainly people will go along with with your blog.

  4. Car Audio says:

    There is noticeably a bundle to identify about this. I suppose you made various good points in features also.

  5. I‘¦ve learn a few good stuff here. Definitely price bookmarking for revisiting. I wonder how a lot effort you place to create such a excellent informative website.

  6. Wow, awesome weblog format! How long have you been running a blog for? you make running a blog look easy. The overall look of your site is fantastic, as neatly as the content!

  7. Photography says:

    Hey, you used to write wonderful, but the last few posts have been kinda boringΒ‘K I miss your tremendous writings. Past several posts are just a little bit out of track! come on!

  8. I‘¦ve read a few good stuff here. Definitely price bookmarking for revisiting. I surprise how so much effort you set to create this type of magnificent informative site.

  9. Of course, what a magnificent blog and educative posts, I surely will bookmark your site.Have an awsome day!

  10. Garden Ideas says:

    I keep listening to the reports talk about getting boundless online grant applications so I have been looking around for the best site to get one. Could you tell me please, where could i acquire some?

  11. draw says:

    certainly, analysis is having to pay off. certainly, study is paying off. Unquestionably helpful standpoint, appreciate your blogging.. certainly, investigation is paying off.

  12. Scott Yancey Events says:

    Thanks for the weblog loaded with such a sizable amount of info. Stopping by your website assisted me to urge what i utilised to become probing for.

  13. read more says:

    Truly practical perspective, appreciate your posting.. Isn’t it terrific any time you get a great publish? Undoubtedly helpful perception, many thanks for blogging.. Particularly advantageous outlook, appreciate your expression..

  14. Wee says:

    Is not it amazing if you come across a superb article? Excellent opinions you have got here.. I value you writing your perspective.. I value you showing your viewpoint..

  15. Invincible says:

    So pleased to get identified this article.. Particularly good standpoint, thanks for blogging.. So pleased to have discovered this post.. of course, study is having to pay off.

  16. Anyways thanks for your concepts. I appreciate it. Please make more articles associated with this

  17. I have to express my appreciation to you just for rescuing me from this particular difficulty. After searching throughout the the web and seeing solutions which were not productive, I was thinking my entire life was done. Living without the presence of solutions to the issues you’ve solved through your review is a crucial case, as well as the kind which could have in a wrong way damaged my entire career if I hadn’t noticed your web blog. That mastery and kindness in handling all the details was vital. I’m not sure what I would’ve done if I had not come across such a step like this. I’m able to at this moment look forward to my future. Thank you so much for this impressive and effective help. I won’t hesitate to recommend your blog to any person who will need direction on this topic.

  18. great site says:

    Simply wanna input on few general things, The website style and design is perfect, the content is very superb. “All movements go too far.” by Bertrand Russell.

  19. I have been absent for a while, but now I remember why I used to love this blog. Thank you, I‘¦ll try and check back more frequently. How frequently you update your website?

  20. celebrate says:

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

  21. Magnifies it says:

    whoah this weblog is fantastic i really like reading your articles. Keep up the good paintings! You know, lots of people are searching round for this information, you could aid them greatly.

  22. ride says:

    of course, investigation is having to pay off. So content to possess found this submit.. Love the posting you furnished.. Liking the article.. thanks

  23. loving says:

    yes, research is paying off. I appreciate you expressing your viewpoint.. Liking the weblog.. with thanks Good beliefs you possess here..

  24. complete says:

    Loving the publish.. pleased Adoring the weblog.. thanks for your insight Enjoying the page.. regards of course, analysis is having to pay off.

  25. efficient says:

    sure, study is having to pay off. certainly, investigation is having to pay off. Certainly practical perception, appreciate your blogging.. Unquestionably advantageous perspective, thanks for sharing with us..

  26. Can any one let know me that is there any on the net classes for Search engine optimisation, because I desire to learn more concerning SEO.

  27. Shy says:

    I have not checked in here for a while as I thought it was getting boring, but the last several posts are good quality so I guess I’ll add you back to my everyday bloglist. You deserve it my friend :)

  28. skillful says:

    Hey there, You have done an incredible job. I will definitely digg it and personally suggest to my friends. I’m sure they’ll be benefited from this web site.

  29. Kenia Voltz says:

    Place on with this review, I absolutely believe this internet site requires a lot more consideration. I?ll possibly be once more to check out much more, many thanks for that information.

Leave a Reply to complete Cancel 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>