Now we should open the structure.xml file and describe our gallery with this block:
...

Now let's get back to our BackgroundGalleryModule class and add an error handler to the class constructor. The event of successful initialization:
...

Now we can compile the project and open the control panel. We can see our module in the Modules menu.
...

Now let's create an xml file for our gallery. In admin\modules\simpleGalleryModule there is a template.xml file. It's the default gallery template file. If we open it, we'll see that there are two properties described - Preview and Thumbnail. ...

Let's go back to the BackgroundGalleryModule class. We create new methods for setting the current image (setCurrent) and for loading it (loadImage):
...

The module is resizable now. But we will lock it so that there is no possibility to drag it and change size. It will be resized automatically with the help of script.
...

The logic of centering works relatively to the zero coordinates, but they are not absolute. They change their position while resizing and that makes the centering work incorrect. We have to include this offsetting to make the centering look right. ...

In this step we'll create logic which will change the background image on page switch. We continue to work with the BackgroundGalleryModule class. ...

Also we can take onComplete logic to another function. It's a part of Tweener in the _loaderHandler function at the moment: ...