Here is the code which isn't working. Basically I'm allowing the user to edit some text in the div and then display its screenshot. Can someone please tell why is it not working?
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css" />
<title>Poster</title>
</head>
<body>
<div id="main_image">
<img src="image.jpg" id= "image"/>
<div id="user_text">IT IS TOTALLY AWESOME</div>
</div>
<div id="edit_text_box">
<textarea id="user_input" placeholder="Your text here.." rows="2" cols="30" ></textarea>
<div id="change_size">
<span style="float: left;">FONT-SIZE : </span>
<button id="decrease_size">-</button>
<button id="increase_size">+</button>
</div>
<input id="submit" type="submit" value="SUBMIT" />
</div>
<script type="text/javascript">
window.onload = function() {
html2canvas( [ document.body ], {
onrendered: function( canvas ) {
document.body.appendChild( canvas );
}
});
};
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/edit_text.js"></script>
</body>
</html>
I changed your code a little bit and it works:
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css" />
<title>Poster</title>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
var Submit = function() {
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
};
</script>
</head>
<body>
<div id="main_image">
<img src="image.jpg" id= "image"/>
<div id="user_text">IT IS TOTALLY AWESOME</div>
</div>
<div id="edit_text_box">
<textarea id="user_input" placeholder="Your text here.." rows="2" cols="30" ></textarea>
<div id="change_size">
<span style="float: left;">FONT-SIZE : </span>
<button id="decrease_size">-</button>
<button id="increase_size">+</button>
</div>
<button onclick="Submit();" >Submit</button>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/edit_text.js"></script>
</body>
</html>
First, I added html2canvas JavaScript file (<script type="text/javascript" src="html2canvas.js"></script>). You can download it at https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js and put that file to the same folder as your HTML. Apparently, you are trying to create something like a form, but there's no form tag in your code. You can call html2canvas either when you submit a form (you have to add <form> then) or using onclick attribute of a button. I changed your submit input element to button and bind Submit method to its onclick attribute. When user clicks the button, screenshot appears below the form.
Just use this code
document.querySelector('button').addEventListener('click', function() {
html2canvas(document.querySelector('.specific'), {
onrendered: function(canvas) {
// document.body.appendChild(canvas);
return Canvas2Image.saveAsPNG(canvas);
}
});
});
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
h1 {
font-size: 36px;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
h1 small {
font-size: 65%;
font-weight: 400;
line-height: 1;
color: #777;
display: block;
padding-top: 15px;
}
.specific {
background-color: #fff;
}
p a {
padding: 5px;
}
<script src="https://superal.github.io/canvas2image/canvas2image.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div class="specific">
<h1>Click to Take a Screenshot & Download it! <small>using html2canvas.js + canvas2image.js</small></h1>
<p>This is a simple demo.</p>
<p>Use html2canvas.js to take a screenshot of a specific div and then use canvas2image.js to download the screenshot as an image locally to your filesystem.</p>
<button type="button" class="btn btn-default">Take a Screenshot!</button>
<p>References: html2canvas.jscanvas2image.js
</p>
</div>
Related
first post here so please be gentle ;-)
I have a query about popup modals, that not only have an image within the modal, but some text too. Attached my current status of the coding, however could not figure out an easy way to get the text caption for each image. The image popups are correct, however text returned is TEXT1 for whichever I click.
Any help would be appreciated. Many thanks
Sabs
function onClick(element) {
document.getElementById("modal01").style.display = "block";
document.getElementById("img01").src = element.src;
document.getElementsByClassName("modal-content").innerHTML = this.alt;
}
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
/*height: 100%;*/
}
body {
background: url('../img/dark.jpg');
background-size: cover;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.main {
margin: 0 auto;
height: 100%;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 5px;
margin-top: 100px;
margin-right: 2rem;
margin-left: 2rem;
}
.mainInner img{
width: 100%;
object-fit: cover;
/*display:inline-block;*/
}
/* ---------------- placement of images within our grid system -----*/
.mainInner:nth-child(1){ grid-column: span 1; grid-row: span 1; }
.mainInner:nth-child(2){ grid-column: span 1; grid-row: span 1; }
.mainInner:nth-child(3){ grid-column: span 1; grid-row: span 1; }
.mainInner:nth-child(1):hover, .mainInner:nth-child(2):hover, .mainInner:nth-child(3):hover{
transform: scale(1.05);
cursor: pointer;
transition: .5s;
opacity: 0.30;
}
/*----------------------- styling the modal ------------------------*/
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 60px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /*Full height*/
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
/*styling the caption text*/
color: #f1f1f1;
font-size: 20px;
font-weight: bold;
text-align: center;
}
/* Modal Content */
.modal-content {
margin: auto;
display: block;
/*position: absolute;*/
/*transform: translate(-50%, -50%);*/
width: 80%;
max-width: 700px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#media only screen and (max-width: 650px){
.main{
display: block;
}
.mainInner{
margin-bottom: 1rem;
}
.modal-content {
width: 100%;
}
}
/*----------------- end modal styling -----------------*/
<!DOCTYPE html>
<html>
<head>
<title>Popup Modal Demo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="main center">
<div class="mainInner"><img id="myImg1" src="img/brands/AyalaBar.png" onclick="onClick(this)"></div>
<div class="mainInner"><img id="myImg2" src="img/brands/BastianInverun.png" onclick="onClick(this)"></div>
<div class="mainInner"><img id="myImg3" src="img/brands/breuning.png" onclick="onClick(this)"></div>
</div>
<!-- 1st IMAGE MODAL -->
<div id="modal01" class="modal" onclick="this.style.display='none'">
<div class="modal-content">
<span class="close">×</span>
<p>TEXT1</p>
<img id="img01" style="max-width: 100%">
</div>
</div>
<!-- 2nd IMAGE MODAL -->
<div id="modal01" class="modal" onclick="this.style.display='none'">
<div class="modal-content">
<span class="close">×</span>
<p>TEXT2</p>
<img id="img01" style="max-width: 100%">
</div>
</div>
<!-- 3rd IMAGE MODAL -->
<div id="modal01" class="modal" onclick="this.style.display='none'">
<div class="modal-content">
<span class="close">×</span>
<p>TEXT3</p>
<img id="img01" style="max-width: 100%">
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="script2.js"></script>
</body>
</html>
I'm a little bit late on this post - welcome to SO, Sabs! Kudos for making a first post with a clear and concise problem, and including your relevant code.
At first glance, the reason you're always returning "Text 1" is because your JS file hardcodes modal01 as the ID for each modal. So while the function is called whenever you click any of the images, it will always show that ID.
You don't have to re-invent the JS and CSS for a modal popup, though - a much simpler way is to use Bootstrap. You can still edit CSS and JS to your heart's content by giving IDs and classes, but you don't need much to call it. You need to include source CSS/JS files (from CDN here for simplicity's sake):
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Calling the modal from your HTML uses a data-toggle and a data-target:
<div class="main center">
<div class="mainInner"><img id="myImg1" src="img/brands/AyalaBar.png" data-toggle="modal" data-target="#myModal1"></div>
<div class="mainInner"><img id="myImg2" src="img/brands/BastianInverun.png" data-toggle="modal" data-target="#myModal2"></div>
<div class="mainInner"><img id="myImg3" src="img/brands/breuning.png" data-toggle="modal" data-target="#myModal3"></div>
</div>
The modals:
<!-- Beginning Modal 1 -->
<div class="modal fade" id="myModal1">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 1</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>The first modal..</p>
<img src="img/brands/AyalaBar.png">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal 1 -->
<!-- Beginning Modal 2 -->
<div class="modal fade" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 2</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>A second modal..</p>
<img src="img/brands/BastianInverun.png">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal 2 -->
<!-- Beginning Modal 3 -->
<div class="modal fade" id="myModal3">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 3</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>The third modal..</p>
<img src="img/brands/breuning.png">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal 3 -->
There's a problem with fancybox modals on a scrollable page with fluid containers.
In example below when you open modal fancybox right side of a background stretched a bit, because new modal have no vertical scrollbar. After modal was closed background size was corrected again.
.container {
margin: 40px;
padding: 20px;
height: 200vh;
background-color: bisque;
transition: 3s all linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" rel="stylesheet"/>
<div class="container">
<div>
Some content
</div>
<a data-fancybox data-src="#hidden-content" href="javascript:;">
Open fancybox
</a>
</div>
<div style="display: none;" id="hidden-content">
<h2>Hello</h2>
<p>You are awesome.</p>
</div>
Simply, add body { margin: 0; }
body { margin: 0; }
.container {
margin: 40px;
padding: 20px;
height: 200vh;
background-color: bisque;
xtransition: 3s all linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" rel="stylesheet"/>
<div class="container">
<div>
Some content
</div>
<a data-fancybox data-src="#hidden-content" href="javascript:;">
Open fancybox
</a>
</div>
<div style="display: none;" id="hidden-content">
<h2>Hello</h2>
<p>You are awesome.</p>
</div>
The task is to insert a simple modal popover as an alert for clients to be notified of a temporary relocation. On page load, a transparent background appears but the image nor the close button appears.
DATA
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<script src="../js/bootstrap-modal.js"></script>
<script src="../js/popover.js"></script>
<script src="../js/jquery-1.12.4.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalContent {
width: 750px;
z-index: 10000;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: none;
background: -moz-linear-gradient;
background: -webkit-linear-gradient;
background: -o-linear-gradient;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
</style>
CODE
<div id="myModal" class="modal fade in">
<div class="modalDialog">
<div class="modalContent">
X
<img src="image.jpg" width="750px"/>
</div>
</div>
</div>
This seems like a fairly straightforward task but I cannot seem to resolve this issue by multiple attempts. Your help is greatly appreciated.
I have no idea about popover plugin, but i have created fiddle for this using bootstrap plugin, when the page gets opened modal will be appear with some content (You can replace it by your content).
Sample HTML:
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
And JS
$(document).ready(function(){
$("#myModal").modal('show');
});
JSFIDDLE
Note: I did not included popover.js.
this is a very basic one
i have a form in html
in which i want following functionality
1. when user click submit button then the mail goes and a thank you message appear in same place without refreshing the page
here is my html
in which there are two div which is show text and get text on body load i am showing get text div and on submit i have to show next div but this not happening i dont know eher i am doing wrong
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<STYLE></STYLE>
<script src="jquery.js"></script>
<TITLE></TITLE>
<META content="text/html; charset=UTF-8" http-equiv=content-type>
</head>
<body style="margin:0; padding:0;">
<div style=" width:311px; height:576px; background:url(img/bg.png) no-repeat; position:relative; ">
<div class="getText">
<form action="" method="POST">
<input type="text" name="name" value="" style="width:207px; height:26px; border:1px solid black; position:absolute; top:235px; left:47px; "/>
<input type="text" name="email" value="" style="width:207px; height:26px; border:1px solid black; position:absolute; top:286px; left:47px; "/>
<input type="text" name="" value="" style="width:207px; height:26px; border:1px solid black; position:absolute; top:337px; left:47px; "/>
<textarea cols="23" rows="4" style="border:1px solid black; position:absolute; top:387px; left:47px;"></textarea>
<input type="submit" name="submit" value="Submit" style="width:76px; height:27px; border:0; outline:none; color:#ffffff; background-color:#ff0000; font-weight:bold; cursor:pointer; font-size:14px; font-family:verdana; position:absolute; top:470px; left:49px;" id="sub">
</form>
</div>
<div class="showText" style="width:247px; height:282px; background-color:#ffac00; color;#292a2a; text-align:center; font-weight:bold; font-size:14px; font-family:verdana; position:absolute; top:216px; left:28px;"><br><br><br>
Thank You !<br>
You shall hear from us soon !!
</div>
</div>
<script>
$(document).ready(function(){
$(".showText").hide();
("#sub").on("click",function( ) {
$(".showText").show();
$(".getText").hide();
});
});
</script>
</body>
</html>
on click of submit page is getting refreshed and not showing thank you div i didnt want to refresh the page
Here is something to get you started on using AJAX: http://jsfiddle.net/j8rnW/
$(document).ready(function () {
$(".showText").hide();
$("#sub").on("click", function (e) {
e.preventDefault();
$.ajax({
url: '',
method: 'post',
data : {}, //pass your form elements as key-value pairs
success: function (response) {
$(".showText").show();
$(".getText").hide();
}
});
});
});
Using ajax would help. Or you can change the input type to 'button' instead of submit. Because submit always posts the form values and refreshes the page
I been looking and working and I can't make fancybox work in this code. I have revised severalt times and I don't understand why it doesn't work. I'm using Dreamweaver and the fancybox are marked below and I don't know if some code contrasts with the fancybox codes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/GabLopezIT.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<link rel="shortcut icon" type="image/x-icon" href="../images/favicon.ico" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Gabriele Lopez</title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
-->
</style>
<link href="../css/psr_site_layout.css" rel="stylesheet" type="text/css" />
<link href="../css/psr_site_layout_content.css" rel="stylesheet" type="text/css" />
<link href="../css/psr_site_layout_gallery.css" rel="stylesheet" type="text/css" />
<link href="../css/psr_site_submenu.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
/*.video {
width:200px;
float:left;
margin-left:50px;
}*/
</style>
<!-- InstanceEndEditable -->
<style type="text/css">
</style>
<style type="text/css">
body,td,th {
color: #FFF;
}
a:link {
color: #CCC;
text-decoration: none;
}
a:visited {
color: #CCC;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#bio {
margin-bottom:-20px;
}
#social {
margin-top:5px;
height: 25px;
width: auto;
float: right;
}
#lang {
float:left;
width:auto;
margin-right:15px;
}
#twitter {
float: right;
width: 60px;
height: 24px;
vertical-align: bottom;
margin-left: 17px;
margin-right: 5px;
}
#google {
float: right;
width: 50px;
height: 24px;
vertical-align: bottom;
margin-left: 17px;
margin-right: 15px;
}
.fb-like {
height: 25px;
width: 85px;
float: right;
vertical-align: bottom;
margin-left: 17px;
margin-right: 5px;
display:inline-table
}
</style>
<link href="../css/copyright.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<link href="../css/bottom.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#666666" background="../img/background001.jpg" onload="MM_preloadImages('../images/facebook2.png')">
<!-- FACEBOOK CODE-->
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/it_IT/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!--END FACEBOOK CODE-->
<!--TWITTER CODE-->
<script>!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;
js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}
}(document,"script","twitter-wjs");</script>
<!--END TWITTER CODE-->
<!--GOOGLE+ CODE-->
<script type="text/javascript">
window.___gcfg = {lang: 'it'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!--END GOOGLE+ CODE-->
<div id="psr_site_layout">
<table id="Table_01" width="800" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="../img/bannerweb.png" alt="" width="800" height="200" border="0" /></td>
</tr>
<tr>
<td colspan="5">
<img src="../img/layout/PSR-website-(sliced-new)_03.png" width="800" height="8" alt="" /></td>
</tr>
<tr>
<td colspan="5"><ul id="MenuBar1" class="MenuBarHorizontal">
<li>HOME</li>
<li>NEWS</li>
<li>TOUR</li>
<li>FOTOS</li>
<li>VIDEOS</li>
<li>ALBUMS</li>
<li>BIO</li>
</ul>
<div id="social">
<div id="lang"><img src="../img/EN-button.png" width="20" height="20" /></div>
<div id="google"><g:plusone size="medium"></g:plusone>
</div>
<div id="twitter">Tweet</div>
<div class="fb-like" data-href="http://www.gabrielelopez.com" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="trebuchet ms"></div>
</div>
</td>
</tr>
<tr>
<td colspan="5">
<img src="../img/layout/PSR-website-(sliced-new)_15.jpg" width="800" height="6" alt="" /></td>
</tr>
<tr>
<td colspan="5"><!-- InstanceBeginEditable name="Content1" -->
Fancybox Scripts start here
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.0.4"></script>
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=2.0.4"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.4"></script>
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=2.0.4" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
});
});
</script>
<div id="psr_site_layout_content">
Fancybox HTML content starts here
<a class="various fancybox.iframe" href="http://www.youtube.com/embed/_DjiHFxPauw" title="Vorrei tanto dirtelo"><img src="../img/tvpianeta.png"></a><p>Vorrei tanto dirtelo</p>
<a class="various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>
<div class="video"><a class="various fancybox.iframe" href="http://www.youtube.com/embed/_DjiHFxPauw" title="Vorrei tanto dirtelo"><img src="../img/tvvorrei.png"></a><p>Vorrei tanto dirtelo</p></div>
<div class="video"><a class="lavita fancybox.iframe" href="http://www.youtube.com/embed/_DjiHFxPauw" title="Vorrei tanto dirtelo"><img src="../img/tvvita.png"></a>
<p>La vita che vorrei</p></div>
<div class="video"><a class="lavita fancybox.iframe" href="http://www.youtube.com/embed/_DjiHFxPauw" title="Vorrei tanto dirtelo"><img src="../img/tvhistoria.png"></a><p>Historia de un perfecto idiota</p></div>
<div class="video"><a class="lavita fancybox.iframe" href="http://www.youtube.com/embed/_DjiHFxPauw" title="Vorrei tanto dirtelo"><img src="../img/tvteletaxi.png"></a><p>Vorrei tanto dirtelo</p></div>
</div>
<!-- InstanceEndEditable --></td>
</tr>
<div id="bottom">
<tr>
<td colspan="5">
<img src="../img/layout/PSR-website-(sliced-new)_17.jpg" width="800" height="5" alt="" /></td>
</tr>
<tr>
<td colspan="6"><div id="psr_site_submenu">Home | News | Tour | Fotos | Videos | Dischi | Bio | Cambia al Inglese</div></td>
</tr>
<tr>
<td height="39" colspan="6" class="copyright">
© 2012 Orange Park Records srl.<br />
Tutti diritti riservati.
</td>
</tr>
</div>
</table>
</div>
<p> </p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
<!-- InstanceEnd --></html>
I don't see anywhere in your code that you have included jQuery or fancybox's css and js files.
Be sure that you have included the script and stylesheet in your document (make sure the css and js files are on your server). Make sure you also load the jQuery library.
Follow this example and adjust the paths accordingly:
<!-- Add jQuery library -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.0.4"></script>