[Resolved] PHOTO+THUMBNAILs slider gallery for my custom post type

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

Problem:
Trying to create a PHOTO+THUMBNAILs slider gallery for the custom post type, which has a field with multiple images, but instead only single images displayed with no gallery.

Solution:
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 -->

100% of people find this useful.

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.

Author
Posts
#583254

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?
hidden link

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

    #583345

    Noman
    Supporter

    Languages: English (English )

    Timezone: Asia/Karachi (GMT+05:00)

    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

    #583986

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

    #584213

    Noman
    Supporter

    Languages: English (English )

    Timezone: Asia/Karachi (GMT+05:00)

    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

    #587926

    Noman
    Supporter

    Languages: English (English )

    Timezone: Asia/Karachi (GMT+05:00)

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

    Please check here:
    hidden link

    More info: hidden link

    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

    #589216

    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. hidden link). 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 hidden link

    #589398

    Noman
    Supporter

    Languages: English (English )

    Timezone: Asia/Karachi (GMT+05:00)

    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:
    hidden link

    Thanks

    #592511

    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!