Я пытаюсь создать Опасность! приложение, использующее Shiny. Я использую код здесь в качестве отправной точки для построения интерактивной сетки вопросов. https://community.rstudio.com/t/create-a-grid-of-clickable-images-each-with-a-different-link-and-its-own-caption/36794/2
library(shiny)
ui <- fluidPage(
#It's better to have the CSS in a separate file is it's long
tags$head(
tags$style(HTML("
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
"))
),
titlePanel("Adaptive image grid with captions and links"),
uiOutput("myGrid") #this will hold the grid
)
server <- function(input, output, session) {
#Create a fake dataset (replace with your own)
imgData = data.frame(path = paste0("https://picsum.photos/id/", sample(1:200, 14), "/200/"),
caption = c(paste("This is the caption for image", 1:14)),
link = rep("https://community.rstudio.com", 14))
#Calculate the number of images per column (4 in total)
nImages = nrow(imgData)
perCol = rep(floor(nImages/4), 4)
if(nImages %% 4 > 0){
perCol[1:(nImages %% 4)] = perCol[1:(nImages %% 4)] + 1
}
perCol = cumsum(c(1, perCol))
#Create the HTML for the image grid
imageGrid = paste(
"<div class='row'>",
paste(purrr::map(1:4, function(i){
paste("<div class='column'>",
paste0("<a href='", imgData[perCol[i]:(perCol[i+1]-1), "link"], "' target='_blank'><img src='",
imgData[perCol[i]:(perCol[i+1]-1), "path"],"' style='width:100%'></a><p>",
imgData[perCol[i]:(perCol[i+1]-1), "caption"],"</p>", collapse = ""),
"</div>", collapse = "")
}), collapse = ""),
"</div>")
#Paste the image grid HTML into Shiny
output$myGrid = renderUI({
HTML(imageGrid)
})
}
shinyApp(ui, server)
Мой вопрос, вместо прямого перехода по ссылке после нажатия на изображение, как я могу ссылаться на часть кадра данных, чтобы отобразить подсказку (например, всплывающее окно) ? Я предполагаю, что я должен сделать изображения реактивными, как-то. (Вы можете использовать mtcars как фиктивный фрейм данных или любой текст.) Спасибо!