Using Galleria code in Intel XDK
In my previous post I described using galleria in a web page on my local IIS . The displayed page appears as shown.
Galleria_Intel_00.jpg
In this post I describe how you may implement the same code in Intel XDK. Prepare yourself with the images you want to use as well as the following files from your galleria download:
galleria-1.4.7.js
galleria.classic.css
galleria.classic.js
Create an Intel XDK Project using Standard HTML5 using App Designer (we will not be using the app designer controls).
The project may not have separate folders for CSS and Images. Create these folders (CSS and Images) in the www folder of your project. Copy the images to the Images folder and the above CSS file (galleria.classic.css) file to the CSS folder. The www/js folder of the app will have only app.js and init-app.js files. Copy the two files (galleria-1-4-7.js and galleria.classic.js) to the www/js folder.
The main files in my project (GalleriaSimplis2) are as shown here:
Galleria_Intel_01
Now in the Intel XDK's index.html page add the code shown between the 'head' and '\head' tags.
Galleria_Intel_02
Add the following html fragment between 'body' and '\body' tags.
Galleria_Intel_03
Save the index.html and you should be able to run the simulation on a chosen device as shown (herein Microsoft Lumia 950):
Galleria_Intel_04
Click on the main menu tab and click TEST.
In the MOBILE tabbed page click 'PUSH FILES' that enables you to view on an actual device.
Galleria_Intel_05
The project page appears as shown using the Intel App Preview app. If you do not have this app you can get it from stores.
Galleria_Intel_00.jpg
In this post I describe how you may implement the same code in Intel XDK. Prepare yourself with the images you want to use as well as the following files from your galleria download:
galleria-1.4.7.js
galleria.classic.css
galleria.classic.js
Create an Intel XDK Project using Standard HTML5 using App Designer (we will not be using the app designer controls).
The project may not have separate folders for CSS and Images. Create these folders (CSS and Images) in the www folder of your project. Copy the images to the Images folder and the above CSS file (galleria.classic.css) file to the CSS folder. The www/js folder of the app will have only app.js and init-app.js files. Copy the two files (galleria-1-4-7.js and galleria.classic.js) to the www/js folder.
The main files in my project (GalleriaSimplis2) are as shown here:
Galleria_Intel_01
Now in the Intel XDK's index.html page add the code shown between the 'head' and '\head' tags.
Add the following html fragment between 'body' and '\body' tags.
Galleria_Intel_03
Save the index.html and you should be able to run the simulation on a chosen device as shown (herein Microsoft Lumia 950):
Galleria_Intel_04
Click on the main menu tab and click TEST.
In the MOBILE tabbed page click 'PUSH FILES' that enables you to view on an actual device.
The project page appears as shown using the Intel App Preview app. If you do not have this app you can get it from stores.
Galleria_Intel_06
Comments