SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot pooney's Avatar
    Join Date
    Jan 2006
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    Code HTML4Strict:
    <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:
    Code HTML4Strict:
    <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
    Web Host Advice - Under Development

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    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.

    Code javascript:
    $(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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot pooney's Avatar
    Join Date
    Jan 2006
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for that, pmw57. Problem solved!
    Web Host Advice - Under Development


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •