jQuery Galleria not working

Hi,

I’m trying to get galleria working on a few images which are pulled in dynamically.

The HTML at the moment looks like this:


<div id="gallery" class="images">
<img src="assets/images/profile.jpg" alt="Image 03" title="Image 03" />
<img src="assets/images/img-01.jpg" alt="Image 02" title="Image 02" />
<img src="assets/images/img-01.jpg" alt="Image 01" title="Image 01" />
</div>

In the header I have the following:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/galleria.js"></script>
<script type="text/javascript">
// Load the classic theme
    Galleria.loadTheme('js/themes/classic/galleria.classic.js');
    // Initialize Galleria
    $('#gallery').galleria();
</script>

Am I missing something? I’m sure I’ve followed the instructions/demo exactly as stated.

Any help is much appreciated!

http://tinyurl.com/6d8rgph

Yes, you are missing something vital.

The script that initializes the gallery, it’s running before the body exists, therefore no ‘#gallery’ element is capable of being found. There are two prime solutions to that.

Solution 1: Move the script to the end of the body, just before the </body> tag.
Solution 2: Use jQuery’s callback so that the code will execute when the DOM has finished loading.

Since you are using jQuery, the second solution using the callback is the preferred one to use.


$(function () {
    // Load the classic theme
    Galleria.loadTheme('js/themes/classic/galleria.classic.js');
    // Initialize Galleria
    $('#gallery').galleria();
});

Now you get a new problem:

Uncaught Error: Fatal error: Width & Height not found.

The galleria page says to ensure that the gallery section has a height, to resolve that problem.

Thank you very much for that, pmw57. Problem solved!