Skip Navigation

[Résolu] Dynamic Carousel image Slider from Repeated Image Custom Field

Ce fil est résolu. Voici une description du problème et la solution proposée.

Problem:

I want to have Dynamic Carousel image Slider from Repeated Image Custom Field as my header for Custom post type called "Listings"

Solution:

Views built-in sliders works when you are using Views plugin to query multiple posts, in your case, it is a Repeated Image Custom Field of single post, you can integrate other slider JS framework, for example flexslider, see their domo:

http://flexslider.woothemes.com/carousel-min-max.html

See details here:
https://toolset.com/forums/topic/dynamic-carousel-image-slider-from-repeated-image-custom-field/#post-1141069

Relevant Documentation:

http://flexslider.woothemes.com/c

0% of people find this useful.

This support ticket is created Il y a 6 années et 2 mois. 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 – 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)

Marqué : 

Ce sujet contient 10 réponses, a 2 voix.

Dernière mise à jour par Luo Yang Il y a 6 années et 1 mois.

Assisté par: Luo Yang.

Auteur
Publications
#1127707
Capture.JPG

Tell us what you are trying to do?
I want to have Dynamic Carousel image Slider from Repeated Image Custom Field as my header for Custom post type called "Listings"

So, I ant to ask how can I achieved it like in the image that I attached.
- images are in the same height
- The Carousel image Slider section are full width
- Pop up lightbox slider when click

Is there any documentation that you are following?
I just jump between documentation and forum.
Link after link.
I get so confused and don't know what to look for.

Is there a similar example that we can see?
- example : lien caché

What is the link to your site?
Site under development but if you need I will push it only for you.
Tell me what I can do for you to make it easier.
Thank you in advance,

Topper

#1128001

Dear Topper,

Views built-in sliders works when you are using Views plugin to query multiple posts, in your case, it is a Repeated Image Custom Field of single post, you can integrate other slider JS framework, for example flexslider, see their domo:
lien caché

And here is a similar thread, for your reference:
https://toolset.com/forums/topic/making-images-from-custom-field-type-into-a-slideshow/

And here is the copy of PHP code of above thread:

function add_flexslider_slider_js() {
    wp_enqueue_script( 'flexslider-js', '<em><u>lien caché</u></em>', array( 'jquery' )); 
    wp_enqueue_style( 'flexslider-css', '<em><u>lien caché</u></em>');
}
  
add_action( 'wp_enqueue_scripts', 'add_flexslider_slider_js' );
#1128060

I will take sometime and will update the result to you

#1128128

OK, please update this thread if you still need assistance for it.

#1131042

I'm working on displaying content

#1131548

Please update this thread when you need assistance for it. thanks

#1135360
Slider.JPG
JS.JPG
Body.JPG

It's not working

This is what I do :
1.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' );

2. Create a content template for the single post:

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

3.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"
  });
  
});

And when I check the front end it's not working

#1135880

Since it is a custom codes problem, please provide a test site with the same problem, also point out the problem page URL and content template URL, I need a live website to test and debug it, thanks

#1141069

Thanks for the details, I have done below modifications in your website:
1) Create a content template "dynamic-carousel-image-slider-from-repeated-image-custom-field"
lien caché

with below codes:

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

JS codes:

// Can also be used with $(document).ready()
jQuery(window).load(function() {
  jQuery('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5,
    minItems: 2,
    maxItems: 4
  });
});

More help:
lien caché

2) Display above content template shortcode as a text widget into your template:

[wpv-post-body view_template="dynamic-carousel-image-slider-from-repeated-image-custom-field"]

Test it in front-end:
lien caché
it works fine, it is only an demo, you can follow flexslider document to customize it
lien caché

#1141287

My issue is resolved now. Thank you Luo Yang!

I saw the result and it work fine now.
However, is it possible to make the image to link to open the light box and see bigger image when it was clicked ?

Les nouveaux fils créés par Luo Yang et associés à celui-ci sont repris ci-dessous :

https://toolset.com/fr/forums/topic/make-the-image-to-link-to-open-the-light-box/

#1141907

You are welcome, for the new light box problem, please check the new ticket:

https://toolset.com/forums/topic/make-the-image-to-link-to-open-the-light-box/