I have following html page
<html>
<body>
<img src="..."/>
<img src="..."/>
<img src="..."/>
</body>
</html>
I want to make the pdf of this page but every image should be on new page.
You could loop over the images using Javascript.
Then for each image store is as an data url with dom-to-image here
and print each dataUrl with pdfmake here
Use css property
page-break-before: always;
See example HTML below:
<html>
<head>
<style>
.page-heading { page-break-before: always; }
</style>
</head>
<body>
<img src="..."/>
<div class="page-heading">
<img src="..."/>
</div>
<div class="page-heading">
<img src="..."/>
</div>
</body>
</html>
Related
Link to jQuery plugin github and documentation
It is the exact same code, the only difference being that I link to several sources/external files instead of just throwing them all into one big file like on jsfiddle. But I get no error in the browser console, everything is linked properly.
It image lightbox works, the video light almost works, I just get a black blank empty light when clicking on the video link. When clicked this gets added to the HTML, but the HTML is empty inside the iframe. But on jsfiddle it is not.
<iframe class="lg-video-object lg-youtube " src="//www.youtube.com/embed/VXEkoXgb4bI?wmode=opaque&autoplay=1&enablejsapi=1" allowfullscreen="" height="315" frameborder="0" width="560">
#document
<html>
<head></head>
<body></body>
</html>
</iframe>
I've been over and over this, and I can't even come up with one reason why it happens, I've tested in Firefox, Chrome and even IE. And since it works on jsfiddle in Firefox, so it can't really be the browser.
Any help is really appreciated, I'm so in the woods. I'm hoping it is just something really simple that I can't see because I've stared at intensely for hours.
Thanks.
Link to jsfiddle: http://jsfiddle.net/vtkv4j2h/5/
Link to the local files: https://mega.nz/#F!4QhXhQaY!vaIMGXqYSzJf8s8qkVouqg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Why doesn't this work, when it works on jsfiddle</title>
<link rel="stylesheet" href="lightgallery.min.css" media="screen" title="lightgallery">
</head>
<body>
<div id="lightgallery">
<a href="https://dummyimage.com/1200x700/000/fff.jpg">
<img src="https://dummyimage.com/300x200/000/fff.jpg" />
</a>
<a href="https://dummyimage.com/1200x700/d40fd4/0011ff.jpg">
<img src="https://dummyimage.com/300x200/d40fd4/0011ff.jpg.jpg" />
</a>
<a href="https://dummyimage.com/1200x700/44d613/0011ff.jpg">
<img src="https://dummyimage.com/300x200/44d613/0011ff.jpg" />
</a>
<a href="https://dummyimage.com/1200x700/1ff068/0011ff.jpg">
<img src="https://dummyimage.com/300x200/1ff068/0011ff.jpg" />
</a>
<a href="https://dummyimage.com/1200x700/5e6063/0011ff.jpg">
<img src="https://dummyimage.com/300x200/5e6063/0011ff.jpg" />
</a>
<a href="https://www.youtube.com/watch?v=VXEkoXgb4bI" data-poster="https://dummyimage.com/1200x700/fc1241/313de6.jpg&text=click-to-play">
<img src="https://dummyimage.com/300x200/fc1241/313de6.jpg&text=Video1"/>
</a>
<a href="https://www.youtube.com/watch?v=VkzVgiYUEIM" data-poster="https://dummyimage.com/1200x700/73f00c/313de6.jpg&text=click-to-play">
<img src="https://dummyimage.com/300x200/73f00c/313de6.jpg&text=Video2"/>
</a>
<a href="https://www.youtube.com/watch?v=7BWWWQzTpNU" data-poster="https://dummyimage.com/1200x700/f7ff00/313de6.jpg&text=click-to-play">
<img src="https://dummyimage.com/300x200/f7ff00/313de6.jpg&text=Video3"/>
</a>
</div>
<script src="jquery.js" charset="utf-8"></script> <!-- jQuery v3.1.0 -->
<script src="lightgallery.min.js" charset="utf-8"></script>
<script src="lg-video.min.js" charset="utf-8"></script>
<script src="js.js" charset="utf-8"></script>
</body>
</html>
js.js
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
Thank you all for help and suggestions.
#Novice was right.
Are you sure using a web-server to access if your url shows something
like this file:/// rather than http:// then its a problem
Switching to a properly virtual box solved the issue.
How I can to use lightbox 2 options? How to include in document? It does not work as specified on the site http://lokeshdhakar.com/projects/lightbox2/#options
<script>
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
})
</script>
<a class="example-image-link" data-lightbox="example-set" href="pic.png">
<img style="width: 100%" src="pic.png">
</a>
How do you set the lightbox options?
Make sure you are including both the lightbox.js AND lightbox.css stylesheet.
You will also need jQuery 1.7 or greater (as stated in step 4 of the Getting Started section of the Lightbox website). You should include the jQuery script before the lightbox script.
This setup worked for me:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" />
<script src="jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js"></script>
</head>
<body>
<a class="example-image-link" data-lightbox="example-set" href="pic.png">
<img style="width: 100%" src="pic.png">
</a>
<script>
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
})
</script>
</body>
</html>
I want to create a slide show of images in which the image in background slides one by one but the text should float over it.
The final thing I want to achieve is this.
I have followed the post in msdn article, I downloaded the slideShow.js file and applied on the images and it's working perfectly. Now how do I float the text over the image?
My code is:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Slide Show</title>
<style type="text/css">
.size
{
height:300px;
width:500px;
}
.lab
{}
</style>
</head>
<body>
<div>
<label class="lab">This is Label</label>
<div id="slideShowImages">
<img src="1.jpg" alt="Slide 1" class="size" />
<img src="2.jpg" alt="Slide 2" class="size"/>
<img src="3.jpg" alt="Slide 3" class="size"/>
<img src="4.jpg" alt="Slide 4" class="size"/>
</div>
</div>
<script src="slideShow.js"></script>
</body>
</html>
The label would be the text displayed over image.
Please help.
Install WoW Slider and import all the images to be slided and also you can give text for each and every image so that while the image slides the corresponding text will also come along with it
http://wowslider.com/ - You can choose your favourite sliding template
So I'm trying to add a photogallery to my website. There was a .zip file that could be downloaded, with everything needed. I copied those files, replaced & checked so that the filepaths would be correct within the .html file and so on, but this is what happens: http://i49.tinypic.com/2m4ep0y.png
What I am trying to make: http://net.tutsplus.com/tutorials/javascript-ajax/create-a-spectacular-photo-gallery-with-mootools/
The CSS code can be found inside link above, my .css file looks exactly the same, just copy-pasted. The parts from the HTML file were also copied, so not sure where the problem is. Seems like it's not linking to either the javascript/css files? I've tripple-checked the paths and so on.
HTML Code, added inside BODY
<div id="container">
<h1>Photo Gallery</h1>
<div id="picture_section">
<div id="inside">
</div>
</div>
<div id="controls_vert">
<div id="up" class="deactivated">Scroll Up</div>
<div id="down">Scroll Down</div>
</div>
<div id="controls_horz">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
</div>
<div id="display_picture_container">
<div id="display_picture">Click on the image to go back to the gallery.</div>
<div id="display_picture_img"></div>
</div>
I also downloaded the source file and this is how the code from 'index.html' looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Photo Gallery</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="container">
<h1>Photo Gallery</h1>
<div id="picture_section">
<div id="inside">
</div>
</div>
<div id="controls_vert">
<div id="up" class="deactivated">Scroll Up</div>
<div id="down">Scroll Down</div>
</div>
<div id="controls_horz">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
</div>
<div id="display_picture_container">
<div id="display_picture">Click on the image to go back to the gallery.</div>
<div id="display_picture_img"></div>
</div>
</body>
</html>
From what i can see in your screenshot it clearely displays nothing. You can change the filepaths of your images and thumbs from main.js file by replacing thumbs/ and picture/ with your desired folder name. Try to preserve the numerotation name of the files, otherwise it won't show up. Additionaly, you can replace the motools script line with the one specified in the tutorial: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
I'm trying to get this vertical list to load the document titles I put inside the Load_content() during an Onclick event. The satisfactory outcome will be that everytime I click a new link... a new PDF loads into the iframe
<html>
<head>
<title> Literature of Andrew Willis
</title>
<link rel="stylesheet" href="mycss.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/cssverticalmenu.css" />
<script language="javascript" type="text/javascript">
function load_content (link) {
document.getElementById("iframe").setAttribute("src","link" );
}
</script>
</head>
<body>
<div id="logo">
<img src="mainlogo.jpg" height=100 width=400>
</div>
<div id="content">
<div id="leftcolumn">
<ul class="glossymenu">
<li>Short Essays</li>
<li><a href="#" onclick="load_content(hangmansdog.pdf)" >Poetry</a></li>
<li><a href="http://www.pourinpourout.com" >Blog</a></li>
</ul>
</div>
<div id="rightcolumn">
<div id="content">
<iframe id="iframe1" src="#"></iframe>
</div>
</div>
</div>
</body>
You have a few typos in your code. You gave your iframe an id of "iframe1" but referenced it in your JS using "iframe". You also shouldn't have quotes around link because you are using it as a variable, line 13 should look like this:
document.getElementById("iframe1").setAttribute("src",link );
You will however, probably want to put single quotes around the links themselves when you go to link them. i.e. onclick="load_content('Look at me now.pdf')"