Skip to content
Threejs Based Gallery on JQuery
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.gitignore
Gruntfile.js
README.md
package.json

README.md

Image Gallery Threejs

Threejs based Gallery/Slider Plugin for JQuery. This was forked from djankey's "WebGL Carousel - Three.js" http://jsdo.it/djankey/carousel_webgl it didn't have jquery handling on it as well as better handling of controls for customization. Works well on IOS ipad and iphone aswell ad desktop PCS.

Required Libraries:

Three.js https://github.com/mrdoob/three.js/

Stats.js https://github.com/mrdoob/stats.js/

TweenMax http://www.greensock.com/gsap-js/

PreloadJS http://www.createjs.com/#!/PreloadJS

Browser Compatibility

  • Firefox - 30.0.0 +
  • Chrome - 35.0.0 +
  • Explorer: 9 +
  • Ipad Safari: 7.0.0 +
  • Iphone Safari: 7.0.0 +
  • IOS Safari: 7.0.0 +
  • Android Chrome: not tested help test :)
  • IOS Chrome: not tested help test :)

Demo

Example

<script>
$(function(){
  $('.box').ig3js({
      manifest: [
          {src:"image1.jpg", id:"image1"},
          {src:"image2.jpg", id:"image2"},
          {src:"image3.jpg", id:"image3"},
          {src:"image4.jpg", id:"image4"},
          {src:"image5.jpg", id:"image5"},
          {src:"image6.jpg", id:"image6"},
          {src:"image7.jpg", id:"image7"}
        ],
        imagePath: 'images/'
    });
});
</script>
<div class="box"></div>

Options

Name Type Default Description Example
manifest Array Null List of image paths [ {src:"image1.jpg", id:"image1"}, {src:"image2.jpg", id:"image2"}, {src:"image3.jpg", id:"image3"}, {src:"image4.jpg", id:"image4"}, {src:"image5.jpg", id:"image5"}, {src:"image6.jpg", id:"image6"}, {src:"image7.jpg", id:"image7"} ]
imagePath String Null Path to the specific image listings
dx Number 300 horizontal spacing of Images
dz Number 300 Vertical spacing of Images
deltaRotation Number 45 Degress Rotation of the non active images
planeSizeW Number 500 Size of the plane Width
planeSizeH Number 500 Size of the plane Height
alphaBackground Boolean true Setting if the background is transparent
antialias Boolean true Setting if the renderer processes the objects with antialias
progress
- light Hex "#ff0000" Setting the color of the progress bar's light aspect
- ambientLight Hex "#ffffff" Setting the color of the progress bar's ambient light aspect
- position Array [0,100,0] Setting the position of the progress bar
stats Boolean false sets if stats is shown or hidden.
canvasWindow canvas sets canvas size
    </td>
    <td>
        defaultWidth
    </td>
    <td>
        Integer
    </td>
    <td colspan=4>
        500
    </td>
</tr>
<tr>
    <td>
        
    </td>
    <td>
        defaultHeight
    </td>
    <td>
        Integer
    </td>
    <td colspan=4>
        500
    </td>
</tr>

Events

onImageLoadProgress Image load progress
onImageLoadComplete Image load complete
onImageLoad Image load initialization
onNavigateComplete Navigation Complete
Parameters
obj active plane

Methods

Execution Description
<object>.next(); Animates to the next scene
<object>.prev(); Animates to the previous scene
<object>.goTo(<index>); Animates to the a specific scene
Parameter
index Number base zero position of the plane in an array.
Example
$(function(){
    var box = $.ig3js({
        manifest: [
            {src:"image1.jpg", id:"image1"},
            {src:"image2.jpg", id:"image2"},
            {src:"image3.jpg", id:"image3"},
        ],
        imagePath: 'images/',
    });
    box.navigate.goTo(2);
});

<object>.perspective.default(); Sets the camera perspective default
<object>.perspective.topRight(); Sets the camera perspective top right
<object>.perspective.topLeft(); Sets the camera perspective top left
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.