Example 3 - Slideshows

A slideshow is a popular device on many web pages and there are a number of plugins that let you add slideshows, varying widely in the features they offer. Most are limited in how much you can customise them, so in some cases it may be simpler to roll your own. Here's how do do it with a simple dissolve, using a set of images stored on any webserver.

EasyCoder can be used to control image-related tasks such as slideshows:

 

In the box below is the entire page source comprising the HTML and the script. At the top is the HTML and below it in the <pre> ... </pre> block is the script.

Slideshows can be simple or complex, depending on what you want to achieve. Many plugins are available for WordPress, offering a staggering range of features, so the only time you're likely to want to roll your own is if your needs are rather special and you can't find one that does exactly what you want. So please don't assume that we're trying to get you to use a script for every one of your slideshows; this is just to show you how it's done if you encounter those unusual situations. The slideshow in this case uses a simple dissolve transition, though many other effects can also be achieved as it's all mostly done with CSS.

The first thing is to define some CSS that fades an element up or down. This is a built-in feature of CSS3, that defines what happens when the opacity of the element is changed. It forces a specified transition to take place between the current and the new opacity. The same goes for several other transition types - you'll have to look them up in a CSS reference if you want to explore this rich field.

After the transition has been specified we load the images, which must all be the same size. Then the script takes over, requesting one image to go from opaque to transparent while the next does exactly the same in reverse. The duration of the fade is governed by the CSS.

As far as the script is concerned, one thing to note is the way one variable (Images) is used to hold 4 images. In EasyCoder, every variable is an array, usually of a single element. The command set the elements sets the number of elements to any value you choose - in this case 4. Then to access an element you set the index of the array to the element you want, after which you access it just as simple 1-element variable. Arrays remember their indices until they get explicitly changed. Some programmers may find this method of array handling to be odd but it provides a useful set of array features without requiring the special symbols used in other languages.

<style>
div#easycoder-slides {
  position:relative;
  height:225px;
}
div#easycoder-slides img {
  position:absolute;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}
</style>
<div id="easycoder-slides"><img id="easycoder-img0" src="https://easycoder.software/public/img0.jpg" alt="" /><img id="easycoder-img1" src="https://easycoder.software/public/img1.jpg" alt="" /><img id="easycoder-img2" src="https://easycoder.software/public/img2.jpg" alt="" /><img id="easycoder-img3" src="https://easycoder.software/public/img3.jpg" alt="" /></div>
</div>
<pre id="easycoder-script" style="display: none;">
! Example 3
  img Images
  variable CurrentImage
  set the elements of Images to 4
  put 0 into CurrentImage
  while CurrentImage is less than 4
  begin
    index Images to CurrentImage
    attach Images to `easycoder-img` cat CurrentImage
    add 1 to CurrentImage
  end
  put 0 into CurrentImage
  index Images to CurrentImage
  set style `opacity` of Images to 1
  while true
  begin
    wait 5 seconds
    set style `opacity` of Images to 0
    add 1 to CurrentImage
    if CurrentImage is greater than 3 put 0 into CurrentImage
    index Images to CurrentImage
    set style `opacity` of Images to 1
  end
</pre>

Example 4 - Website queries and REST