RickyH - Spacegallery – mooStyle

I was combing the JavaScript framework blogs and came across this image carousel in JQuery: SpaceGallery. I used this same concept in my old website but it was written in mootools. The jQuery plug-in feels unresponsive and slow and doesn’t have any features. So here is the mootools version I wrote, sorry it is not as a plugin but feel free to make it into one.

View Demo

Things you need

First get Mootools (This demo uses 1.2.4) and if you want the color plugin I use in the demo you can download this from mootools more.

The JavaScript

Sorry about the mess of this: I haven’t written it to be dynamic as it was rushed out late at night. The positioning of elements is hard-coded but would be simple to adapt if i could be bothered to comment anything. So here it is:

var spacers = "";

function loadDemo(){
     spacers = $("spaceMan").getElements(".spaceOB");
     intSpace();
}

function intSpace(){
     spacers.addEvents({
          'mouseover': function(){
               if(this.getStyle("z-index") != 20){
                    this.setStyle("top", parseInt(this.getStyle("top"))-2);
               }
          },
          'mouseout': function(){
                if(this.getStyle("z-index") != 20){
                     this.setStyle("top", parseInt(this.getStyle("top"))+2);
                }
          },
          'click': function(){
               doSpace(this);
          }
     });

     spacers.each(function(item, index){
          var color = [index*40, 82, 87].hsbToRgb();
          spacers[index].setStyles({
               "z-index": 20-index,
               "background-color": color
          });
          spacers[index].set(
               'morph',
               {
                    duration: 1000-(index*100),
                    transition: 'Sine:out'
               }
          );

          spacers[index].morph(
          {
                opacity: [0, (100-(index*10))/100],
                width: 323-(index*32.3),
                height: 203-(index*20.3),
                left: 60+((index*23.5)/1.5),
                top: 80-(index*(15-(index)))
          });
     });
     setTimeout(function(){$("spaceHelp").fade([0,1]);}, 1000);
}

function doSpace(el){
     $("spaceHelp").fade(0);
     var positionOfClicked = 20 - el.getStyle("z-index");
     var topPos = 0;
     spacers.each(function(item, index){
          var zIndexi = parseInt(spacers[index].getStyle("z-index"));
          if(zIndexi == 20){
               spacers[index].setStyle("z-index", 20-(spacers.length-1));
               spacers[index].set('morph', {
                    duration: '500',
                    transition: 'Sine:out',
                    onComplete: function(){
                         spacers[index].set(
                              'morph',
                              {
                                   duration: '500',
                                   transition: 'Sine:out'
                              }
                         );
                         spacers[index].morph({
                              opacity: [0, 0.5],
                              width: [94,161.5],
                              height: [50, 62.5],
                              left: [170, 138],
                              top: [40, 30]
                         });
               }});
               spacers[index].morph({
                    opacity: 0,
                    width: 400,
                    height: 220,
                    left: 25,
                    top: 110
               });
          }
          else{
               var thisPos = 20-(zIndexi+1);
               spacers[index].setStyle("z-index", zIndexi+1);
               spacers[index].set(
                    'morph',
                    {
                         duration: '500',
                         transition: 'Sine:out'
                    });
                spacers[index].morph({
                     opacity: (100-(thisPos*10))/100,
                     width: 323-(thisPos*32.3),
                     height: 203-(thisPos*20.3),
                     left: 60+((thisPos*23.5)/1.5),
                     top: 80-(thisPos*(15-(thisPos)))
                });
          }
     });
     if(positionOfClicked == 0){
          return false;
     }
     if(positionOfClicked != 1){
          setTimeout(function(){doSpace(el)}, 125);
     }
}

The CSS and HTML

The css:

 #spaceManHolder{
   	width: 450px;
 	height: 500px;
 	margin: 40px auto 0px auto;
 	position: relative;
 }
 #spaceMan{
  	width: 450px;
 	height: 300px;
  	position: relative;
 }

 #spaceHelp{
 	font-size: 10px;
 	color: #fff;
 	text-align: center;
 	opacity: 0;
 }

.spaceOB{
	position: absolute;
	width: 100px;
	height: 100px;
	z-index: 100;
}

and the html:

<div id="spaceManHolder">
     <div id="spaceMan">
          <div class="spaceOB"></div>
          <div class="spaceOB"></div>
          <div class="spaceOB"></div>
          <div class="spaceOB"></div>
          <div class="spaceOB"></div>
          <div class="spaceOB"></div>
     </div>
     <div id="spaceHelp">
          Click The front block or try selecting
          a block from the back
     </div>
</div>

If you would like to use or add to this example please do:)