R Shiny：slickR 選擇事件

Question

slickR 包有一個focusOnSelect選項 - 當單擊輪播中的圖像時，它會突出顯示。 如何訪問選擇事件以在 R Shiny 中使用以觸發其他操作？ 具體來說，我想點擊一個圖像並讓它更新一個帶有圖像名稱的文本框。

要使用下面的示例，請將 3 張圖像（image1.jpg、image2.jpg、image3.jpg）放在與應用程序相同的目錄中。

library(shiny)

ui <- shiny::basicPage(

  slickROutput("my_slick",width='100%',height='200px')

)

server <- function(input, output) {

  output$my_slick <- renderSlickR({
      my_images <- c("image1.jpg", "image2.jpg", "image3.jpg")
      slickR(
        my_images,
        slideId = 'slick_images',
        width='90%'
      )
  })

}

shinyApp(ui, server)

Answer 1

這是你想要的嗎？

library(shiny)
library(slickR)

my_images <- c("image1.png", "image2.png", "image3.png")

ui <- shiny::basicPage(

  slickROutput("my_slick",width='100%',height='200px'), 

  tags$p(id="textbox"),

  tags$script('var my_images = ["image1.png","image2.png","image3.png"];
              $("#my_slick").on("click", function(e){ 
                var slideClicked = $(this).find(".slick-active").attr("data-slick-index"); 
                document.getElementById("textbox").innerHTML = "Selected image: " + my_images[slideClicked];
              });')
)

server <- function(input, output) {

  output$my_slick <- renderSlickR({
    slickR(
      my_images,
      slideId = 'slick_images',
      width='90%'
    )
  })    
}

shinyApp(ui, server)

如果要在 Shiny 中獲取所選圖像的名稱，請在腳本中添加一行：

  tags$script('var my_images = ["image1.png","image2.png","image3.png"];
              $("#my_slick").on("click", function(e){ 
                var slideClicked = $(this).find(".slick-active").attr("data-slick-index"); 
                Shiny.setInputValue("selectedImage", my_images[slideClicked]); 
                document.getElementById("textbox").innerHTML = "Selected image: " + my_images[slideClicked];
              });')

然后所選圖像的名稱在input$selectedImage 。

編輯

這是 OP 在評論中要求的改進腳本：

  tags$script('var my_images = ["image1.png","image2.png","image3.png"];
              var binary = true;
              $("#my_slick").on("click", function(e){ 
                if(e.target.localName == "img"){
                  if(binary){
                    var slideClicked = $(this).find(".slick-active").attr("data-slick-index"); 
                    Shiny.setInputValue("selectedImage", my_images[slideClicked]); 
                    document.getElementById("textbox").innerHTML = "Selected image: " + my_images[slideClicked];
                  }else{
                    document.getElementById("textbox").innerHTML = "";
                  }
                  binary = false;
                }else{
                  document.getElementById("textbox").innerHTML = "";
                  binary = true;
                }
              });')