Building Basic AUXL Objects : ImageCarousel

AUXL Engine v0.2 : Web XR Scenario, Object Generator Engine & Universal Controller System

Wiki Sections

Building AUXL Scenarios, Zones and Scenes

Building Basic AUXL Objects

Building Advanced AUXL Objects

Using Special AUXL Objects

Demo & Examples

Demo
Starter

Building Basic AUXL Objects : ImageCarousel

Build a gallery of images viewable in an interactable carousel with ImageCarousel that takes in a gallery text description, an array of images each with their own name. Buttons spawn controlling various gallery control functions allowing the user to browse through the entire set of images.

Defining a ImageCarousel Data & ImageCarousel Object :

Provide a description and an array of objects that define an image and title to be viewed in 8 total frames at one time. You can control the gallery with additionally spawned buttons or assign those actions to other instruction based events/controls/delay/etc... Controlling functions are Play/Pause animation, Forward/Backward a few images, Next/Back a full page, Move to a random page, toggle the frames Scale and toggle view the gallery Info.

auxl.galleryData = {
id: 'gallery',
description: 'Browse through an example gallery. Control the image frames with a handful of buttons to jump to a random page, go back a page, go back a few images, view info, play the slideshow, go forward a few images, go to the next page and switch between 2 frame sizings.',
images: [
	{image: auxl.image01, text: 'Example1'},
	{image: auxl.image02, text: 'Example2'},
	{image: auxl.image03, text: 'Example3'},
	{image: auxl.image04, text: 'Example4'},
	{image: auxl.image05, text: 'Example5'},
	{image: auxl.image06, text: 'Example6'},
	{image: auxl.image07, text: 'Example7'},
	{image: auxl.image08, text: 'Example8'},
	{image: auxl.image09, text: 'Example9'},
	{image: auxl.image10, text: 'Example10'},
	{image: auxl.image11, text: 'Example11'},
	{image: auxl.image12, text: 'Example12'},
	{image: auxl.image13, text: 'Example13'},
	{image: auxl.image14, text: 'Example14'},
	{image: auxl.image15, text: 'Example15'},
	{image: auxl.image16, text: 'Example16'},
	{image: auxl.image17, text: 'Example17'},
	{image: auxl.image18, text: 'Example18'},
	{image: auxl.image19, text: 'Example19'},
	{image: auxl.image20, text: 'Example20'},
	{image: auxl.image21, text: 'Example21'},
	{image: auxl.image22, text: 'Example22'},
	{image: auxl.image23, text: 'Example23'},
	{image: auxl.image24, text: 'Example24'},
],
};
auxl.gallery = auxl.ImageCarousel(auxl.galleryData);

Each paramter description :

id: Name must match named ImageCarousel object generated.
description: Text providing additional information about the gallery. Toggle viewing via the Info action or button.
images: An array of objects that provide an image sources to be displayed and the name of the image to be displayed underneath the frame.