[Résolu] PHOTO+THUMBNAILs slider gallery for my custom post type

[Auteur]

Publications

[eWeb]

Tell us what you are trying to do?
create PHOTO+THUMBNAILs slider gallery for my custom post type

Is there any documentation that you are following?
https://toolset.com/forums/topic/how-to-create-image-gallery/
https://toolset.com/forums/topic/flexslider-show-all-images-from-custom-post-types/
https://toolset.com/forums/topic/flexslider-tutorial-or-example-please/

Is there a similar example that we can see?
No

What is the link to your site?
lien caché

Dear Support,

I am trying to create a PHOTO+THUMBNAILs slider gallery for my custom post type, which has a field with multiple images, but instead i see only single images displayed with no gallery.

I have went though these posts:
https://toolset.com/forums/topic/how-to-create-image-gallery/
https://toolset.com/forums/topic/flexslider-show-all-images-from-custom-post-types/
https://toolset.com/forums/topic/flexslider-tutorial-or-example-please/

I have tried according to tutorials but I cannot seem to make the flexslider gallery work.

Things I have in Toolset:
Post type: Furniture (test-baldas) with a field for multiple pictures (fotkes).
Layout: Single Furniture (Layout for Test-baldas)
Content Template: ctp-Single-Furniture (test-baldas-cp)

I have downloaded (module_flexslider2017-05-26.zip) and installed Flexslider module via Toolset Module Manager.

Content template has this HTML code:
<div id="slider" class="flexslider-main flexslider">
<ul class="slides">

<img src="[wpv-post-featured-image output='url']" alt="[wpv-post-title]">

</div>

<div id="carousel" class="flexslider flexslider-nav">
<ul class="slides">
[wpv-for-each field="wpcf-fotkes"]

<img src="[types field='fotkes' url='true' width='210' height='132'][/types]" alt="[wpv-post-title]">

[/wpv-for-each]

</div>

Content template has this JSS code:
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"
});
});

[Noman]

Hi Birute,

Thank you for contacting Toolset support. From the description I understand that you want to create a Slider with thumbnails. Please follow the below steps to achieve this:

1. Add this jQuery code in Content Template >> JS editor:

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

2. Add the following html code in your Content Template:

<!-- Slider - start here -->
<div id="flexslider" class="flexslider">
  <ul class="slides">
	<li>[types field="fotkes" separator="</li><li>" width="770" height="510" alt="[wpv-post-title]"][/types]</li>
  </ul>
</div>
<div id="carousel" class="flexslider">
   <ul class="slides">
            	 <li>[types field="fotkes" separator="</li><li>" width="120" height="80" alt="[wpv-post-title]"][/types]</li>
  </ul>
</div>
<!-- Slider - end here -->

Thank you

[eWeb]

I have tried the following code, but unsuccessfuly. Maybe I need additional CSS or plugins installed to make it work? I get the same results, photos are being displaying like normal ULs...

[Noman]

Okay, please provide temporary access (WP-Admin and FTP Login info) to your staging site.

Your next answer will be private which means only you and I have access to it.

=== Please backup your database and website ===

✙ I would additionally need your permission to de-activate and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important.

✙ Please add the Links to the front end page where you have displayed the slider, and back-end link where you have created the slider.

Thank you

[Noman]

Hello Birute,
I have added flexslider js in your JS editor and CSS in your css editor. See attached screenshot.

Please check here:
lien caché

More info: lien caché

Slider arrows are missing/ not loading:
1. You can add custom icons using CSS
2. Or if you want to add flexslider icons, then place icon fonts in child theme and set the path in CSS.

Thank you

[eWeb]

Thank you for the help. The slider now works. But I am looking for a bit different solution to fit my customer's needs. I am trying to make thumbnails to be on the right side and slide vertically. (Jssor slider etc. lien caché). But I have no luck integrating it before, nor do I know an easy way.

Could you please give any advice on that, so I could make WP-Types work for this project with all its full potential.

I need to use this in working website design, without changing it very noticeably if possible...
Like here lien caché

[Noman]

Hello Birute,

That’s technically a different issue as its different from the original issue in this ticket, you would like to display Thumbnails on the right side and slide vertically. Please kindly open a new ticket with more details for this 2nd issue and we would be happy to help. This will help other users with similar problems to find solutions when searching the forum, We do not handle multiple issues in the same ticket as per support policy. https://toolset.com/toolset-support-policy/

In the new ticket please confirm that you want to make a slider like this:
lien caché

Thanks

[eWeb]

Sorry for late response, i was on short holidays and away from all work.
Thank you for your help, i really appreciate it and now i have another option working, that is very nice.
Wish you best luck!