[Resolved] I need to make slider with thumbnails from custom type post image field

[Author]

Posts

[eWeb]

Tell us what you are trying to do? Make slider with thumbnails from custom type post image field. Discussed about this in other ticket and have nice working slider, but it is horizontal. My client's website has some basic design and shows photos like here hidden link that is one bigger photo and few aligned vertically on right side. I need to make something like this hidden link but looking like that furniture website layout. Can you help me with that?

Is there any documentation that you are following?
Stopped here (another ticket about slider with custom type post image field thumbnails

Is there a similar example that we can see?
Here is working slider, but horizontal one hidden link
I need to make something like this hidden link with vertical scrolling and controls

after making the simple slider work with Multiple image fields (with your help), it took us some time to find the solution that would fit our customer's needs. The objective is to have a more extendable and responsive image slider with vertical thumbnails. The JSSOR slider seemed like the right solution but we were unable to make it work, because there was a "script" tag in html code that disappeared after saving content template. We would like to ask for help implementing custom JSSOR slider code into WP-Types, so that we could make a nice sliders with multiple image fields.

JSSOR slider is here: hidden link

[Luo Yang]

Dear Birute,

I have download the demo you provided above, and checked the HTML source code of it, it is very easy to setup such kind of sliders.

If you checked the HTML source code of the file slider.html, you will be able to see below codes:

<div>
<img data-u="image" src="img/004.jpg" />
<img data-u="thumb" src="img/004-s99x66.jpg" />
</div>
<div>
<img data-u="image" src="img/005.jpg" />
<img data-u="thumb" src="img/005-s99x66.jpg" />
</div>

So you just need to output the image in two size, for example:

<img data-u="image" src="[types field="my-image"  size="full" url="true"]" />
<img data-u="thumb" src="[types field="my-image"  size="thumbnail" url="true"]" />

More help:
https://toolset.com/documentation/customizing-sites-using-php/functions/#image

And for those custom JS and CSS codes, you can edit the view, in section "Loop Output Editor", click the "CSS editor" and "JS editor", put your custom JS and CSS codes into them, see our document:
Adding custom CSS to Views
https://toolset.com/documentation/user-guides/adding-custom-css-views/
Adding custom JavaScript to Views
https://toolset.com/documentation/user-guides/adding-custom-javascript-views/

[eWeb]

Yes, I can see how to insert images to slider, you are right about the
following code, but only for single image.

<div>
<img data-u="image" src="img/004.jpg" />
<img data-u="thumb" src="img/004-s99x66.jpg" />
</div>

<div>
<img data-u="image" src="img/005.jpg" />
<img data-u="thumb" src="img/005-s99x66.jpg" />
</div>

<img data-u="image" src="[types field="my-image" size="full"
url="true"]" />
<img data-u="thumb" src="[types field="my-image" size="thumbnail"
url="true"]" />

Q.1. What I ask is to make this slider work with multiple-images field.

The output of multiple-image field is:
[types field='fotkes' size='full' url='true' separator=', '][/types]"

How to iterate through all the images and have two image tags (pic + thumb)
work? What would be the output of the code to have all images from multiple-
image field?

-----------------------------
Q.2. Slider do not seem to initialize. I have the following setup:
1. The code of the JSSOR main script minified in Toolset's Custom JS Editor.
2. The code of JSSOR slider JS in Layout template's JS.
3. Initialization of JSSOR slider in Layout template's JS.
4. CSS of the JSSOR slider in Layout template's CSS.
5. HTML code for JSSOR slider in Layout template's HTML.

Slider does not seem to show op, however the HTML of the page is rendered.
What is the problem? How to make it work?

I would really appreciate if you could login to my website to check it.

[Minesh]

Luo is on vacation. This is Minesh here and I'll take care of this ticket and try to help you further. Hope this is OK.

Please share problem URL and for which multiple image field you want to implement slider.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Could you please check now and confirm it works at your end as well: hidden link

I've made adjustment to your "slides" div that contains the slider images as given under:

<div data-u="slides" style="cursor:default;position:relative;top:0px;left:240px;width:720px;height:480px;overflow:hidden;">
  [wpv-for-each field="wpcf-fotkes"]
    <div>
       <img data-u="image" src="[types field='fotkes' size='full' url='true'][/types]" />
         <img data-u="thumb" src="[types field='fotkes' size='thumbnail' url='true'][/types]" />     </div>  
[/wpv-for-each]
 </div>

- I used [wpv-for-each] shortcode to display the repeating image field.

More info:
=> https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-for-each

I've replaced the "$" sign with jQuery as given under in JS box:

jQuery(document).ready(function () {
    jssor_1_slider_init();
});

[eWeb]

That's! Thank you so much, really good job and fast answer. Now all i need is customize that a bit, and i will try to do it by my self.
Happy New Year and my best wishes to you and your family!
Thanks again, i really appreciate this!