I am trying to dynamically build a list and embed it into an html script. The problem with the below script is that the htmlimg value that I am passing is not reading the html code tags and just making the code visible on the site.
Code.gs
function doGet() {
var htmlimg = '<img src="http://www.fhuhs.org/files/slide1.png">';
htmlimg += '<img src="http://www.fhuhs.org/files/slide2.png">';
htmlimg += '<img src="http://www.fhuhs.org/files/slide3.png">';
htmlimg += '<img src="http://www.fhuhs.org/files/slide4.png">';
var output = HtmlService.createTemplateFromFile('slideShow');
output.htmlimg = htmlimg;
return output.evaluate();
}
slideShow.html
<style>
#slideshow, #initial {
position: relative;
width: 800px;
height: 240px;
}
#slideshow > img {
position: absolute;
}
</style>
<div id="initial"> <img src="https://16077c1df3a89c327142d4d58315918890da5bae.googledrive.com/host/0B4GLYStYeHYkRGRTdHl5TVVjOHM/slide1.png"></div>
<div id="slideshow" style="display:none">
<?= htmlimg; ?>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>
<script>
//http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/
$("#slideshow > img:gt(0)").hide();
setInterval(function() {
$('#slideshow > img:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
$('#initial').hide();
$('#slideshow').show();
</script>