Calling Gallery View on more than one element on the page

[jamescw]

Hi,

I have experienced an issue where using the gallery view plugin more than once on the same pages causes any previous configuration options to be over written.

I have done a small amount of research and i think this something todo with how those config options are stored within the plugin.

I would like to use gallery view on at least two lists in my page, but the second call to gallery view overwrites any options passed in the first call.

Do you know whats causing this? Is there a work around or patch available?

Thanks for your great work, James

[tadeck]

Can you show me code responsible for both initializations (initializations for both galleries)?

Which version of GalleryView are you using? The original developer's page is inaccessible now, but if you could compare it to the version accessible here (this is the latest version from the original site), it would be great.

[jamescw]

Yep, here you go:

        $(document).ready(function () {

            $('#slideshow').galleryView({
                transition_interval: 5000,
                show_panels: true,
                show_filmstrip: false,
                panel_width: 480,                   
                panel_height: 300,
                panel_animation: 'crossfade',       //STRING - animation method for panel transitions (crossfade,fade,slide,zoomOut,none)
                overlay_opacity: 0.0,               //FLOAT - transparency for panel overlay (1.0 = opaque, 0.0 = transparent)
                overlay_position: 'bottom',         //STRING - position of panel overlay (bottom, top)
                panel_scale: 'crop',                //STRING - cropping option for panel images (crop = scale image and fit to aspect ratio, nocrop = scale image and preserve original aspect ratio)
                show_panel_nav: true,               //BOOLEAN - flag to show or hide panel navigation buttons
                show_overlays: true,
            });

            $('#artwork_slider').galleryView({
                transition_speed: 0,                //INT - duration of panel/frame transition (in milliseconds)
                transition_interval: 0,
                panel_animation: 'none',
                show_panels: false,
                show_filmstrip: true,               //BOOLEAN - flag to show or hide filmstrip portion of gallery
                frame_width: 100,                   //INT - width of filmstrip frames (in pixels)
                frame_height: 80,                   //INT - width of filmstrip frames (in pixels)
                start_frame: 1,                     //INT - index of panel/frame to show first when gallery loads
                filmstrip_size: {{ collections.size }},                 //INT - number of frames to show in filmstrip-only gallery
                frame_opacity: 1.0,                 //FLOAT - transparency of non-active frames (1.0 = opaque, 0.0 = transparent)
                filmstrip_style: 'scroll',          //STRING - type of filmstrip to use (scroll, show all)
                filmstrip_position: 'bottom',       //STRING - position of filmstrip within gallery (bottom, top, left, right)
                show_filmstrip_nav: true,           //BOOLEAN - flag indicating whether to display navigation buttons
                frame_scale: 'crop',                //STRING - cropping option for filmstrip images (same as above)
                frame_gap: 5,                       //INT - spacing between frames within filmstrip (in pixels)
                show_captions: true,
            });
        });

Im using the latest version of gallery view from your repo because of the main site going down.

I basically trying to create a slideshow and a sperate film strip only that uses a different list, but both on the same page.

If I comment out one of them, it works perfectly, but if i use two calls, then the last calls options stick.

This seems to be a known issue: http://stackoverflow.com/questions/4858884/jquery-plugin-multiple-instances-of-galleryview-in-a-same-page

Thanks for your help, James

[jamescw]

any update on this?

[tadeck]

Unfortunately, no. I will look at it as soon as I have time for it, unless someone else will fix this before.

Actually, I would not recommend using this script, and one of the issues is just inability to work properly in the situation you have mentioned. This script is rather simple and does not support play / pause, does not work on touch-enabled devices such as iPad, does not have callbacks etc. plus it has lost support from the original author afaik.

But if you have some time, you can try to alter the script to use maybe concept similar to this: jsFiddle - it shows you how to add data to the container using jQuery.data() function so the data (options) are separated between different containers.

[jamescw]

Ok, thanks for getting back to me.

Its a shame because I think has some features missing from others such image resizing which is really use full when you are dynamically loading images from a CMS that are not all exactly the same size and vary slightly.

I will have a go at fixing, but will probably look at alternatives, any suggestions?

Cheers

[jamescw]

Will leave issue open to warn others.