// Here I use a bootstrap 5 icon (bi-info-circle) <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" /> // but the built-in fontawesome icons (e.g. fa-info or fa-info-circle) are usable as well. // In this case you may omit this first css file. <script type="text/javascript" data-author="Tony Partner"> // The original script to add a suffix in an array(text) by Tony Partner // adapted to add an image and a button to open a new browser window by Joachim Klöfers // Definition of images, caption, and shown web page, only different urls in the first three images. // Please enter the correct path to the images    var images = [         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_01.png", 'Romeo&Julia 01', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_02.png", 'Romeo&Julia 02', 'https://www.limesurvey.org/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_03.png", 'Romeo&Julia 03', 'https://www.w3schools.com/js/default.asp'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_04.png", 'Romeo&Julia 04', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_05.png", 'Romeo&Julia 05', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_06.png", 'Romeo&Julia 06', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_07.png", 'Romeo&Julia 07', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_08.png", 'Romeo&Julia 08', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_09.png", 'Romeo&Julia 09', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_10.png", 'Romeo&Julia 10', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_11.png", 'Romeo&Julia 11', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_12.png", 'Romeo&Julia 12', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_13.png", 'Romeo&Julia 13', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_14.png", 'Romeo&Julia 14', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_15.png", 'Romeo&Julia 15', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_16.png", 'Romeo&Julia 16', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_17.png", 'Romeo&Julia 17', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_18.png", 'Romeo&Julia 18', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_19.png", 'Romeo&Julia 19', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_20.png", 'Romeo&Julia 20', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_21.png", 'Romeo&Julia 21', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_22.png", 'Romeo&Julia 22', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_23.png", 'Romeo&Julia 23', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_24.png", 'Romeo&Julia 24', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_25.png", 'Romeo&Julia 25', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_26.png", 'Romeo&Julia 26', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_27.png", 'Romeo&Julia 27', 'https://getbootstrap.com/'],         ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_28.png", 'Romeo&Julia 28', 'https://getbootstrap.com/'],         ["", '', ''],         ["", '', ''],    ]; // If we display five rows with 6 images (30) there are two not used cells. // If we display four rows with 7 images everything is fine // A function to load the desired webpage and open the new browser window    function newWindow(x) {        myWindow = window.open(images[x][2], "_blank", "menubar=no,titlebar=no, toolbar=no, scrollbars=yes, resizable=yes, top=100, left=500, width=800, height=600");    };    $(document).on('ready pjax:scriptcomplete',function(){ // The images, captions, etc. are displayed in a loop        for (let i=0;i<images.length;i++) { // If there is an image, display it            if(images[i][0]!='') {                $('#question{QID} :text.form-control:eq('+i+')').before('<span class="inserted-suffix"><img class="img-fluid" src="'+images[i][0]+'" /><br />' +images[i][1]+'<button class="btn btn-link pull-right" type="button" onClick="newWindow(' +i+' )"><i class="bi bi-info-circle" style="font-size: 1.5rem; color: cornflowerblue;"></i></button><br/></span>');            } else { // else hide the form-control (the text field) in unused cells of the array                $('#question{QID} :text.form-control:eq('+i+')').hide();            }        }    }); </script>

<style type="text/css"> .form-control {   background-color: #fff;   border: 1px solid #ccc;   box-shadow: inset 0 1px 1px rgba(0,0,0,.075);   color: #636363;   font-size:18px;   font-weight: bold;   text-align: center;   padding: 0;   display: inline-block;   width: 50%; } </style>

<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ alert("Hello, javascript calling"); }); </script>

  $('#question{QID} :text.form-control:eq('+i+')').before('<span class="inserted-suffix"><img onClick="newWindow(' +i+' )" class="img-fluid" src="'+images[i][0]+'" /><br />' +images[i][1]+'<br/></span>');