[Resolved] repeat custom field image in a slider

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.

This topic contains 4 replies, has 2 voices.

Last updated by petruccio 6 years, 6 months ago.

Assigned support staff: emerson.

Author
Posts
#135538

Hello,
I did a slider using custom field image from a post .
This part is ok with view and types, I display the rights images in the right post...
But... All my custom field image (repeat the custom field) are displayed in the same slide, not in each slide... so I have only one slide ! I had try to use the separator, with

  • with dot, etc... but... Nothing happend ! still in the same slide...
    In fact, I need help... I think I'm close but at the moment I didn't find anything in the documentation about this problem...
    thank you.
    lili
  • #135539

    I also try with :
    wpv-for-each field="xxxxxxxxx"
    but it doesn't work

    #135562

    And then I try with the jquery cycle plugin, and still doesn't work...
    So I 'am back with my regular code from view...
    and still 2 image in a slide...

    [wpv-layout-start]
    <!-- wpv-loop-start -->
       <table width="100%">
          <wpv-loop wrap="1" pad="true">
             [wpv-item index=1]
            <tr><td> <div class="frame"><a href="[wpv-post-url]">[wpv-for-each field="image-1-slider-art-momen"][types field="image-1-slider-art-moment"  width="1200" align="none" id=""][/types][/wpv-for-each]</a>
    </div></td>
            </tr>
          </wpv-loop>
       </table>
    
    <!-- wpv-loop-end -->
    [wpv-no-posts-found][wpml-string context="wpv-views"]<strong>No posts found</strong>[/wpml-string][/wpv-no-posts-found]
    [wpv-layout-end]

    any idea ?

    #135973

    Dear Petruccio,
    Views can be used slide from one post content to another post content. However It is not designed to slide from within repeating images of the same page. To do this, can use jQuery cycle plugin. I manage to have a working example on this.This is assuming you have a post type "page" with each page content containing several images using repeating image fields. And you already have the images set for each page content. This is how I do it:

    Step1.) In the slider View (the View that is designed to slide from one post content to another), I set the pagination to manual and add pagination controls. The purpose is just let the user click on the pagination links if to see another set of slider images. For example when the page loads, the user is presented only with the first page content. This content has a slider of images (using jQuery cycle plugin). If the user wants to view another set of slider images, in this case belonging to another page content. The user will simply click the pagination link. View will navigate to the next page content and show another set of slider images belonging to this page. You can easily implement this by adding the code below to your "Filter HTML":
    [php]
    [wpv-filter-start hide=&quot;false&quot;]
    [wpv-filter-controls][/wpv-filter-controls]
    [wpv-pagination][wpv-pager-current-page style=&quot;link&quot;][/wpv-pagination]
    [wpv-filter-end]
    [/php]

    Step2.) In your functions.php (if you are using a child theme, add this to your child theme functions.php), add the jQuery Cycle JS plugin:
    [php]
    //Add the jQuery Cycle Plugin

    function add_cycle_plugin_wp_test() {

    wp_enqueue_script('jquery_cycle_test', 'hidden link',array( 'jquery' ));

    }
    add_action('wp_enqueue_scripts', 'add_cycle_plugin_wp_test');
    [/php]

    Step3.) In your View layout meta HTML, I simply have this:
    [php]
    [wpv-layout-start]
    [wpv-items-found]
    &lt;!-- wpv-loop-start --&gt;
    &lt;wpv-loop&gt;
    &lt;div id=&quot;the_images&quot;&gt;
    [wpv-for-each field=&quot;wpcf-slider-images&quot;]
    [types field=&quot;slider-images&quot; id=&quot;&quot;][/types]
    [/wpv-for-each]
    &lt;/div&gt;
    &lt;/wpv-loop&gt;
    &lt;!-- wpv-loop-end --&gt;
    [/wpv-items-found]
    [wpv-no-items-found]
    [wpml-string context=&quot;wpv-views&quot;]&lt;strong&gt;No items found&lt;/strong&gt;[/wpml-string]
    [/wpv-no-items-found]
    [wpv-layout-end]
    [/php]

    See how I use wpv-for-each to display the repeating image fields. Another thing that is important is that I enclosed these images with with a div using id "the_images", I will use for the jQuery cycle implementation.

    Step4.) Finally click "Open JS editor" below the View layout meta HTML editor, to add the jQuery cycle JS code (the ID selector used is the div id of the repeating images - "the_images"):
    [php]
    $('#the_images').cycle('fade');
    [/php]

    See screenshot (jquery_cycle_implementation.jpg) for the Views layout meta HTML and this JS code added in Views.
    You can tweak my code and implementation to your actual site. But I believe you should have this working.
    Please let me know how it goes. Thanks.

    Cheers,
    Emerson

    #137425

    Sorry my delayded answer, I did not recieved the notification mail ... and thanks for your answer , it's ok now !