Search code examples
javascriptjquerygalleryblueimp

blueimp Gallery JS initialization isuses

I'm having trouble getting the gallery to display it's slides. The thumbnails work, just the actual images them selves do not and they come up as error slides.

I have other galleries working fine, and it works great using the light box but when I'm trying to execute it via java-script I run into this problem of no actual slides.

I'm trying to build a gallery via java-script and have some buttons launch each gallery.

This is the java-script I'm running to build the gallery.

function gallery01() {
blueimp.Gallery([
    {
        title: 'AR Ref[04-01]',
        href: './clients/liam_neeson/gallery/beijing_WV1_2008194_lrg.jpg',
        type: 'image/jpeg',
        thumbnail: './clients/liam_neeson/gallery/thumbnails/beijing_WV1_2008194_lrg.jpg'
    },
    {
        title: 'AR Ref[04-02]',
        href: './clients/liam_neeson/gallery/iwm-q_107237.jpg',
        type: 'image/jpeg',
        thumbnail: './clients/liam_neeson/gallery/thumbnails/iwm-q_107237.jpg'
    },
    {
        title: 'AR Ref[04-03]',
        href: './clients/liam_neeson/gallery/Mohne-dam-breached.jpg',
        type: 'image/jpeg',
        thumbnail: './clients/liam_neeson/gallery/thumbnails/Mohne-dam-breached.jpg'
    },
    {
        title: 'AR Ref[04-04]',
        href: './clients/liam_neeson/gallery/Passchendaele1916.jpg',
        type: 'image/jpeg',
        thumbnail: './clients/liam_neeson/gallery/thumbnails/Passchendaele1916.jpg'
    }
]);}

Here is my button that launches builds and launches the gallery.

$(document).ready(function() { 
    $("#gallery").click(gallery01);
});

Then I'm using a simple button (to test) to ensure this works.

<button type="button" class="btn btn-primary btn-lg" id="gallery01">
    Launch demo gallery
</button>

All help will be greatly appreciated.

Solution

  • Make sure you do not import both the JavaScript and jQuery libraries. These will conflict with your website and make the results unpredictable.