1

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?

1
  • 1
    It looks like you need to work backwards and troubleshoot the html output first and find out what your links need to contain. Then you can modify your template to create the correct links (or modify your question to ask how to get that specific output). – Romans-8---31-39 Jan 14 '14 at 0:00
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?

2
  • 1
    That's what I'm figuring too...the loops aren't connected so the Pinterest button has no idea what photo to reference. Here's the page where this is happening, inroadsireland.com.225.69-195-198.groveurl.com/tours/go-south (click the "Photo Gallery" tab). No matter what photo you click to bring up the modal, the Pinterest button is associated with the first photo in the Grid row. I'm not sure how to connect the 2 loops though. I'm using a Bootstrap Image Gallery (github.com/blueimp/Bootstrap-Image-Gallery). The #blueimp-gallery is just a hidden container for the modal. – Patrick Jan 14 '14 at 16:40
  • 1
    I haven't used that…but couldn't you add the pinterest link to the modal widget and simply remove the second channel entry tag entirely? They seem to have info here about adding extra html: github.com/blueimp/Gallery/blob/master/… – Jessica D'Amico Jan 14 '14 at 16:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.