making images from custom field type into a slideshow

This support ticket is created 7 years, 1 month 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.

Our next available supporter will start replying to tickets in about 6.06 hours from now. Thank you for your understanding.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

Tagged: Sliders, Types plugin, Views plugin

This topic contains 5 replies, has 3 voices.

Last updated by mayurJ 7 years, 1 month ago.

Assisted by: Luo Yang.

Author

Posts

October 24, 2017 at 5:58 pm #581721

mikeV-2

Please do not send me to this link again:
https://toolset.com/forums/topic/how-to-useinstall-flexslider-in-a-custom-post-type-with-multiple-images/

I need instructions on how to take images uploaded into a custom field type and put them into a slide show. I do not want to have load Woocommerce to my page. Do I even have to have woo commerce installed to use the woo commerce Flexslider? If I have to to get woo commerce flexslider, please give clear instructions on how to do it with Divi.

The thread above is too specific to that person's website, not ours.

thanks,
Mike

October 25, 2017 at 8:14 am #581863

Luo Yang

Dear Mike,

Q1) Do I even have to have woo commerce installed to use the woo commerce Flexslider?
No you don't, Flexslider is a independent Javasript framwork, no woocommerce plugin needed.

Q2) If I have to to get woo commerce flexslider, please give clear instructions on how to do it with Divi.
The flexslider is only an example to setup a sliders for multiple instance custom image field, you can try with other Javascript sliders framework too, DIVI theme is not required.
and there isn't any existed document with clear instructions, I am trying to provide detail steps here:
1) Create a multiple instance custom image field "Image" with Types plugin:
https://toolset.com/documentation/user-guides/repeating-fields/
and setup field "Image" values for each post

2) Add below codes into your theme/functions.php:

function add_flexslider_slider_js() {
    wp_enqueue_script( 'flexslider-js', '<em><u>hidden link</u></em>', array( 'jquery' )); 
    wp_enqueue_style( 'flexslider-css', '<em><u>hidden link</u></em>');
}
 
add_action( 'wp_enqueue_scripts', 'add_flexslider_slider_js' );

3) Create a content template for the single post:
https://toolset.com/documentation/user-guides/editing-view-templates/setting-view-templates-for-single-pages/
In this content template, display the sliders with below codes:

<!-- Place somewhere in the <body> of your page -->
<div id="slider" class="flexslider">
  <ul class="slides">
        [wpv-for-each field="wpcf-image"]
            <li>[types field="image" id="" size="large"][/types]</li>
        [/wpv-for-each]
  </ul>
</div>
<div id="carousel" class="flexslider">
  <ul class="slides">
        [wpv-for-each field="wpcf-image"]
            <li>[types field="image" id="" size="thumbnail"][/types]</li>
        [/wpv-for-each]
  </ul>
</div>

Add below JS codes to the content template:

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

Then test it in front-end.

October 25, 2017 at 2:51 pm #582043

mikeV-2

Thank you for your help.

So I do not need to install flexslider with your instructions correct?

I have followed the steps and my slides do not load, I believe the space is there where the slider is supposed to be, but no images. Just below the title on this page:
hidden link

Any ideas,
Mike

October 26, 2017 at 2:24 am #582199

Luo Yang

Yes, you are right, you do not need to install flexslider with my instructions. as you can see in my post:

 wp_enqueue_script( 'flexslider-js', '<em><u>hidden link</u></em>', array( 'jquery' )); 
    wp_enqueue_style( 'flexslider-css', '<em><u>hidden link</u></em>');

We load flexslider from cdnjs.cloudflare.com

For the question, since it is a custom codes problem, please provide a test site with the same problem, and fill below private detail box with credentials and FTP access, also point out the problem view URL and where I can edit your PHP codes, I need a live website to test and debug, thanks

October 26, 2017 at 6:34 am #582229

Luo Yang

Thanks for the details, there are lots of JS errors in this problem page:
hidden link

for example:
Uncaught TypeError: jQuery(...).tooltip is not a function
(index):682 Uncaught TypeError: jQuery(...).flexslider is not a function
See screenshot: flexsliders.JPG

There I checked the HTML source codes, there are three places load the jquery.js
view-source:hidden link
line 67: this is wordpress built-in jquery file

<script type='text/javascript' src='<em><u>hidden link</u></em>;

Line 92: I am not sure where is it from, you need to locate it and remove it.

<script src="<em><u>hidden link</u></em>"></script>

line 908: it is from your child theme, file footer.php

<script src="<em><u>hidden link</u></em>" type="text/javascript"></script>

You need only one jquery in same page, I suggest you keep only the first jquery, remove other two

And I tested it with wordpress default theme in your website, by this:
1) add the same codes into "Twenty Seventeen" theme, functions.php:
hidden link

function add_flexslider_slider_js() {
    wp_enqueue_script( 'flexslider-js', '<em><u>hidden link</u></em>', array( 'jquery' )); 
    wp_enqueue_style( 'flexslider-css', '<em><u>hidden link</u></em>');
}
  
add_action( 'wp_enqueue_scripts', 'add_flexslider_slider_js' );

2) switch to theme "Twenty Seventeen", Test the post again, it works fine
hidden link
You can simply swithc to "Twenty Seventeen" to test the result

September 14, 2018 at 10:00 am #1108204

mayurJ

It should really be noted that in the above script, wherever it says

'<em><u>hidden link</u></em>'

that there should actually be the URL to your CSS or JS files..

On my installation.. the two files are located inside this folder

/wp-content/plugins/js_composer/assets/lib/bower/flexslider/

Other than that.. copying the script does work for me