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.

  • malcolm

    hey real nice man

  • Alain Martínez

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

  • Vinny

    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

  • hemn

    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…

  • ck

    +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…

  • http://csscollector.com Css Collector

    Very Nice Plugin!
    Thanks!

  • n00b

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

  • http://www.webresourcesdepot.com Umut M.

    @,

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

  • Olivier

    Sorry but doesn’t work in Safari 4.0
    Why?

  • john

    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 ?? !!

  • http://www.gwaldvogel.de Gregor Waldvogel

    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)

Search