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
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' );
I will take sometime and will update the result to you
OK, please update this thread if you still need assistance for it.
I'm working on displaying content
Please update this thread when you need assistance for it. thanks
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
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
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é
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 ?