Currently I have code that displays PNG images and comments from a database linked to each Image. I realized that I will also need to do this for PDF files.
How would I edit the current code to display PDF documents instead of PNG Images?
Any help would be much appreciated.
Thanks,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<cfquery datasource="AccessTest" name="qTest">
SELECT P.Account, P.Image, P.Image_ID, C.Remarks, C.Users, C.Accounts, C.Date_Time
FROM PictureDB AS P
INNER JOIN CommentsDB AS C
ON C.Image_ID = P.Image_ID
ORDER BY P.Image_ID
</cfquery>
<script src="http://code.jquery.com/jquery-2.0.3.js">
</script>
<script>
$(document).ready(function(){
var images = {
<cfoutput query="qTest" group="Image_ID">
"#qTest.Image_ID#": {
"image": "#qTest.Image#",
"remarks": [
<cfoutput>
"#qTest.Users#, #qTest.Date_Time# <br> #qTest.Remarks# <br> </br>",
</cfoutput>
]
},
</cfoutput>
};
$("button").click(function(event){
event.preventDefault();
var id = $(this).data("id");
var src = images[id].image;
var desc = images[id].remarks.toString();
$("#theImage").attr("src", src).removeClass("hide");
$("#theDescription").html(desc).removeClass("hide");
});
});
</script>
</head>
<body>
<cfoutput query="qTest" group="Account">
<button data-id="#qTest.Image_ID#">
<table width="230">#qTest.Account# </table>
</button>
</cfoutput>
<img id="theImage" class="hide">
<div id="theDescription" class="hide">
</div>
</body>
</html>
Given that there is no straightforward way to display pdfs inline in a similar manner to images, you could consider the following:
cfpdf action = "thumbnail"
to convert the pdf to a series of images . Using a carousel to contain and display the pages of the 'pdf' would give you a result similar to when you display a single image for review and would probably let you retain a similar look and feel to your page.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.