In the following files I have an SVG image of squares and the pile of 4 squares on the left can be highlighted. If you click on the top square, the squares from 1 to 4 will be filled green. If you clicked on the square number 3, the squares from 1 to 3 will be filled green. If you clicked the square number 2, the squares 1 and 2 will filled green and if you clicked the square number 1 it will be filled green. I want to that after the user highlights what he/she needs from the left pile of squares and opens the notes form and writes some notes then click generate PDF and enters his/her email in the form that opens and then clicks generate, a PDF is generated which has an image exactly the same as on the webpage with the highlighting that the user did and the notes that the user entered and this PDF would be sent to the user through his/her email.
My PHP code:
<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css" />
<!-- Third party plugin CSS-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="style.css" rel="stylesheet" />
</head>
<body id="page-top">
<section class="text-center">
<svg id="mainImage" width="564" height="409" onclick="handleSVGClick(event)">
<image
href="https://media.geeksforgeeks.org/wp-content/uploads/unique-rectangles-formed-using-n-unit-squares.png"
width="564"
height="409"
/>
<polygon id="B1_1" title="1" points="21,385 24,309 100,309 101,385" />
<polygon id="B1_2" title="2" points="102,305 23,304 23,228 101,227" />
<polygon id="B1_3" title="3" points="103,225 26,228 25,149 99,151" />
<polygon id="B1_4" title="4" points="103,147 102,65 25,70 23,147" />
</svg>
<button type="button" class="btn " style="background-color: rgb(64,120,43);" onclick="openNotes()">Open Notes</button>
<!-- <form method="POST" >
<input type="submit" class="button btn-primary" value ="generate" name="send"/>
</form>-->
<button type="button" class="btn " style="background-color: rgb(64,120,43);" onclick="openEmailForm()">Generate PDF</button>
<div class="form-popup" id="noteForm" style="top: 300px; left:1rem">
<div class="form-container text-justify" >
<header>
<h1 style="color:green"><strong>Notes</strong></h1>
</header>
<textarea class="action" id = "ActionBody" maxlength="2000" placeholder="Write your notes here" style="resize: none;" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
<br>
<button type="button" class="btn " style="background-color: rgb(64,120,43);" onclick="closeNotes()"> Close Notes</button>
</div>
</div>
<div class="form-popup" id="emailForm" style="top: 300px; left:8rem">
<div class="form-container text-justify" >
<header>
<h1 style="color:green"><strong>Email</strong></h1>
</header>
<label>please enter your email:</label>
<input type="text"></input>
<br>
<button type="button" class="btn " style="background-color: rgb(64,120,43);" > generate</button>
</div>
</div>
</section>
<!-- Bootstrap core JS-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Third party plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<!-- Core theme JS-->
<script src="script.js"></script>
<script type="text/javascript" src="mapper.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://smtpjs.com/v3/smtp.js"> </script>
</body>
</html>
This is my JavaScript code:
function highlight(Num)
{
console.log("entered notes",Num);
notesTaken = Num;
console.log("notes",notesTaken);
for(var i =0; i<4;i++)
{
if(i<Num)
{
document.querySelectorAll("[id^='B1']")[i].style.fill="green";
document.querySelectorAll("[id^='B1']")[i].style.stroke="green";
}
else{
document.querySelectorAll("[id^='B1']")[i].style.fill="transparent";
document.querySelectorAll("[id^='B1']")[i].style.stroke="#E2E4E5";
}
}
//e.preventDefault();
}
function handleSVGClick(event) {
/*if (event.target.tagName === "polygon") {
console.log("entered");
event.target.style.fill = `hsl(${Math.random() * 360}, 90%, 60%)`;
console.log(filling);
//session['filling'] = filling;
// $.session.set("filling", filling);
//$.post("trial.php", {filling:filling});
document.cookie = "filling="+filling;
}*/
console.log("entered");
var idPolygon = event.target.id;
console.log(idPolygon);
var type = idPolygon.substring(0,2);
var Num = parseInt(idPolygon.slice(3),10);
console.log(Num);
if(type == "B1")
{
highlight(Num);
}
}
var filling = 8;
function openNotes() {
document.getElementById("noteForm").style.display = "block";
}
function closeNotes() {
document.getElementById("noteForm").style.display = "none";
}
function openEmailForm() {
document.getElementById("emailForm").style.display = "block";
document.getElementById("noteForm").style.display = "none";
}
function closeEmailForm() {
document.getElementById("emailForm").style.display = "none";
}
This is my CSS code:
polygon {
stroke-width: 2px;
stroke: #333;
fill: transparent;
}
.text-center {
text-align: center !important;
}
.hoverApply:hover{
fill:lightgray;
}
polygon {
stroke-width: 1px;
/*stroke: #333;*/
fill: transparent;
/*stroke-dasharray: 5;*/
stroke: #E2E4E5;
}
.form-popup {
display: none;
position: absolute;
border: 3px solid #54504A;
z-index: 9;
background-color: white;
max-width: 70%;
}
I tried a lot of things (like Dompdf and HTML2Canvas) and have been searching on how to do it for weeks and didn't reach a solution. I also checked those links but weren't helpful:
PHP Library to Convert HTML containg SVGs to PDF
Dompdf not generating PDF properly from SVG
Export SVG elements to PDF?
Convert SVG to PDF
How can we generate PDF/A or PDF from HTML (contains SVGs) using iText7?
Generate PDF from HTML and SVG
I'm trying to print a webpage containing JavaScript charts but the converted document contains everything Except those charts
Generating a PDF from a Tomcat-served webpage
wkhtmltopdf to HTML
Related
I created a To-do List, but I can't add a close tag to a list element in js. When I add the marked 5 lines of code in js my code doesn't work and I can't add a new list. Can you help me? Why it doesn't work, I didn't understand. I'm missing something..
I created a To-do List, but I can't add a close tag to a list element in js. When I add the marked 5 lines of code in js my code doesn't work and I can't add a new list. Can you help me? Why it doesn't work, I didn't understand. I'm missing something..
let form = document.querySelector('#form');
let reset = document.querySelector('#reset');
let myList = document.querySelector('#myList');
let text = document.querySelector('#text');
let submit = document.querySelector('#submit');
submit.addEventListener('click', function(e) {
e.preventDefault();
let liDOM = document.createElement('li')
liDOM.className = 'list-group-item'
liDOM.innerHTML = `${text.value[0].toUpperCase()}${text.value.slice(1)}`;
myList.appendChild(liDOM);
// If I add this 5 code lines, it doesn't work. WHY?
var span = document.createElement('span');
var text = document.createElement('\u00D7');
span.className = 'close';
span.appendChild(text);
liDOM.appendChild(span);
});
myList.addEventListener('click', function(item) {
if (item.target.tagName = 'li') {
item.target.classList.toggle('checked');
}
})
let counter = 0;
function myFunction() {
while (counter < myList.childElementCount) {
myList.removeChild(myList.firstChild);
}
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<form id="form">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-8 mt-5">
<div class="card">
<div class="card-body">
<div class="input-group">
<input class="form-control" type="text" id="text" placeholder="What will you do today?">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="submit" id="submit">Ekle</button>
<button onclick="myFunction()" type="submit" id="reset" class="btn btn-outline-secondary">Sıfırla</button>
</div>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header">My List</div>
<ul id="myList" class="list-group list-group-flush">
</ul>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
First of all good job, this was in nearly working condition and looks great.
There seemed to be a few minor problems with the implementation.
First, it is unusual/counterintuitive to have 2 different buttons each with type submit.
I would assume only first one should have type='submit'. The second one for presumably clearing the input should be type='button'. I also think they should have different styles to help warn the user that they have very different functionality.
Also, since the button has a submit functionality you don't need to also add an onclick functionality. It is very good to have an on submit functionality on the form and the single button with type='submit' as this allows the enter key to add a ToDo item.
Finally, the main focus of your problem was just that the text variable was already defined and you can't create an Element with the type × that is not an HTML type. See all the HTML elements on Mozilla Development search your favorite Search Engine for MDN Mozilla and within that search HTML for a list of current Legal HTML elements. It is very unlikely that an element will not be a word or abbreviation of some kind so that immediately tipped me off that: × was not an element tag that you can create they're more like (div, span, script, p, b, i). I think you meant for that to be the content of another span element that you wanted to create. Once you solved those 2 issues your code works!
I would just recommend that you append the × directly into the text because that's unfortunately the only element that doesn't fit. If not maybe you're going for a flex-box justify-content: space-between type thing where the × should always be on the right and the TODO on the left.
In that case you want the resulting HTML to be like:
<div style='display: flex; justify-content: space-between; align-items: center'>
<div>To Do text... I need to do stuff</div>
<button onclick='toggleComplete(12)'>×</button>
</div>
Keep in mind that for accessibility all clickable elements should really be buttons. If you need yo can cut back on the styling of this button and create a non-button-button class that resets all button specific styles to help you make it still look exactly how you want but work with screen readers.
let form = document.querySelector('#form');
let reset = document.querySelector('#reset');
let myList = document.querySelector('#myList');
let text = document.querySelector('#text');
let submit = document.querySelector('#submit');
submit.addEventListener('click', function(e) {
e.preventDefault();
let liDOM = document.createElement('li')
liDOM.className = 'list-group-item'
liDOM.innerText = `${text.value[0].toUpperCase()}${text.value.slice(1)}`;
myList.appendChild(liDOM);
// This was not working before because `text`
// was already defined above as `#text`
var newSpan = document.createElement('span');
// NOTE: for accessibility this must be a button.
const closer = document.createElement('span');
// this is probably what you meant to do... but
// note this needs some CSS love and the x itself doesn't work if you click
// on it so maybe just add it to the inner text instead:
// liDOM.innerText = `${text.value[0].toUpperCase()}${text.value.slice(1)} ×`;
closer.innerText = '×'
// perhaps add a special class here that gives it a red color
// perhaps only add the event listener to this button
newSpan.className = 'close';
newSpan.appendChild(closer);
liDOM.appendChild(newSpan);
});
myList.addEventListener('click', function(item) {
if (item.target.tagName = 'li') {
item.target.classList.toggle('checked');
}
})
let counter = 0;
function myFunction() {
while (counter < myList.childElementCount) {
myList.removeChild(myList.firstChild);
}
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<form id="form">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-8 mt-5">
<div class="card">
<div class="card-body">
<div class="input-group">
<input class="form-control" type="text" id="text" placeholder="What will you do today?">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="submit" id="submit">Ekle</button>
<button onclick="myFunction()" type="submit" id="reset" class="btn btn-outline-secondary">Sıfırla</button>
</div>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header">My List</div>
<ul id="myList" class="list-group list-group-flush">
</ul>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
I want to show an image and a title when I click the button. I created a form to do it. It's only working to show "Title". Image is not showing. Here is the my code, please help me.
function showImage()
{
document.getElementById('showTitle').innerHTML=document.getElementById('imgTitle').value;
document.getElementById('showImage').innerHTML=document.getElementById('imagP').value;
}
<!-- Input Area-->
<input type="text" id="imgTitle"/>
<input type="file" id="imagP"/>
<button onclick="showImage()" >Show Image</button>
<!-- Show Image & Title-->
<p id="showTitle"></p>
<img src="" id="showImage">
<!-- JavaScript Code-->
You need to use FileReader to read the uploaded file.
function showImage() {
document.getElementById('showTitle').innerHTML=document.getElementById('imgTitle').value;
var preview = document.querySelector('#showImage');
var file = document.querySelector('#imagP').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
<input type="text" id="imgTitle"/>
<input type="file" id="imagP"/>
<button onclick="showImage()" >Show Image</button>
<!-- Show Image & Title-->
<p id="showTitle"></p>
<img src="" id="showImage">
here is we use fileChange function on each time you change file.
and add style of display none to img tag where we want to show image, so we can show/hide image on Show Image button click.
let file = null;
function showImage() {
document.getElementById('showTitle').innerHTML = document.getElementById('imgTitle').value;
const showImage = document?.getElementById('showImage');
showImage.style?.display = 'block';
showImage.src = window?.URL?.createObjectURL(file);
}
const fileChange = (fileObj) => {
document.getElementById('showTitle').innerHTML = '';
const showImage = document.getElementById('showImage');
showImage.style.display = 'none';
file = fileObj.target.files[0]
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#editable {
width: 400px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<input type="text" id="imgTitle" />
<input type="file" id="imagP" onchange="fileChange(event)" />
<button onclick="showImage()">Show Image</button>
<!-- Show Image & Title-->
<p id="showTitle"></p>
<img src="" id="showImage" style="display:none">
</body>
</html>
Simplest way to achieve it as below
function showImage()
{
document.getElementById('showTitle').innerHTML=document.getElementById('imgTitle').value;
if(document.getElementById('imagP').files[0] != null) {
document.getElementById('showImage').src=URL.createObjectURL(document.getElementById('imagP').files[0]);
} else {
alert("please select the image")
}
}
<input type="text" id="imgTitle"/>
<input type="file" id="imagP"/>
<button onclick="showImage()" >Show Image</button>
<!-- Show Image & Title-->
<p id="showTitle"></p>
<img src="" id="showImage">
I have similar code like this. Except for the fact that my JS file is external. The function myFunction() is called in the beginning of that file, like this:
document.addEventListener('DOMContentLoaded', function () {
myFunction()
})
But, it's not working - it's not showing the text from the second paragraph, when clicked on the word HERE from the first paragraph. I assume that maybe I should call the function somehow else. Any given ideas would be really helpful. Thanks.
P.S. Also, when clicked, the window should scroll to the newly opened paragraph.
function myFunction() {
var x = document.getElementById("myCollapsible2")
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
p{
background: #eee;
border: 1px solid #ccc;
margin: 20px 0;
padding: 30px;
}
.bs-example{
margin: 20px;
}
.link-color {
color: red;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">.</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bs-example">
<input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#myCollapsible" value="Toggle Button">
<div id="myCollapsible" class="collapse"><p>This is a simple example of expanding and collapsing individual element via data attribute. <br>Click on the <b>Toggle Button</b> button to see the effect. If you click <a onclick="myFunction()" class="link-color" href="#">here</a>, you should see the other paragraph. </p></div>
<div id="myCollapsible2" class="collapse"><p>This is a simple example</p></div>
</div>
</body>
</html>
Since you are using bootstrap with popper, your function is unnecessary, just set the values according to the documentation. To scroll to the element, use the scrollIntoView method. I had to wrap it around a setTimeout, because the default method was executing afterwards, so when I called scroll the element wasn't visible yet.
function scrollTo2() {
var el = document.getElementById('myCollapsible2');
window.setTimeout(() => el.scrollIntoView(), 0);
}
p {
background: #eee;
border: 1px solid #ccc;
margin: 20px 0;
padding: 30px;
}
.bs-example {
margin: 20px;
}
.link-color {
color: red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="bs-example">
<input type="button" class="btn btn-primary" data-toggle="collapse"
data-target="#myCollapsible" value="Toggle Button">
<div id="myCollapsible" class="collapse show">
<p>This is a simple example of expanding and collapsing individual element
via data attribute.<br>Click on the <b>Toggle Button</b>
button to see the effect.
If you click <a onclick="scrollTo2()" data-toggle="collapse"
data-target="#myCollapsible2" class="link-color" href="#">here</a>,
you should see the other paragraph. </p>
<div id="myCollapsible2" class="collapse">
<p>This is a simple example</p>
</div>
</div>
</div>
I have a code that allows my website users to upload to a central Google Drive account. So far it works great, I am simply trying to add in a progress bar.
Here, is the form HTML I have, I have been able to add a progress bar, it just does not move from 0%.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS File Upload</title>
<style>
.container {
width: 500px;
margin: 0 auto;
}
.progress_outer {
border: 1px solid #000;
}
.progress {
width: 20%;
background: #DEDEDE;
height: 20px;
}
</style>
<form id="myForm">
<input type="text" name="myName" placeholder="Your name..">
<input type="file" name="myFile">
<input type="submit" value="Upload File"
onclick="this.value='Uploading..';
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles(this.parentNode);
return false;">
</form>
<div id="output"></div>
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<style>
input { display:block; margin: 20px; }
</style>
Besides that, I did some more research and have found a template example, I am just not sure how to implement it correctly into my existing code. Here is what I found from Caja Playground.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 37
});
});
</script>
</head>
<body>
<div class="demo">
<div id="progressbar"></div>
</div><!-- End demo -->
<div class="demo-description">
<p>Default determinate progress bar.</p>
</div><!-- End demo-description -->
</body>
</html>
Hm, You only put the html file , where is the gs file ? also Its not possible unless you use chunk to upload ^^
You can use external libraries like MediaUploader js file. See the following tutorial. It includes every functions such as Create folder, upload file, view images, view content image text, show share files only etc.
Demo of using Google Drive API
I am new to html, I am simply trying to add a caption on top or below each image in the code below; inputs welcome. It seems that an additional option is needed on the line where pictures are included; i have tried alt="my image description", it adds and info link "i" on the page, but I would need to place it above or below the image.
<head>
<title> identity </title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<link href = "../includes/important.css" rel= "stylesheet" type ="text/css" />
<link href="../includes/slide-out-menu-new.css" rel="Stylesheet" type="text/css"/>
<script src="../includes/js/slide-out-menu-new.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.8.min.js"></script>
<script src="../assignments/galleria/themes/classic/galleria.classic.css"></script>
<style>
#galleria{ width: 700px; height: 400px; background: #000 }
</style>
</head>
<body>
<div class= "name">
<center> <img src= "../images/main_menu_me.jpg"><center>
</div>
<STYLE TYPE="text/css">
#menu1 { display : none }
#menu2 { display : none }
#menu3 { display : none }
A:link {color:white; text-decoration:none}
A:hover {color:yellow; text-decoration:none}
</STYLE>
<div class="body3">
<div id="galleria">
<img src="../images/lafete1.jpg" image title="My image title" alt="My image description">
<img src="../images/lafete2.jpg">
<img src="../images/lafete3.jpg">
</div>
</div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria');
</script>
<div class= "navigation2">
</br>
<p align="right"> about</p>
<p align="right"> contact</p>
</body>
</head>
From galleria's doc's:
Captions & meta data
If you want to extract meta data from the HTML source such as title & description, you can provide this as attributes:
<img src="image.jpg"
data-title="My title"
data-description="My <strong>description</strong>"
data-link="http://my.destination.com"
>
Side-note: In HTML5 one can now (by specification) add custom attributes to elements (in the HTML markup) but they must be prefixed with data-. That is what later versions of galleria now use.
Hope this helps!