[Resolved] showing repeatable fields in slider with view

[Author]

Posts

[chong-sumw]

I am trying to: put a repeatable field of images in a slider with views like described in https://toolset.com/forums/topic/generate-slide-on-my-slider/

Link to a page where the issue can be seen: hidden link

I expected to see: a typical slider with controllable image size and clickable thumbnail below

Instead, I got: a horrible slider with images of undesirable size, a half shown next/previous button and unclickable thumbnail navigator below.

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - we offer step by step tutorial that will help you to create a gallery using the repeating field.

Can you please try to follow the following article and try to resolve your issue.

More info:
=> https://toolset.com/2017/10/adding-a-gallery-of-images-for-custom-posts/

[chong-sumw]

Thank you for your help, Minesh.

I have followed the instruction above but encountered a few difficulties.

1. I cannot make the gallery to align to the centre of the page.
2. when click an image, a lightbox showed up (I use easy fancybox as instructed), there is no Previous/Next button.

I use elementor with toolset views to achieve the gallery effect, where I insert the gallery loop shortcode in the views. all log in info are written in the first post. thank you again for your help.

SUM

[Minesh]

Well - if you want a such slider.

Please check the following links:
=> hidden link
=> hidden link

If any of the above sliders fits into your requirement, you should try to create a test site on our free test platform discover-wp.com using available reference site for "Toolset Modules" and learn how above sliders are created.
=> https://discover-wp.com/site-types/toolset-modules/

Please note that you need to adjust your code/CSS as per your need based on repeating field as that totally depends on what theme/plugins you are using.

More info:
=> https://toolset.com/faq/how-and-why-to-create-a-test-site-in-discover-wp/

[chong-sumw]

Thanks for giving me the reference. However, the most critical piece of info is how to apply repeating field of a post into those sliders. I would much appreciate if more instruction of this could be given, thank you so much.

[Minesh]

Well - as I said you need to adjust the code as per your need.

I've created the following view:
hidden link

Where I've added the following code to that view's JS box:

jQuery(window).load(function() {
  // The slider being synced must be initialized first
  jQuery('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    directionNav: false,
    itemWidth: 130,
    itemMargin: 5,
    asNavFor: '#flexslider'
  });
  
  jQuery('#flexslider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
  });
});

I've also added the following code to custom code section of Toolset:
=> hidden link

I've added the view using the shortcode element of elementor:

[wpv-view name='flexslider-single-business']

The flexslider is working fine but you need to adjust the CSS/HTML according to your requirement. That is custom thing which is beyond the scope of our support policy.

[chong-sumw]

My issue is resolved now. Thank you!

[chong-sumw]

Hi Minesh, I need your help again!

The slider view turn out only display the same set of repeatable image field (after the 1st load) for all the other post, which is weird. Sometimes the repeatable image field just stick together and wont be separated. could you please help me to take a look if something is wrong? as always thank you so much for your kind help and patience.

html:

  <div id="flexslider" class="flexslider">
    <ul class="slides">
      <li>[types field='gallery-images' alt="[wpv-post-title]" width="600" height="350" resize='proportional' separator='</li><li>'][/types]</li>
    </ul>
  </div>
  <div id="carousel" class="flexslider">
    <ul class="slides">
      <li>[types field="gallery-images" separator="</li><li>" width="120" height="80" alt="[wpv-post-title]"][/types]</li>
    </ul>
  </div>

js editor:

jQuery(window).load(function() {
  // The slider being synced must be initialized first
  jQuery('#carousel').flexslider({
    animation: "slide",
    controlNav: true,
    animationLoop: false,
    slideshow: false,
    directionNav: false,
    itemWidth: 200,
    itemMargin: 5,
    asNavFor: '#flexslider'
  });
  
  jQuery('#flexslider').flexslider({
    animation: "slide",
    controlNav: false,
    directionNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
  });
});

As usual, please access the website freely as per your need. the site has been changed to hidden link other login credentials remain unchanged. thanks

[Luo Yang]

Hi,

Minesh is on vacation, you will get the answer in tomorrow.

[Minesh]

Well - private information you shared is removed once you close/resolve ticket.

Please share problem URL where you added the gallery as well as access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Can you please check now.

I've adjusted your view's loop editor content as given under:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>
  <div id="mainslider" class="flexslider">
    <ul class="slides">
      [wpv-for-each field="wpcf-gallery-images"]
      <li>[types field='gallery-images' alt="[wpv-post-title]" width="600" height="350" resize='proportional'][/types]</li>
      [/wpv-for-each]
    </ul>
  </div>
  <div id="carousel" class="flexslider">
    <ul class="slides">
      <li>[types field="gallery-images" separator="</li><li>" width="120" height="80" alt="[wpv-post-title]"][/types]</li>
    </ul>
  </div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]

As well as the JS code as given under:

jQuery(window).load(function() {
  // The slider being synced must be initialized first
  jQuery('#carousel').flexslider({
    animation: "slide",
    controlNav: true,
    animationLoop: false,
    slideshow: false,
    directionNav: false,
    itemWidth: 200,
    itemMargin: 5,
    asNavFor: '#mainslider'
  });
  
  jQuery('#mainslider').flexslider({
    animation: "slide",
    controlNav: false,
    directionNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
  });
});

I can see now its working:
=> hidden link

Note: I've also update few outdate plugins on your install.

[Minesh]

Can you please confirm that solution I shared help you to resolve your issue.

[chong-sumw]

Dear Minesh,

Thank you so much for your much. Sorry for the late response since I am out of town lately.

The issue hasn't been completely solved as viewed on my end. The slider shows the same set of repeatable image fields on every post i click, totally not sure why this happens. Have you tried to open couple of more post, can you see different images on different post as it supposes to be?

thank you again for your help

[Minesh]

Well - can you please check now:
=> hidden link
=> hidden link

I see its working fine now.