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.

Space carousel

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:)

33 thoughts on “Spacegallery – mooStyle”

  1. Hey mate,

    I’ve been looking for a nice alternative to the jQuery Space Gallery! Ta very much! Quick question for you mate, I’m fairly new to the mootools and javascript game.

    I would just like to make a little change to your mootool space gallery. Basically, I’m looking to not have the images centrally aligned (as in the apple Time Machine effect!) but to have them slight fading in from the left.

    Ricky is there any chance you might point me in the right direction? I’ve messing with the code but I’ve not been able to get completely as I’d like!

    Cheers!
    Adam

  2. Hi Adam, Alot of the code was rushed and written poorly but i intend to make a plugin when my work dies down.

    Try changing the left position to a static value so:
    from -> left: 60+((thisPos*23.5)/1.5),
    to -> left: 10,

    I’ll get some time after Christmas to make a working plugin but this was just a concept for speed and usability.

  3. Quality mate! Absolutely love the new site (and the new logo). I’ve been getting into some JavaScript myself recently, using the Microsoft AJAX Library, formerly known as Atlas. Just started my own site too, going to be posting some ASP.NET stuff I’ve been working on.

    Keep it up mate!

    Laters!

  4. Hey Ricky,

    So, I’ve managed to tweak the gallery to my desires…through time and trial and error! Except for one small detail:
    I have the initial positioning and image size correct. The only problem is the ‘red’ image, as you see, restarts at the first position instead of following behind the others…

    Any ideas?!

    Cheers
    Adam

  5. try changeing the last left: 60+((index*-15)), to left: ((zIndexi*15))-240, this is a hacky way of doing but it worked.

    The first click doesn’t work to good though… Sorry but i’m well too busy to get into this properly. fastest way would be to add a global variable outside of the function called firstClick and set that to off/0 once the users clicked once.

    Theres alot of stuff on your page that’s not needed adam, like the google analytics stuff.

  6. Hey Ricky,

    Yeh, I havent had a chance to do a real clean up yet! Its just a quick test….its also my way of learning JS!

    Cheers

  7. Loving this plugin, just trying to taylor it to me needs a little, but having no success.

    Is there any easy way to modify it so that instead of the gallery moving when you click any part of spaceOB, I could just limit it to a particular link or image class contained within the spaceOB div?

    Any help with this would be hugely appreciated. :)

  8. Hi David,

    in the function intSpace change it to:

    spacers.getElement(“.yourClassNameHere”).addEvents({
    ‘click’: function(){
    doSpace(this.parentNode);
    }
    });

    // btw this isn’t tested :)

  9. HI: Ricky

    Thanks so much for helping me out with this. :)

    I’ve been playing around with it for the past hour, but I’m having no success I’m afraid. If you’ve got a minute, I’ve uploaded a demo to JS Fiddle, which you can find at:

    http://www.jsfiddle.net/vkCrA/1/

    I’ve kept the code in a working state, but rest assured I have been working with the code you sent me, but I just can’t get it to play ball.

    I’m trying to make .right-recent the activating element.

    Again, thanks so much for the assistance. 😀

    All The Best: Dave

  10. Hi Dave, the firat thing you need to change is right-recents css. Remove float: right; and use position: absolute and set z-index to 10;

    div.right-recent {
    background-color:#CCCCCC;
    height:160px;
    margin:10px;
    position:absolute;
    right:0;
    width:220px;
    z-index:10;
    }

    after that create an array of element objects called rights and use them for the click events instead of the space elements:

    var spacers = “”;
    var rights = “”;
    function loadDemo(){
    spacers = $(“spaceMan”).getElements(“.spaceOB”);
    rights = $(“spaceMan”).getElements(“.right-recent”);
    intSpace();
    }

    function intSpace(){

    rights.addEvents({

    ‘click’: function(){
    alert(“d”);
    doSpace(this.parentNode);
    }
    });

    anyway try this if you can see it:

    http://jsfiddle.net/vkCrA/14/

  11. HI: Ricky

    Thanks so much for the help and example.

    I’m currently on day 2 on the 30 days of mootools tutorial, so your explanation of how you’ve updated the script is greatly appreciated.

    Thanks again.

    All The Best: Dave

  12. No worries David,

    Don’t use my code as a template if your learning MooTools though. I write these demos quickly without any thought into classes and re-usability. There just conceptual demonstrations really.

    … anyways good luck man! :)

  13. Hello!

    First of all I’d like to thank you for this great script! I’ve downloaded it and have been playing around for a few hours.

    I’m new to javascript so I’m having quite a hard time on this.

    If you got any time I would like to ask you if you could help me with a simple problem I’m having.

    Here’s the problem:
    I want to make the gallery bigger and with pictures in it. I managed to get it bigger, but when I insert the images, the plugin does not resize them, and so every image have the same size. This causes the images to stack on the right side, creating like a cascade effect.

    I was wondering how could I get the images resized and then centered. Also i noticed that when the click animation happens, the image slides down and left, while the red rectangle slides propperly.

    Anyways, it’s an easy alignment problem I think.. Sorry if it’s too long and for the time I took you..

    Thanks in advance! Bye!

  14. Nevermind, I solved it.

    I just changed the size of the width to 100% in the img src in the html.

    Thanks anyways!

  15. Nevermind, I solved it.

    I just changed the size of the width to 100% in the img src in the html.

    Thanks anyways!

  16. Hey: Ricky

    Hope all is well. :)

    If you had a spare minute, I was wondering if you could check out the following fiddles:

    http://jsfiddle.net/vkCrA/23/

    http://jsfiddle.net/vkCrA/22/ (with the link:cancel fix applied)

    I’ve been trying to get space gallery working under mootools 1.3.1, but even with compatibility mode turned on, the blocks don’t return to a static size once clicked.

    I’ve been playing around with the problem, and under safari, adding a link:cancel to the 60th line resolves the problem, but kicks up a range of “Can’t find variable: cancel” errors, yet correctly formatting it with the ‘ ‘ added, fails to fix the problem.

    If you have a moment, is there any chance you could just take a look and see if there’s a simple fix I’m missing. Cheers.

    All The Best: Dave

  17. @David

    i have tryed to push this gallery on the latest version think is now 1.3.2. This damed morph seems to changed since the Version from Ricky.

    But check this out … i think i got it.

    http://jsfiddle.net/xBdrA/4/

    give me a feedback, i its working for u too 😉

  18. Hey: Vladi

    Looks like I owe you a pint mate. :)

    I haven’t had time to add my own custom clicks to it yet, but that looks to be working fine. Many thanks for taking the time to polish it up .

    All The Best: Dave

  19. Hey: Vladi

    Just a quick follow up mate. All works well, in everything but IE7 & 8. Didn’t bother with 6 and it all works fine with 9, but whilst it throws up no JS errors, the gallery simply isn’t visible in either IE7 or 8. I know IE has some dodgy issues with opacity, and that’s clearly what’s going on here, as I can click the links I’ve created, I just can’t see them. lol

    If you fancy taking a look then great, if not I’m just going to use Modernizr to filter out the script for those browsers, and serve them a far less swanky gallery.

    Cheers.

    All The Best: Dave

  20. i have used jquery and spacegallery; this is a good alternative. However, is there a way to move back as well as forward?

Leave a Reply

Your email address will not be published. Required fields are marked *