Add text by picture in slideshow using jquery en plugin

Question

I'd like to configure the plug-in so that descriptive texts are shown with the photos when they are activated. There is something wrong, because instead text "Foto 1 from 4 broccoli" or "Foto 3 from 4 rodekool" i get "Foto 1 from 41" or "Foto 3 from 43".

  $(document).ready(function () {
            
            $('#imgContainer').cycle({
                'fx': 'scrollHorz',
                'paused': true
            });

            // knoppen Vorige en Volgende
            $('#btnPrev').on('click', function () {
                $('#imgContainer').cycle('prev');
            });

            $('#btnNext').on('click', function () {
                $('#imgContainer').cycle('next');
            });

            
            $('#imgContainer').on('cycle-next', function (event, optionHash) {
                var currentImage = optionHash.currSlide + 1; 
                var groenten = currentImage;
                switch (groenten) {
                  case '1' : {
                    document.getElementById('imgContainer').innerHTML = 'broccoli';
                    break;
                  }
                case '2' : {
                    document.getElementById('imgContainer').innerHTML = 'prei';
                  break;
                  }  
                case '3' : {
                    document.getElementById('imgContainer').innerHTML = 'rodekool';
                  break;
                  } 
                case '4' : {
                    document.getElementById('imgContainer').innerHTML = 'witlof';
                  break;
                  } 
                };
                var text = 'Foto ' + currentImage + ' van ' + ($('#imgContainer img').length - 1) + groenten;
                $('#imgCounter').html(text);
            });

            $('#imgContainer').on('cycle-prev', function (event, optionHash) {
                var currentImage = optionHash.currSlide + 1;
                var text = 'Foto ' + currentImage + ' van ' + ($('#imgContainer img').length - 1);
                $('#imgCounter').html(text);
            })

        });

Answer 1

var groenten is not necessery, Instead switch(groenten) is switch(currentImage) and case is like: case 1: {
var text = 'Foto ' + currentImage + ' van ' + ($('#imgContainer img').length - 1) + ' broccoli'; $('#imgCounter').html(text); break; }

So the whole code is

$(document).ready(function () {
            // Plug-in laden met configuratieobject. Beginstatus gepauzeerd.
            $('#imgContainer').cycle({
                'fx': 'scrollHorz',
                'paused': true
            });

            // knoppen Vorige en Volgende
            $('#btnPrev').on('click', function () {
                $('#imgContainer').cycle('prev');
            });

            $('#btnNext').on('click', function () {
                $('#imgContainer').cycle('next');
            });

            // Events aanhaken, zie http://jquery.malsup.com/cycle2/api/ (onderin) voor complete documentatie.
            $('#imgContainer').on('cycle-next', function (event, optionHash) {
                var currentImage = optionHash.currSlide + 1;  
                switch (currentImage) {
            case 1: {            
                var text = 'Foto ' + currentImage + ' van ' + ($('#imgContainer img').length - 1) + ' broccoli';
                $('#imgCounter').html(text);
              break;
            }
            case 2: {            
                var text = 'Foto ' + currentImage + ' van ' + ($('#imgContainer img').length - 1) + ' prei';
                $('#imgCounter').html(text);
              break;
            }
            case 3: {            
                var text = 'Foto ' + currentImage + ' van ' + ($('#imgContainer img').length - 1) + ' rodekool';
                $('#imgCounter').html(text);
              break;
            }
            case 4: {            
                var text = 'Foto ' + currentImage + ' van ' + ($('#imgContainer img').length - 1) + ' witlof';
                $('#imgCounter').html(text);
              break;
            }
            }
            });

            $('#imgContainer').on('cycle-prev', function (event, optionHash) {
                var currentImage = optionHash.currSlide + 1;
              switch (currentImage) {
            case 1: {            
                var text = 'Foto ' + currentImage + ' van ' + ($('#imgContainer img').length - 1) + ' broccoli';
                $('#imgCounter').html(text);
              break;
            }
            case 2: {            
                var text = 'Foto ' + currentImage + ' van ' + ($('#imgContainer img').length - 1) + ' prei';
                $('#imgCounter').html(text);
              break;
            }
            case 3: {            
                var text = 'Foto ' + currentImage + ' van ' + ($('#imgContainer img').length - 1) + ' rodekool';
                $('#imgCounter').html(text);
              break;
            }
            case 4: {            
                var text = 'Foto ' + currentImage + ' van ' + ($('#imgContainer img').length - 1) + ' witlof';
                $('#imgCounter').html(text);
              break;
            }
            }
            });

        });