Display multiple-instance uploaded images as slider

This thread is resolved. Here is a description of the problem and solution.

Problem:

The issue here is that the user had some repeated image fields and wanted to create a slider using these images.

Solution:

I managed to create a flexslider plugin that should be able to help your.

Download and install the plugin in the link below.
https://drive.google.com/file/d/1CFU2_oBqe9PJBks8cT1VqMND8-ytDdVE/view?usp=sharing

Then create a content template for your post and add the following.

<div class="flexslider">
  <ul class="slides">
   [wpv-for-each field="wpcf-image_1"]
  <li>[types field="image_1" size="medium" align="none" resize="pad" padding_color="#FFF"][/types]</li>
  [/wpv-for-each]
  </ul>
</div>

After doing this then you will need to add the script for it to work.

Add this to the js section of the content template.

jQuery(window).load(function() {
   jQuery('.flexslider').flexslider();
 });

This support ticket is created 6 years, 8 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
-	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	-
-	13:00 – 18:00	13:00 – 18:00	13:00 – 18:00	14:00 – 18:00	13:00 – 18:00	-

Supporter timezone: America/Jamaica (GMT-05:00)

Tagged: Sliders, Views plugin

This topic contains 5 replies, has 3 voices.

Last updated by Shane 6 years, 7 months ago.

Assisted by: Shane.

Author

Posts

March 30, 2018 at 4:05 pm #630139

syafS

I'm trying to display a slider on each of the list in this directory: hidden link

I wanted to try this: https://toolset.com/forums/topic/create-a-slider-with-multiple-images-from-image-fields/

But I couldn't find a way to make it work. Any help will be appreciated. Thanks!

March 31, 2018 at 6:33 am #630212

Beda

There are no images on that directory.
The approach is thought for images from a repeating field instance and will work out of the box - but it requires flexslider and other libraries that are not natively included in Toolset or WordPress.

I am not sure this is the best match for your goal.

Can you let me know how exactly you want hidden link to look alike?
Then we may come up with the best fit for your goal

March 31, 2018 at 6:52 am #630218

syafS

Screen Shot 2018-03-31 at 2.46.26 PM.png

Hi Beda, the image is within the accordion list (you have to expand the list).

Each list will have 1-3 images. For images with more than 1 image, I just want to display as a slider like attached.

March 31, 2018 at 9:42 am #630261

Beda

These images are from repeating fields, correct?

Then you can follow these steps:

1. Download this plugin:
hidden link

2. Use a similar structure like this in the View:

<div class="flexslider">
<ul class="slides">
 	<li><img src="slide1.jpg" /></li><!-- here you will use the ShortCode of repeating fields-->
</ul>
</div>

3. Add this JS:

// Can NOT be used with $(document).ready() because $ will not work in WordPress: https://toolset.com/documentation/user-guides/adding-custom-javascript-views/#achieving-great-results-with-little-coding-by-using-jquery
jQuery(window).load(function() {
  jQueyr('.flexslider').flexslider({
    animation: "slide"
  });
});

March 31, 2018 at 10:37 am #630273

syafS

Screen Shot 2018-03-31 at 6.37.07 PM.png

Screen Shot 2018-03-31 at 6.33.14 PM.png

Hi Beda. Here's what I did:

1. Copied the flexslider to my theme folder glo/flexslider
2. And as for the code:

<div class="toggle-inner">
		<div class="row">
        <div class="col-sm-3"><div class="flexslider"><ul class="slides">
    <li>[types field='upload-imags' alt='%%ALT%%' title='%%TITLE%%' size='full' align='none' separator=', '][/types]</li><!-- here you will use the ShortCode of repeating fields-->
</ul>
</div>
 </div>

Now, the directory doesn't show the images but you can see the image links in the source.

Any idea what I did wrong?

April 3, 2018 at 11:59 am #630988

Shane

Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Syaf

I must apologize for the lengthy delay.

What you should do is get your repeated fields individually so your code should look like

<div class="toggle-inner">
        <div class="row">
        <div class="col-sm-3">
<div class="flexslider">
<ul class="slides">
[wpv-for-each field="wpcf-upload-imags"]
    <li>[types field='upload-imags' alt='%%ALT%%' title='%%TITLE%%' ][/types]</li>
[/wpv-for-each]
</ul>
</div>
 </div>

This should generate the flex slider for you.

Thanks,
Shane