ImageViewer

The images viewer will generate all HTML and Script code to add an interactive image viewer to your website.

How to Initialize the viewer ?

The initialization of the viewer is an one step process, just call the function Init of the class with his three arguments (see above for more details).*

Class Details

Functions:

Name

Arguments

Return

Description

Init

String: NewID - HMTL ID defining the position in the DOM of the viewer
String: Name - Define the name of the viewer all viewer component will be defined by this name (this is to avoid mixing if you use different viewer so be sure to use different name for each viewer).
JSON : data - JSON data which define how the viewer will be build.

VOID

This function Initialized every part of the viewer: HMTL, CSS, Data, Events, etc...

It will be generated in the defined ID as NewID and all HTML IDs used for this viewer will start by the name defined in arguments

Also to define the data and the design you must you the data arguments, that work thanks to a JSON files (for more details about the JSON check the section below).

Private Details

All private details are usable but its recommended to not use anythings of those. It might modify the good working of the class

Variables (Members):

Name	Type	Default Value	Description
basedId	String	null	HTML Id of the viewer parent.
data	JSON	null	Data used to initialize the viewer.
id	String	null	Global HMTL Id of the viewer (# + name).
listPosition	Small Class	Integer: pos - define the position of the images list Integer: on - define number of movement of the image list	Hold the details need for the image list movements.
name	String	null	Name of the viewer used by the class for all HTML IDs
selectedImgPos	Integer	0	ID of the selected (active image).
topButtons	String String String	Code/GUI/Image/Data/Normal_TopButton.png Code/GUI/Image/Data/Normal_TopButton.png Code/GUI/Image/Data/Normal_TopButton.png	This member keep the default direction of the top buttons of the viewer.
topButtons	String String String	Code/GUI/Image/Data/Normal_BottomButton.png Code/GUI/Image/Data/Hovered_BottomButton.png Code/GUI/Image/Data/Pressed_BottomButton.png"	This member keep the default direction of the top buttons of the viewer.

Functions:

Name	Arguments	Return	Description
GetImageId	Integer: id - Number of the image	String - HTML ID of the button	Function used to get the ID of the images (used to short the code)
GetImgNumFromId	String: ID - HTML ID of the image you want to get the number from	Integer - ID of the button	Convert an HTML ID into an Integer ID of a button
ImagesMouseEnter (Event Function)	JS Object: obj - Reference to the calling obj	VOID	Event function called when mouse enter on one of the image in the list. It will change his design (css).
ImagesMouseLeave (Event Function)	JS Object: obj - Reference to the calling obj	VOID	Event function called when mouse leave on one of the image in the list. It will reset his design (css).
ImagesMouseUp (Event Function)	JS Object: obj - Reference to the calling obj	VOID	Event function called when the mouse is released on one of the image in the list. It will remove to the old active image the borders, and set active the selected image.
InitButtonEvents	String: id - HTML ID of the button that we want to Initiate the events Boolean: IsUp - Define if the button belong to the top buttons or not Boolean: IsLeft - Define if the button belong to the left buttons or not	VOID	Initiate buttons event and define the callback function
isOK	JS Object: obj - Reference to the obj	Boolean	Check if the selected OBJ is valid (Defined // Non-Null)
MoveImageList (Event Funciton)	Boolean: toRight - Define if the movement is to the right	VOID	Function that handle the moving and all calculation for the animation.
MovingList	Integer: Percent - Advancement of the animation Integer: X - X based on the advancement Class: data - Data that the function need	VOID	Function used by the animation process, to move the list. (EaseInOut Animation)
SwitchImg (Event Function)	Boolean: isNext - Define if the movement is to the next image or not	VOID	Function called when top buttons are pressed. It will change the selected image as a click
TopImageClick (Event Function)	Boolean: zoomIn - Define if it's for a Zoom in or a Zoom Out	VOID	Function called when the user pressed the main image. It will zoom in.

Data Structure

Main Structure Details

"ENTER_NAME": { //Class that hold the whole data

"Global": { //Section Where we define the design

"CSSGroup": { //CSS of the viewer

"CSS": { //CSS

"Children": [ //To add extra CSS for some children (see below how it work)

]

"Buttons": { //Modify buttons

"TopButtons": { //Modify top buttons

"CSS": { //CSS Details

"Normal": null, //Link to the button design for customization - Normal Version (null will take the ones by default)

"Hovered": null, //Link to the button design for customization - Hover Version (null will take the ones by default)

"Pressed": null //Link to the button design for customization - Pressed Version (null will take the ones by default)

"BottomButtons": { //Modify Bottom buttons

"CSS": { //CSS Details

"Normal": null, //Link to the button design for customization - Normal Version (null will take the ones by default)

"Hovered": null, //Link to the button design for customization - Hover Version (null will take the ones by default)

"Pressed": null //Link to the button design for customization - Pressed Version (null will take the ones by default)

}

"Images": [ //List of images you want to add into the viewer

]

}

Note:

CSS Children: Children is a list of class composed by two data (Name are important):

String: ID - HTML ID of the target (it start by adding the ID of the target object then the children)
Class: CSS - CSS details to add

Download Sample:

SAMPLE: Here

Created with the Personal Edition of HelpNDoc: Free Qt Help documentation generator