将网页转换为幻灯片使用带有 HTML 标签的 flickR [英] web pages into slideshow use flickR with HTML tags
本文介绍了将网页转换为幻灯片使用带有 HTML 标签的 flickR的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我必须在 URL 中以幻灯片形式显示三条推文.
这是我没有幻灯片的代码
ui <-fluidPage(侧边栏布局(侧边栏面板(####),主面板(htmlOutput("top_tweets_1"),htmlOutput("top_tweets_2"),htmlOutput("top_tweets_3"))))服务器 <- 功能(输入，输出){tws <- c("https://twitter.com/Twitter/status/1144673160777912322","https://twitter.com/Twitter/status/1144673160777912322","https://twitter.com/Twitter/status/1144673160777912322")输出$top_tweets_1 <- renderUI({标签列表(标签$头(tags$script("!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');")),HTML(paste('<blockquote class="twitter-tweet" data-lang="en"样式=宽度:500；高度:500;">',paste("<a href=\"",tws[1],"\">","tweet1","</a>"),'</blockquote>')))})输出$top_tweets_2 <- renderUI({标签列表(标签$头(tags$script("!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');")),HTML(paste('<blockquote class="twitter-tweet" data-lang="en"样式=宽度:500；高度:500;">',paste("<a href=\"",tws[2],"\">","tweet2","</a>"),'</blockquote>')))})输出$top_tweets_3 <- renderUI({标签列表(标签$头(tags$script("!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');")),HTML(paste('<blockquote class="twitter-tweet" data-lang="en"样式=宽度:500；高度:500;">',paste("<a href=\"",tws[3],"\">","tweet3","</a>"),'</blockquote>')))})}运行应用程序
shinyApp(ui = ui, server = server)
并且我使用 slickR 包看到了这段代码，它符合我的需要，但我想显示 URL 内容，而不是图片.这是我用一个 URL 尝试过的，看看它是否有效
库(slickR)ui <-流体页面(侧边栏布局(侧边栏面板(####),主面板(slickROutput("slickr", width="500px"),)))服务器 <- 功能(输入，输出){tws <- c("https://twitter.com/Twitter/status/1144673160777912322","https://twitter.com/Twitter/status/1144673160777912322","https://twitter.com/Twitter/status/1144673160777912322")输出$slickr <- renderSlickR({光滑R(标签列表(标签$头(tags$script("!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');")),HTML(paste('<blockquote class="twitter-tweet" data-lang="en"样式=宽度:500；高度:500;">',paste("<a href=\"",tws[1],"\">","tweet1","</a>"),'</blockquote>'))) ))}}运行应用程序`shinyApp(ui = ui, server = server)`所以我尝试使用它但我什么也没得到或这个错误
<块引用>错误:obj 必须是字符向量
有什么帮助吗?
解决方案
这里是一个使用
I have to show three tweets in the URLs as a slideshow.
here is my code without slideshow
ui <- fluidPage(
sidebarLayout(
sidebarPanel(
####
),
mainPanel(
htmlOutput("top_tweets_1"),
htmlOutput("top_tweets_2"),
htmlOutput("top_tweets_3")
)))
server <- function(input, output) {
tws <- c("https://twitter.com/Twitter/status/1144673160777912322","https://twitter.com/Twitter/status/1144673160777912322","https://twitter.com/Twitter/status/1144673160777912322")
output$top_tweets_1 <- renderUI({
tagList(
tags$head(
tags$script("!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');")
),
HTML(
paste('<blockquote class="twitter-tweet" data-lang="en"
style=" width:500;
height:500;">',
paste("<a href=\"",tws[1],"\">","tweet1","</a>"),
'</blockquote>')
))
})
output$top_tweets_2 <- renderUI({
tagList(
tags$head(
tags$script("!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');")
),
HTML(
paste('<blockquote class="twitter-tweet" data-lang="en"
style=" width:500;
height:500;">',
paste("<a href=\"",tws[2],"\">","tweet2","</a>"),
'</blockquote>')
))
})
output$top_tweets_3 <- renderUI({
tagList(
tags$head(
tags$script("!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');")
),
HTML(
paste('<blockquote class="twitter-tweet" data-lang="en"
style=" width:500;
height:500;">',
paste("<a href=\"",tws[3],"\">","tweet3","</a>"),
'</blockquote>')
))
})
}
Run the application
shinyApp(ui = ui, server = server)
and I saw this code using slickR package which is fit with my need but I want to show URL content, not pictures.
here is I tried it with one URL to see if it work
library(slickR)
ui <- fluidPage(
sidebarLayout(
sidebarPanel(
####
),
mainPanel(
slickROutput("slickr", width="500px"),
)))
server <- function(input, output) {
tws <- c("https://twitter.com/Twitter/status/1144673160777912322","https://twitter.com/Twitter/status/1144673160777912322","https://twitter.com/Twitter/status/1144673160777912322")
output$slickr <- renderSlickR({
slickR(
tagList(
tags$head(
tags$script("!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');")
),
HTML(
paste('<blockquote class="twitter-tweet" data-lang="en"
style=" width:500;
height:500;">',
paste("<a href=\"",tws[1],"\">","tweet1","</a>"),
'</blockquote>')
)) )
)}
}
Run the application
`shinyApp(ui = ui, server = server)`
so I tried to use it but I got nothing or this error
ERROR :obj must be a character vector
any help?
解决方案
Here is a solution using Twitframe to embed tweets in iframes. There's also some JS code to automatically set the height of the iframes, that I also found on Twitframe. The app uses the JS library slick.js. You have to download the zip file here and extract it the www subfolder of your app. I didn't manage to center the slideshow.
library(shiny)
tweets <- c(
"https://twitter.com/Twitter/status/1144673160777912322",
"https://twitter.com/Twitter/status/1144673160777912322",
"https://twitter.com/Twitter/status/1144673160777912322"
)
urls <- sapply(tweets, URLencode, reserved = TRUE)
srcs <- paste0("https://twitframe.com/show?url=", urls)
js <- '
$(window).on("message", function(e) {
var oe = e.originalEvent;
if (oe.origin != "https://twitframe.com")
return;
if (oe.data.height && oe.data.element.id.match(/^tweet_/)){
$("#" + oe.data.element.id).css("height", parseInt(oe.data.height) + "px");
if(oe.data.element.allLoaded === true){
setTimeout(function(){$("#tweets").slick({
arrows: true,
dots: true,
slidesToShow: 1,
})},0);
}
}
});'
ui <- fluidPage(
fluidRow(
tags$head(
tags$script(HTML(js)),
tags$link(rel="stylesheet", type="text/css",
href="slick-1.8.1/slick/slick-theme.css"),
tags$link(rel="stylesheet", type="text/css",
href="slick-1.8.1/slick/slick.css"),
tags$script(type="text/javascript",
src="slick-1.8.1/slick/slick.min.js"),
tags$style(HTML(
"
#slick .slick-prev {
position:absolute;
top:65px;
left:-50px;
}
#slick .slick-next {
position:absolute;
top:95px;
left:-50px;
}
.slick-prev:before, .slick-next:before {
color:red !important;
font-size: 30px;
}
.content {
margin: auto;
padding: 20px;
width: 60%;
}"))
),
uiOutput("slick")
)
)
server <- function(input, output, session) {
output[["slick"]] <- renderUI({
tagList(
tags$div(
class = "content",
tags$div(
id = "tweets",
lapply(seq_along(srcs), function(i){
tags$div(tags$iframe(
id = paste0("tweet_", i),
border=0, frameborder=0, height=50, width=550,
src = srcs[i]
))
})
)
),
singleton(tags$script(HTML(
sprintf("$(document).ready(function(){
var nloaded = 0;
var allLoaded;
$('iframe[id^=tweet_]').load(function() {
nloaded++;
if(nloaded === %d){
allLoaded = true;
}else{
allLoaded = false;
}
this.contentWindow.postMessage(
{ element: {id:this.id, allLoaded: allLoaded}, query: 'height' },
'https://twitframe.com');
});
});", length(tweets)))))
)
})
}
shinyApp(ui, server)
这篇关于将网页转换为幻灯片使用带有 HTML 标签的 flickR的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
