Pinterest link in modal not referencing correct photo

Question

I have a photo gallery that when you click on a photo, opens a modal of a larger view of the image, which works fine. I also have a Pinterest button in the modal, with the intention of "pinning" said photo. My issue is that I'm having problems getting the proper parameters passed thru to the Pinterest link.

Here is my loop for the photos & Pinterest link...

<div class="links">
    {exp:channel:entries channel="tours"}
    {tour_photo_gallery}
    <a href="{tour_photo_gallery:photo:large}" title="{tour_photo_gallery:caption}" data-gallery>
        <img src="{tour_photo_gallery:photo:small}" alt="{tour_photo_gallery:caption}">
    </a>
    {/tour_photo_gallery}
    {/exp:channel:entries}
</div>

<div id="blueimp-gallery" class="blueimp-gallery">
    <!-- The container for the modal slides -->
    <div class="slides"></div>
    <!-- Controls for the borderless lightbox -->
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
    <!-- The modal dialog, which will be used to wrap the lightbox content -->
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" aria-hidden="true">&times;</button>
                    <p class="modal-title"></p>
                </div>
                <div class="modal-body next"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-very-light pull-left prev">
                        <i class="fa-icon-chevron-left"></i>
                        Previous
                    </button>
                    <div>
                        {exp:channel:entries channel="tours"}
                        {tour_photo_gallery limit="1"}
                        <span class="pinterestBtn">
                            <a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media={tour_photo_gallery:photo:large}&description={tour_photo_gallery:caption}" data-pin-do="buttonPin" data-pin-config="none" data-pin-height="28"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_28.png" /></a>
                        </span>
                        {/tour_photo_gallery}
                        {/exp:channel:entries}
                        <button type="button" class="btn btn-contrast next">
                            Next
                            <i class="fa-icon-chevron-right text-white"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.links holds my photos and opens up the lightbox...that works fine. #blueimp-gallery is the modal and {tour_photo_gallery} is a Grid fieldtype. I set a limit="1", otherwise it loops thru and displays Pinterest links for every image. However, by doing so, whatever photo I click on to display in the lightbox, the Pinterest link is always referencing the 1st entry in the Grid, instead of the one clicked on. I sense the second loop has to be paired w/ the initial one, so the Pinterest link knows which photo to reference...but I'm not sure how to do so. Hopefully I'm explaining this correctly. Any ideas?

Answer 1

Right, so essentially, you've got two channel entries loops going here, and they're not at all related. You'll either need to reconfigure your code to use only one, or try to pass a row_id parameter from the first set of images into the modal.

You could do this several ways - via embed, or stash potentially, etc, etc. I'm not familiar with the gallery you're using - but took a quick look - are you sure you actually need that second loop?