nGen, FieldFrame with jQuery and FancyBox Gallery

hard to troubleshoot without a link.

Sounds like you need to give each gallery a name. I am not familiar with fancy box but old light box required you to name each gallery if multiple were on the same page. For lightbox that would be done in this format rel=”lighbox[galleryname]” inside of the <a> tag.

running with scissors; Unfortunately this is on a test box and not yet in production, but I want it to be.

Eyevariety; You are correct. I need to find a way to make each entry have it own “example_group”

Right now I have this code included in the header

[removed]
        $(document).ready(function() {
        

            $("a[rel=example_group]").fancybox({
                'transitionIn'        : 'none',
                'transitionOut'        : 'none',
                'titlePosition'     : 'over',
                'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                    return '<span>Image ' +  (currentIndex + 1) + ' / ' + currentArray.length + '</span>';
                }
            });
        
        });
    [removed]

And this code that displays the gallery on the page and within my exp:weblog:entries tags

<div id="fancy_content">
{cars_pictures}
{exp:imgsizer:size src="{cell_1}" width="600" quality="100"}
<a href="http://{sized}%22rel=%22example_group" rel="noopener example_group" title="{cell_2}" target="_blank">_{/exp:imgsizer:size}__{exp:imgsizer:size src="{cell_1}" width="95" quality="100"}_{sized}</a>
{/exp:imgsizer:size}
{/cars_pictures}
</div>

I need a way to make each entry have it own rel=”example_group” so the 2nd gallery would be rel=”example_group2” and the 3rd would be rel=”example_group3” and so on.

I’m sure this can be done, just do not know how yet. Figure I need some more javscipt knowledge to figure out maybe some jquery.

Thanks

Mike

How are you dividing up your galleries?

If it’s category based, use a {exp:categories} pair to output the category url.

If it’s URL path based, you could use segment (e.g. /gallery/vans, /gallery/cars would used {segment_2})

No categories, each entry has its own nGen with FF Matrix field in the publish and edit page.

Each entry shows up correctly on the main page, but as soon as you start looking at the bigger pictures the FancyBox groups all the pictures from all the entries galleries on the whole page.

I figured out last night if I change this i the header

$("a[rel=example_group]").fancybox({

To this

$(".example_group").fancybox({

then this change for the entry area

<a class="example_group" href="{sized}" target="_blank" title="{cell_2}" rel="nofollow">

It will only show the single picture the user wants to see, but no browsing through the single entries gallery. They would have to close that pictures popup window and choose another picture to view.

Mike

Have you tried changing the rel tag for each gallery:

<div id="fancy_content">
{cars_pictures}
{exp:imgsizer:size src="{cell_1}" width="600" quality="100"}
<a href="http://{sized}%22rel=%22gallery-{entry_id}" rel="noopener gallery-{entry_id}" title="{cell_2}" target="_blank">_{/exp:imgsizer:size}__{exp:imgsizer:size src="{cell_1}" width="95" quality="100"}_{sized}</a>
{/exp:imgsizer:size}
{/cars_pictures}
</div>

Note the ‘rel=”gallery-{entry_id}”’ bit.

On your original code you posted, you had 2 “rel” parameters on your a tag - this may be causing or adding to the problem.