ExpoRemoteApp

Created: 2014-05-19 12:52
Updated: 2014-05-23 08:03
License: mit

README.md

#ExpoRemoteApp

##Authors

##Requirements :

A server with :

  • NodeJS
  • mongoDB

##Installation :

First, clone ExpoRemoteApp project :

git clone https://github.com/ExpoTeam/ExpoRemoteApp.git

After that, open a console and move on ExpoRemoteApp folder. Lauch :

npm update

Then, clone expo.io on "node_module" folder who is create by the precedent command.

cd node_module
git clone https://github.com/ExpoTeam/expo.io.git

##Configuration :

Open "app.js" file and set your MongoDB adress and your application port.

Open "expo.js" on "jquery.exporemote" folder and set the variable "serverNode" with the adress of your server (line 2).

##Run application :

On Windows :

node app.js

On Linux and Mac :

nodejs app.js

##Client Implementation :

###Include expo.io files

Include JS and CSS script :

<script src="http://127.0.0.1:8080/jquery.exporemote/expo.js"></script>
<link rel="stylesheet" href="http://127.0.0.1:8080/jquery.exporemote/themes/default/css/expo.css"/>

(adapt the URL to your NodeJS server adress)

###Configure JQuery plugin

You need to configure the Jquery plugin.

Variable Value Description
nextAction function Javascript function to move to the next slide
prevAction function Javascript function to move to the previous slide
goToAction function Javascript fonction to move to a definied slide
nbSlides int Total slide of the slider
blockUI String (Default: 'body') CSS selector of compoment where the UI will be add
positionUI String (Default: 'in') Position of the UI (values: 'in' or 'out')
cornerUI String (Default: 'bottomLeft') Position of the UI (values: 'bottomLeft', 'bottomRight', 'topLeft', 'topRight')
allowCreate Bool (Default: 'true') Allow the user to create new rooms
startSliderIndex int (Default: '0') Index of the first slide (values: '0', '1')

Example with rsfSlideshow : http://reallysimpleworks.com/slideshow/

$('#slideshow').remote({
    nextAction: function() {
        $('.rs-slideshow').rsfSlideshow('nextSlide')
    },
    prevAction: function() {
        $('.rs-slideshow').rsfSlideshow('previousSlide')
    },
    goToAction: function(slide_key) {
        $('.rs-slideshow').rsfSlideshow('goToSlide', slide_key)
    },
    nbSlides: $('.rs-slideshow').rsfSlideshow('totalSlides'),
    blockUI: 'body',
    positionUI: 'in',
    cornerUI: 'bottomLeft',
    startSliderIndex: 0
});

##Theme Expo Remote include several themes. By default, we use the "default" theme. Every theme contains 2 folders :

  • "css" who contains the CSS file
  • "images" who contains images require for the theme

You can easy use a CSS include on Expo Remote by changing the URL. Example :

<link rel="stylesheet" href="http://127.0.0.1:8080/jquery.exporemote/themes/gray/css/esssxpo.css"/>

You can too develop your own CSS by creating a new folder, or override an existing theme.

Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more