jQuery Image Gallery: Spacegallery

Spacegallery is a very simple but nice image gallery built with jQuery.

It is a static gallery where images are hardcoded in the HTML and presented with a beautiful grow – fade out effect.

jQuery Image Gallery

How to use?

After inserting the JS & CSS files into your webpages, create a div element with images inside like:

<div id="myGallery" class="spacegallery">
    <img src="images/bw3.jpg" alt="BW" />
    <img src="images/lights3.jpg" alt="Lights" />
</div>

And call the gallery:

$('#myGallery').spacegallery({loadingClass: 'loading'});

You can also configure the perspective, border & animation duration.

11 Comments
  1. Reply malcolm August 25, 2008 at 7:14 AM

    hey real nice man

  2. Reply Alain Martínez December 15, 2009 at 12:05 PM

    Is there any way to show some caption for each image?

  3. Reply Vinny December 17, 2009 at 7:17 PM

    Is there any way to make this gallery scroll horizontally instead (i.e. like xbox 360 dashboard), if so can you tell me how as i ain’t that good with Javascript yet…

    thanks

  4. Reply hemn January 31, 2010 at 9:32 AM

    hi very nice but I don’t know how to call it. this example is not explained well in the author’s site.
    hope one can guide me hot to use it…

  5. Reply ck May 11, 2010 at 1:05 PM

    +1 hi very nice but I don’t know how to call it. this example is not explained well in the author’s site.
    hope one can guide me hot to use it…

  6. Reply Css Collector September 5, 2010 at 5:28 AM

    Very Nice Plugin!
    Thanks!

  7. Reply n00b December 11, 2010 at 7:21 PM

    I have no idea what calling it means or how to do it. Please, can someone explain?

  8. Reply Umut M. December 12, 2010 at 5:27 AM

    @,

    I suggest checking the documentation and viewing the source of the gallery.

  9. Reply Olivier June 5, 2011 at 4:51 AM

    Sorry but doesn’t work in Safari 4.0
    Why?

  10. Reply john March 3, 2012 at 5:49 PM

    it doesn’t work because the Author has not explained fully everything that is required. i.e there is no full example of how to write a function call that uses
    $(‘#myGallery’).spacegallery({loadingClass: ‘loading’});

    and obviously you need to include a version of Jquery and the pligin into your head ELSE

    $(‘#myGallery’).spacegallery({loadingClass: ‘loading’});

    will produce a reference error of some kind similar to these

    reference error does not evaluate

    typdef something or other not found

    cannot find something or other

    I’M having problems geeting this one to work.

    anf viewing the authors source code they do not use

    $(‘#myGallery’).spacegallery({loadingClass: ‘loading’});

    within the html page where this plugin is working ?? !!

  11. Reply Gregor Waldvogel February 13, 2013 at 8:46 AM

    I got this working by using this code:
    (function($){
    var initLayout = function() {
    var hash = window.location.hash.replace(‘#’, ”);
    $(‘#myGallery’).spacegallery({loadingClass: ‘loading’});
    };
    EYE.register(initLayout, ‘init’);
    })(jQuery)

Leave a reply

Search