Skip Navigation

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

This support ticket is created 4 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

Tagged: 

This topic contains 10 replies, has 2 voices.

Last updated by Christian Cox 4 years, 9 months ago.

Assisted by: Christian Cox.

Author
Posts
#1255867
most recent, somehow a little better.png
gallery uploader in post admin screen.png
gallery images displayed on post.png
gallery image in lightbox.png

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>
#1255941

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>
#1255969
lol links.png
when-clicked.jpg
530 am.png

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">
<a href="#" class="btn flex-prev"><span>Prev</span></a>
<a href="#" class="btn flex-next"><span>Next</span></a>
</div>

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

  • <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>

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

    </div>

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

    #1256397

    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.

    #1257671

    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?

    #1257687

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

    #1258445
    Screen Shot 2019-06-04 at 9.42.36 AM.png

    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?

    #1260041

    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.

    #1263599

    Please open a private reply window. Thank you.

    #1264595

    Private reply fields are available here.

    #1267143

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

    This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.