“EASY360° ” Documentation by FWDesign - v1.0

 

“EASY360°”

Created: 20/04/2013
By:© FWD (FLASH WEB DESIGN)
Email: contact@webdesign-flash.ro

Thank you for purchasing our script. If you have any questions that are beyond the scope of this help file, please feel free to email via our email. Thanks so much!

Table of Contents

  1. Important notes read this before anything else.
  2. Preparing images.
  3. How to install the gallery into your html page.
  4. Adding/removing images.
  5. Constructor parameters.
  6. Setting up the info window.
  7. How to setup the markers/hotspots.
  8. API.
  9. Sources and Credits

A) Important notes make sure you read this! - top

Please note that the viewer installation and configuration is not complicated but because it has a lot of customizable settings it might seem complicated, please go through the entire documentation before trying to install it into your own page. Basically what it must be done is to copy some html code from the examples we provided and paste it into your own html page and of course replace the images with your own.

The server is character case sensitive so make sure that the viewer settings are identical to those from the provided examples.

Before reading forward you should understand how this viewer works. This viewer enables you to create a 360° product viewer application by inserting an unlimited number of images from different angles of a 2D or 3D product. As you will read installing the viewer into your html page is straight forward and relative simple. The viewer is using <ul> and <li> html elements as the base for the skin, playlist and markers, this way if you like you can generate the content with php or asp from a database.

B) Preparing images. - top

The viewer is using a sequence of images from different angles of the product (how to create the images is beyond the scope of this documentation, in our case our designer created the 3d models in 3dstudiomax and then the images were exported as .jpg).

The viewer requires a default image (the smallest image), a large image (the image which will appear when the script is zoomed, this is optional) and small images for the navigator (this is optional). In our test we noticed that it works great with images with a size equal or smaller then 2000px in width or height, so keep this in mind because it is an important aspect.

Please note that the viewer can display only the smallest images so the large images which appears on zoom or the navigator images are optional (in order to disable the large and navigator images some parameters must be set, please read the constructor parameters , check the showLargeImageVersionOnZoom and showNavigator options).

Another important aspect is the total number of images that you want to rotate, the more images you add the smoother the rotation will be but also the loading time will be greater, in our examples we are using forty images and it looks great.

As a tutorial about creating the images try something as follows, export the large images at a width or height smaller than 2000px (you can go higher but it is not recommended), once the large images are available save a version of the small images from the large images (between 30% and 50% of the large image size). The navigator images can be saved between 10% and 20% of the large image size). Please note that we can't give you an exact size because the images may differ based on your project.

After the images are created they must be added into the viewer playlist, check the adding/removing images, and also how to install the gallery into your html page. Also the small image width and height must be added into the constructor by setting the imageWidth and imageHeight options.

If setting up the images size is confusing then you can use our sizes as follows:

C) How to install the gallery into your html page. - top

This is a small tutorial about how to install the viewer into your page. There are three types of display for this viewer, responsive/fixed, fullscreen and lightbox. The responsive/fixed display type allows the viewer to be embedded into a html page inside a div of your choosing, the viewer will adapt its width and height based on the div which acts as its parent, if the page is resized and the parent div is resized with css or javascript the viewer will adapt its size. The fullscreen display type will display the viewer in fullscreen mode, this means that the viewer will fill the available browser width and height. The lightbox display will open the viewer into a lightbox over the content of the page.

Installing the viewer with a responsive or fixed display:

In the download files there are five .html files which are ending with _responsive_or_fixed.html, each of this examples have exactly the same structure, only some constructor settings, css classes, skin and images are different, you can use one of them to copy and paste the needed html code based on skin that you need, I will use the skin_round_silver_responsive_or_fixed.html the one with the 3d camera as reference but any of the .html files which are ending with _responsive_or_fixed.html will work fine. Also what is important to note is that each .html file has associated a folder which contains the images, skin and a global css file which is used for customizing the markers/hotspots, the folder name is related to the .html file name it is self explanatory.

Installing the viewer with a fullscreen display:

Installing the viewer with a lightbox display:

D) Constructor parameters. - top

Please open any of the .html files provided with a text editor as reference.

These parameters represents the possible setting for the viewer they are all visible in the below image and described below.

//----main----//

//----lightbox (this is only required if the viewer is used with a lightbox display type) ----//

//----controller (the buttons bar) ----//

//----navigator (the small window that appears when the viewer is zoomed to help panning the image) ----//

//----info window----//

//----markers/hotspots----//

//----context menu (this appears when the right click mouse button is pressed)----//

Adding/removing images. - top

Please open any of the .html files provided with a text editor as reference.

Adding an image is easy, all you need to do is to copy and paste inside the viewer playlist (the ul tag with the attribute data-playlist) some li tags which represents the images path, this tags have some specific data attributes to identify the correct li tag, it is best to view the image below it will make more sense. As you can see each li tag has a specific data attribute which is self explanatory. Don't forget to set the image imageWidth and imageHeight options into the viewer constructor (constructor parameters), this is really important.

The first li tag, the one with the attribute data-small-image-path it is required and it represents the path of the default image (the small image) which will appear on each rotation before the large image (the image which will load and display on zoom).

The second li tag, the one with the attribute data-large-image-path it is optional and it represents the path of the the large image (the image which will load and display on zoom), this image will display if the current image scale is larger then 1, this makes sense because for example if you have an image with an original 1000px width and its width after zooming is 2000px then the current image scale will be 2. If you don't need the large image version then set the showLargeImageVersionOnZoom:"no" (please read the constructor parameters section), also there is no need to add the li tag with the attribute data-large-image-path into the playlist, you can add it if you like but it will be ignored.

The third li tag, the one with the attribute data-navigator-image-path it is optional and it represents the path of the the navigator image (the smallest image). If you don't need the navigator then set the showNavigator:"no" (please read the constructor parameters section), also there is no need to add this li tag into the playlist, you can add it if you like but it will be ignored.

To remove an image just delete the ul tag (the ul tag similar with the one from the above image).

Please note that the images are displayed in the order in which they are added into the viewer playlist.

Setting up the info window. - top

To add html content to the info window replace the html content inside the ul with the attribute data-info, if there is too much text a scrollbar will appear. If you don't need the info window delete the ul tag with the attribute data-info and also inside the viewer constructor remove the info label from the buttons option (please read the constructor parameters section). Of course this window can have its html content formatted with CSS, we are using the global.css file to style this window.

How to setup the markers/hotspots. - top

Open with a text editor any of the provided .html files for reference this way the code can be copied and paste

There are three type of markers/hotspots: link, tooltip and infowindow, they are explained below, they are created visually using two images, one for the normal state and one for the selected state when the mouse is over it, also the image size and shape can be any kind.

  1. The link marker type once is clicked or pressed a new browser window will open, the link and target can be specified.
  2. The tooltip marker type once is rolled over with the mouse or or touched on mobile a popup window will appear, this window can contain any type of html content but be careful not to add too much text, it is useful if you want to show a small chunk of html content. Please note that the elements which this window contains can be styled with css.
  3. The infowindow marker type once is clicked or or touched a window will appear over the viewer, this window can contain any type and any amount of html content (this window is exactly the same as the info window which appears when the info button is pressed). Please note that the html tags which this window contains can be styled with css.

Create a marker/hotspot of type link and adding to a specific image at a specific position.

Above there is an image which represents a graphical representation of how a link type marker is created. The marker from the above image must be added (copy and paste) into the ul tag with the data-markers attribute, the order into which they are added does not matter. The marker data attributes are explained below:

Once the marker is created it must be added over an image of your choosing, this is done by adding (copy and paste) the marker into the ul tag with the attribute data-paylist, into the ul tag which contains the images paths, this is better illustrated in the below image.

As is illustrated in the above image the marker is added using its id and positioned using the data-marker-x and data-marker-y attributes, to find out the correct position of the marker over the image enable the showNavigator options like this showNavigator:"yes", (please read the constructor parameters section), this will show a white box which is containing information about the image position into the playlist and and x and y mouse position, move the mouse over the image on a spot where you want to add the marker, this way and x and y mouse position position can be found, it does not matter if the image is zoomed.

Please note that there can be more then one marker of the same type over an image, the process of creating and adding them is the same as explained above, below is an image which illustrate a possible scenario with three markers over an image.

Once all the markers are added don't forget to disable the heloper tool like this showNavigator:"no", (please read the constructor parameters section).

Create a marker/hotspot of type tooltip and adding to a specific image at a specific position.

Above there is an image which represents a graphical representation of how a tooltip type marker is created. The marker from the above image must be added (copy and paste) into the ul tag with the data-markers attribute, the order into which they are added does not matter. The marker data attributes are explained below:

Inside this marker where the "HTML content here!" is showed, HTML content can be added, please note that this type of window supports only a small chunk o HTML content so keep this in mind.

Once the marker is created it must be added over an image of your choosing, this is done by adding (copy and paste) the marker into the ul tag with the attribute data-paylist, into the ul tag which contains the images paths, this is better illustrated in the below image.

As is illustrated in the above image the marker is added using its id and positioned using the data-marker-x and data-marker-y attributes, to find out the correct position of the marker over the image enable the showNavigator options like this showNavigator:"yes", (please read the constructor parameters section), this will show a white box which is containing information about the image position into the playlist and and x and y mouse position, move the mouse over the image on a spot where you want to add the marker, this way the x and y position can be found, it does not matter if the image is zoomed.

Please note that there can be more then one marker of the same type over an image, the process of creating and adding them is the same as explained above, below is an image which illustrate a possible scenario with three markers over an image.

Once all the markers are added don't forget to disable the helper tool like this showNavigator:"no", (please read the constructor parameters section).

Create a marker/hotspot of type infowindow and adding to a specific image at a specific position.

Above there is an image which represents a graphical representation of how a infowindow type marker is created. The marker from the above image must be added (copy and paste) into the ul tag with the data-markers attribute, the order into which they are added does not matter. The marker data attributes are explained below:

Inside this marker where the "HTML content here!" is showed, HTML content can be added, please note that this type of window supports unlimited HTML content so keep this in mind.

Once the marker is created it must be added over an image of your choosing, this is done by adding (copy and paste) the marker into the ul tag with the attribute data-paylist, into the ul tag which contains the images paths, this is better illustrated in the below image.

As is illustrated in the above image the marker is added using its id and positioned using the data-marker-x and data-marker-y attributes, to find out the correct position of the marker over the image enable the showNavigator options like this showNavigator:"yes", (please read the constructor parameters section), this will show a white box which is containing information about the image position into the playlist and and x and y mouse position, move the mouse over the image on a spot where you want to add the marker, this way the x and y position can be found, it does not matter if the image is zoomed.

Please note that there can be more then one marker of the same type over an image, the process of creating and adding them is the same as explained above, below is an image which illustrate a possible scenario with three markers over an image.

Once all the markers are added don't forget to disable the helper tool like this showNavigator:"no", (please read the constructor parameters section).

E) API - top

In this section the API (exposed methods) are explain, basically this are functions that can be called when pressing a html element (button, image etc) to controll the viewer. We provided a .html file called API.html for reference, open this file with a text editor. Below are listed all methods, they are self explanatory.

Because there are multiple devices with different operating systems this functions must be called based on the input type (touch, mice etc...), in the API.html file there is the complete code about how to add the events so that it will work correctly on all devices.

E) Sources and Credits - top

This component was made by Tibi from FWD (FWDesign) FLASH WEB DESIGN, for more information and support contact us at contact@webdesign-flash.ro

Once again, thank you so much for purchasing this item. As I said at the beginning, I'd be glad to help you if you have any questions regarding this gallery and I'll do my best to assist.

FWDesign

Go To Table of Contents