[Resolved] Can't get jQuery to work with repeating field grid.

[Author]

Posts

[suzyo]

I am trying to: Display photo gallery made with repeating images as a slider/carousel with next/previous arrows to scroll through.

Link to a page where the issue can be seen: I need to give you bypass so you can see it, but I will include screenshot.

I expected to see: Gallery image thumbnail open in lightbox and then use previous/next arrows to scroll through gallery.

Instead, I got: Each image opens on its own in lightbox, but I need to use browser's back button to return to post.
- - - - - - - -
This code works successfully to display images as thumbnails on post and to open images individually in lightbox.

<div class="post-slider">
<div class="tb-repeating-field tb-repeating-field--crop">
    <div class="tb-repeating-field--grid">
      
      <ul class="slides">
        [wpv-for-each field="wpcf-gallery"]
            <li>
                <a class="thickbox" href="[types field='gallery' size='full' url='true' separator=''][/types]">[types field='gallery' output='normal'  align='none' size='spotlight-featured-posts'  proportional='true' resize='proportional' title='%%TITLE%%' alt='%%ALT%%'][/types]</a>
        </li>

 </ul>
    [/wpv-for-each]
     
    </div>
</div>
</div>

Now, for the next part: I have tried owl carousel, jQuery cycle, flexbox, and all of the slippies and slidies out there. I just can't get it to work or I wouldn't be bothering you. It's been 4 days and I can't stand it anymore!

I don't understand the content template/view approach. Isn't it possible to simply apply jQuery to the content template and have the gallery appear in a lightbox (different screen) with previous/next arrows? I am hesitant to use the Views approach as there will literally be over 5,000 posts, maybe many more (eek!) using this functionality on the same site. Please let me know if I am wrong. Thank you.

p.s. - HA! I just realized while looking at the images I uploaded to this post that I am seeking the EXACTLY SAME FUNCTIONALITY that you are using here!

p.p.s - I don't use Bootstrap, Gutenburg, Layouts. Also, the grid is showing on desktop but not in mobile, images are still full size and stacked as they were before. (God, I"m the worst.)

Okay, I'm getting closer, but it's still not quite there. (I can now click on lightbox image and it will return to post, and there's actually some response on mobile.) ¯\_(ツ)_/¯

<a href="[wpv-post-featured-image output='url' size='full']" data-lightbox="gallery" showImageNumberLabel="false" alwaysShowNavOnTouchDevices="true" data-title="[wpv-post-featured-image output='caption']">[wpv-post-featured-image output='img' size="custom" width="300" height="300" crop="true"]</a>

[suzyo]

Apparently, I've run down the edit clock. The last bit of code is incorrect, this is what I have:

<div id="slider" class="flexslider">
     
<div class="post-slider">
<div class="tb-repeating-field tb-repeating-field--crop">
    <div class="tb-repeating-field--grid">
      
      <ul class="slides">
        [wpv-for-each field="wpcf-gallery"]
            <li>
                <a class="thickbox" href="[types field='gallery' size='full' url='true' separator=''][/types]">[types field='gallery' output='normal'  align='none' size='spotlight-featured-posts'  proportional='true' resize='proportional' title='%%TITLE%%' alt='%%ALT%%'][/types]data-lightbox="gallery" showImageNumberLabel="false" alwaysShowNavOnTouchDevices="true" data-title="</a>
        </li>

 </ul>
    [/wpv-for-each]
     
    </div>
</div>
</div>

[suzyo]

Okay, 5:30 am and this is what it looks like now! (Still not scrolling, still no arrows - pagination, I suppose - but getting closer - and very, very hungry.) Working on prev/next buttons - LOL. Those links do work, but they're in the wrong place.

[php]<div id="slider" class="flexslider">

<div class="post-slider">
<div class="tb-repeating-field tb-repeating-field--crop">
<div class="tb-repeating-field--grid">

<div class="post-slider">
Prev
Next
</div>

<ul class="slides">
[wpv-for-each field="wpcf-gallery"]

[types field='gallery' output='normal' align='none' size='spotlight-featured-posts' proportional='true' resize='proportional' title='%%TITLE%%' alt='%%ALT%%'data-lightbox="gallery" showImageNumberLabel="false" alwaysShowNavOnTouchDevices="true" data-title="[wpv-post-featured-image output='caption']"][/types]

[/wpv-for-each]
</div>

</div>

</div>
</div></code.

[Christian Cox]

Hi, I'm really not sure what I can offer here. Toolset does not provide any Lightbox functionality, so you're on your own with custom JavaScript and configuring a gallery system of some kind. Please refer to our support policy regarding custom code solutions: https://toolset.com/toolset-support-policy/

With that being said, if there's something in Toolset that is not working as expected, I'll be glad to take a look. Please provide login credentials in the private reply fields here.

[Christian Cox]

Is the information you provided supposed to be the HTTP auth or the wp-admin login credentials? It looks like wp-admin credentials. Can you provide the basic auth as well?

[suzyo]

btw, previous message (first send of login deets) is not indicated as private on my end. is it visible?

[Christian Cox]

I made your previous reply private, but I'm not able to see any new information in either reply now. I see one username and one password. That information does not get me past the basic HTTP authentication (see the screenshot). Can you try again?

[Christian Cox]

First thing I see is here:

<ul class="slides">
        [wpv-for-each field="wpcf-gallery"]
            <li>
                
              <a class="thickbox" href="[types field='gallery' size='full' url='true' separator=''][/types]">[types field='gallery' output='normal'  align='none' size='spotlight-featured-posts'  proportional='true' resize='proportional' title='%%TITLE%%' alt='%%ALT%%'data-lightbox="gallery" showImageNumberLabel="false" alwaysShowNavOnTouchDevices="true" data-title="[wpv-post-featured-image output='caption']"][/types]</a>
        </li>
 </ul>
     
    [/wpv-for-each]    

Notice the ul tag starts before the wpv-for-each but ends inside the wpv-for-each. That's breaking the HTML markup structure. The closing ul tag should be outside the wpv-for-each.

[suzyo]

Please open a private reply window. Thank you.

[Christian Cox]

Private reply fields are available here.

[Christian Cox]

I have made all your private information private. If you have any doubt about that, visit the site in an incognito window.