I'm new to HTML/CSS, I recently purchased a bootstrap theme and I'm trying to create my own homepage using segments of HTML code they provided.
I copy/pasted a section of code and the file paths for the JS but it doesn't work at all. The assets(text, images, videos) all appear but none of it is styled and it's all static. Neither the CSS nor the JS is working on that segment.
This is a live demo of how it's supposed to look:
http://htmlstream.com/preview/unify-v1.7/index.html
This is how mine looks currently:
http://i.gyazo.com/7f8caf3b13c10c3dbfd340afd3fcb1db.png
This is the HTML segment for the slider:
<!--=== Slider ===-->
<div class="slider-inner">
<div id="da-slider" class="da-slider">
<div class="da-slide">
<h2><i>CLEAN & FRESH</i> <br /> <i>FULLY RESPONSIVE</i> <br /> <i>DESIGN</i></h2>
<p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i> <br /> <i>veniam omnis </i></p>
<div class="da-img"><img class="img-responsive" src="assets/plugins/parallax-slider/img/1.png" alt=""></div>
</div>
<div class="da-slide">
<h2><i>RESPONSIVE VIDEO</i> <br /> <i>SUPPORT AND</i> <br /> <i>MANY MORE</i></h2>
<p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i></p>
<div class="da-img">
<iframe src="http://player.vimeo.com/video/47911018" width="530" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
<div class="da-slide">
<h2><i>USING BEST WEB</i> <br /> <i>SOLUTIONS WITH</i> <br /> <i>HTML5/CSS3</i></h2>
<p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i> <br /> <i>veniam omnis </i></p>
<div class="da-img"><img src="assets/plugins/parallax-slider/img/html5andcss3.png" alt="image01" /></div>
</div>
<div class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</div>
</div>
</div><!--/slider-->
<!--=== End Slider ===-->
This is the HEAD section of my HTML file:
<head>
<title>Ideal Improvements South West LTD | Home</title>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Web Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin">
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- CSS Header and Footer -->
<link rel="stylesheet" href="assets/css/headers/header-v3.css">
<link rel="stylesheet" href="assets/css/footers/footer-v1.css">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/animate.css">
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<!-- CSS Theme -->
<link rel="stylesheet" href="assets/css/theme-colors/default.css" />
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
This is the JS section at the bottom of my file:
<!-- JS Global Compulsory -->
<script type="text/javascript" src="assets/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- JS Implementing Plugins -->
<script type="text/javascript" src="assets/plugins/back-to-top.js"></script>
<script type="text/javascript" src="assets/plugins/smoothScroll.js"></script>
<script type="text/javascript" src="assets/plugins/parallax-slider/js/modernizr.js"></script>
<script type="text/javascript" src="assets/plugins/parallax-slider/js/jquery.cslider.js"></script>
<script type="text/javascript" src="assets/plugins/owl-carousel/owl-carousel/owl.carousel.js"></script>
<!-- JS Customization -->
<script type="text/javascript" src="assets/js/custom.js"></script>
<!-- JS Page Level -->
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/plugins/owl-carousel.js"></script>
<script type="text/javascript" src="assets/js/plugins/parallax-slider.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
App.init();
OwlCarousel.initOwlCarousel();
StyleSwitcher.initStyleSwitcher();
ParallaxSlider.initParallaxSlider();
});
</script>
<!--[if lt IE 9]>
<script src="assets/plugins/respond.js"></script>
<script src="assets/plugins/html5shiv.js"></script>
<script src="assets/plugins/placeholder-IE-fixes.js"></script>
<![endif]-->
I get 7 errors in the chrome dev tools console. 4 are "Uncaught syntaxerror: unexpected token illegal"
2 are "failed to load resource: err_cache_missing and err_file_not_found (The cache one links to the vimeo video link and the file not found links to google fonts.)
The last is "uncaught referenceerror: style switcher is not defined" I believe this is to do with the way I copied some of the code, if you look at the live demo site it has a style switcher on the top right corner.
I took one of the demo html files and put it into my site director and it accesses the JS and CSS fine using the same file paths.
hello you seen your code properly i think something wrong
<script type="text/javascript" src="assets/plugins/parallax- slider/js/modernizr.js"></script>
Space between js name i think this is problem.
or anything else please share your website link or demo code slider
Related
I'm trying to render my website and I takes a lot of time in Google Chrome, but in Mozilla works perfectly. The console shows the error
GET file://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic net::ERR_FILE_NOT_FOUND
I tried to import directy in the CSS and in the HTML this:
#import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic,300italic,300,100italic,100);
body {
font-family: 'Roboto', sans-serif;
}
But it still doesn't work, it throws the same error.
Here is the full HTML code of my website:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> </meta>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"></meta>
<title>Sign in</title>
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
</style>
<!-- JQuery Mobile -->
<link rel="stylesheet" href="./jquery/jquery.mobile-1.4.5.css"></link>
<!-- Project CSS -->
<link rel="stylesheet" href="./css/style.css"></link>
<!-- NativeDroid2 CSS -->
<link rel="stylesheet" href="./bower_components/nativeDroid2/css/nativedroid2.css"></link>
</head>
<body>
<div data-role="main" class="ui-content">
<form method="post">
<div class="img-container">
<img src="img/logo_gemott.png" alt="No es pot carregar la imatge" height="110" width="350">
</div>
<div>
<h2>Registre</h2>
<hr>
<label for="mail"><b>Correu electrònic</b></label>
<input type="text" placeholder="Introduir correu electrònic..." name="mail" required>
<label for="psw"><b>Contrasenya</b></label>
<input type="password" placeholder="Introduir contrasenya..." name="psw" required>
<div class="center-text">
<p>Al registrar-te, acceptes els <a href=#>termes de privacitat</a></p>
<p>Ja estàs registrat?</p>
</div>
</div>
Registrar-me
<div class="img-container" id="uab-logo">
<img src="img/UAB.jpg" alt="No es pot carrerar la imatge" height="150" witdh="150">
</div>
</form>
</div>
<!-- JQuery -->
<script type="text/javascript" src="jquery/jquery-2.2.4.js"></script>
<!-- Project Js -->
<script type="text/javascript" src="js/app.js"></script>
<!-- JQuery Mobile -->
<script type="text/javascript" src="jquery/jquery.mobile-1.4.5.min.js"></script>
<!-- NativeDroid2 Js -->
<script type="text/javascript" src="bower_components/Waves/dist/waves.js"></script>
<script type="text/javascript" src="bower_components/nativeDroid2/nd2settings.js"></script>
<script type="text/javascript" src="bower_components/nativeDroid2/js/nativedroid2.js"></script>
</body>
</html>
The standard way to import a Google Font, is placing a link tag in the head section of your HTML:
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
At least in the past, using #import was problematic when including larger files (font files are quite large) because browsers waited tor the file to download before continuing to render the page.
Your description gives the impression things have improved with Firefox, but not with Chrome.
So I suggest you include the link tag in your HTML file's head, remove the style tag and also remove the line starting with #import from your CSS.
As the OP reported an error message, I'm attaching a short example:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<style>
body {
font-family:'Roboto'
}
</style>
</head>
<body>
<h1>Test</h1>
</body>
</html>
You just need to define the font-family: 'Roboto', sans-serif; in CSSor body tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> </meta>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"></meta>
<title>Sign in</title>
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
</style>
<!-- JQuery Mobile -->
<link rel="stylesheet" href="./jquery/jquery.mobile-1.4.5.css"></link>
<!-- Project CSS -->
<link rel="stylesheet" href="./css/style.css"></link>
<!-- NativeDroid2 CSS -->
<link rel="stylesheet" href="./bower_components/nativeDroid2/css/nativedroid2.css"></link>
</head>
<body>
<div data-role="main" class="ui-content">
<form method="post">
<div class="img-container">
<img src="img/logo_gemott.png" alt="No es pot carregar la imatge" height="110" width="350">
</div>
<div>
<h2>Registre</h2>
<hr>
<label for="mail"><b>Correu electrònic</b></label>
<input type="text" placeholder="Introduir correu electrònic..." name="mail" required>
<label for="psw"><b>Contrasenya</b></label>
<input type="password" placeholder="Introduir contrasenya..." name="psw" required>
<div class="center-text">
<p>Al registrar-te, acceptes els <a href=#>termes de privacitat</a></p>
<p>Ja estàs registrat?</p>
</div>
</div>
Registrar-me
<div class="img-container" id="uab-logo">
<img src="img/UAB.jpg" alt="No es pot carrerar la imatge" height="150" witdh="150">
</div>
</form>
</div>
<!-- JQuery -->
<script type="text/javascript" src="jquery/jquery-2.2.4.js"></script>
<!-- Project Js -->
<script type="text/javascript" src="js/app.js"></script>
<!-- JQuery Mobile -->
<script type="text/javascript" src="jquery/jquery.mobile-1.4.5.min.js"></script>
<!-- NativeDroid2 Js -->
<script type="text/javascript" src="bower_components/Waves/dist/waves.js"></script>
<script type="text/javascript" src="bower_components/nativeDroid2/nd2settings.js"></script>
<script type="text/javascript" src="bower_components/nativeDroid2/js/nativedroid2.js"></script>
</body>
</html>
body {
font-family: 'Roboto', sans-serif;
}
I have tried. It's working!
Add this:
<link rel="preload" href="https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu7GxKOzY.woff2" as="font" crossorigin="anonymous"/>
<link rel="preload" href="https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.woff2" as="font" crossorigin="anonymous"/>
to your <head> section.
And this:
#font-face {
font-family: "Roboto";
src: url("https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu7GxKOzY.woff2") format("woff2"), url("https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.woff2") format("woff2")
font-weight: 400;
font-display: swap;
font-style: Roboto; }
add to your css.
And add the css file with this method:
<link rel="preload" href="css/style.css" as="style" onload="this.rel='stylesheet'"><noscript><link rel="stylesheet" href="css/style.css"></noscript>
the URL is not correct
use this
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:100i,300,300i,400,400i,500,500i,700,700i&display=swap');
Finally I've found the problem. I'm using a Jquery Mobile theme called NativeDroid2 and it was loading the Roboto font-family incorrectly in the CSS file. I simply commented the url and now works perfectly.
You can force to your site use always HTTPS using htaccess, that's best method to fix this issue
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]
Header always set Content-Security-Policy "upgrade-insecure-requests;"
Check your internet connection may be it is unable to GET it from the provided url
I am using Google App Script to build a little web app. I'm just at the very start and the page charges well on both Chrome and Firefox but I can't get anything to happen on click of the log in button. I don't get any log to the logger, neither do I get the alert to pop up. Does anyone have any idea why?
This it the HTML of HTML_StockManagementLogInPage:
<!DOCTYPE html>
<html>
<head>
<base target = "_top">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/yourscript.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<center><h4> Stock Management Log In </h4></center>
<div class="row">
<center>
<div class="input-field col s3"></div>
<div class="input-field col s3">
<input id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
<div class="input-field col s3">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
</center>
</div> <!-- END OF ROW -->
<div class="row">
<center><button class="btn waves-effect waves-light" type="submit" id="LogInButton">Log In
<i class="material-icons right">send</i>
</button></center>
</div> <!-- END OF ROW -->
</div> <!-- END OF CONTAINER -->
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.getElementByID("LogInButton").addEventListener("click",LogInClicked);
function LogInClicked(){
var UserName1 = {};
UserName1.FirstName = document.getElementByID("first_name").value;
UserName1.LastName = document.getElementByID("last_name").value;
alert(UserName1.FirstName + " " + UserName1.LastName);
google.script.run.UserLoggedIn(UserName1);
} // END FUNCTION LOGIN
</script>
</body>
</html>
And this is the code:
function doGet() {
return HtmlService.createTemplateFromFile("HTML_StockManagementLogInPage").evaluate();
//return HtmlService.createHtmlOutputFromFile("HTML_StockManagementInterfacePage");
}
function InsertHTMLScript(HTMLFilename) {
return HtmlService.createHtmlOutputFromFile(HTMLFilename).getContent();
}
function UserLoggedIn(UserName){
logger.log(UserName.FirstName + " clicked the button");
return HtmlService.createTemplateFromFile("HTML_StockManagementMenu").evaluate();
}
And just in case, this is the HTML for HTML_StockManagementMenu, just displaying a title for now:
<!DOCTYPE html>
<html>
<head>
<base target = "_top">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<h1> Stock Management Menu </h1>
</div> <!-- END OF CONTAINER -->
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
I tried earlier to break down my code with the fuction InsertHTMLScript that I have written in the code, inserting <?!= InsertHTMLScript("HTML_CSS"); ?> into the HTML code and it didn't work either. I don't known if it's related but I just resolve not to use it to make things easier.
Thank you in advance
You misspelled getElementById
You have:
document.getElementByID('LogInButton');
It should be:
document.getElementById('LogInButton');
Here is the official docs: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
Not sure why my fancy box isn't working. Hoping someone can help
HTML Code:
<div class ="homeimage">
<a class ="fancybox" rel="group" href ="images\image9.jpg"><img src ="images\image9.jpg" alt ="Photo by Tom Harper"/></a>
</div>
Import and JavaScript Code:
<head>
<title>Tom Harper - Videographer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
The folder which contains all the fancybox files is in the same directory as the webpage. All that happens when I click the image is that the image opens in a new page because of the <a> tags that are now reference the image.
First: Download the Fancybox plugin here
secondly: unzip fancybox plugin and implement into your header.
exp...: link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" "fancybox" is my
unpacked plugin directory.
thirdly: Follow this Documentation or just copy and paste HTML and JavaScript part.
and it will work.
<script type="text/javascript">
$(document).ready(function() {
$("#single_1").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>Tom Harper - Videographer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Add jQuery library -->
<!-- Add mousewheel plugin (this is optional) -->
<!-- Add fancyBox -->
<!-- Optionally add helpers - button, thumbnail and/or media -->
</head>
<script type="text/javascript">
$(document).ready(function() {
$("#single_1").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
});
</script>
<body>
<a id="single_1" href="http://farm2.staticflickr.com/1661/24170619595_ca34ef74d9_b.jpg" title="Bos 3 (p.vanhaastrecht)">
<img src="http://farm2.staticflickr.com/1661/24170619595_ca34ef74d9_m.jpg" alt="" />
</a>
</body>
</html>
I've been trying for 2 hours to get FancyBox to work and have no clue how it isn't working. Obviously I am missing something because it's just linking to the image.
Example: I link the image to my images folder (both the thumb and the large image), and when I click the image it just takes me to a new page and shows me the image rather than popping up.
Here is my code:
<head>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/stylish-portfolio.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/stylish-portfolio/fancybox/source/jquery.fancybox.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-thumbs.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-buttons.css" media="screen"/>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-media.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancyImg").fancybox();
});
</script></head>
<div class="row">
<div class="col-md-6">
<div class="portfolio-item">
<a class="fancyImg" href="img/portfolio-2.jpg" title="Lorem ipsum dolor sit amet"><img src="img/portfolio-2.jpg" alt="" /></a>
</div>
</div>
First thing I see is your are loading fancybox twice. Pick one.
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.js"></script>
Inside the html body section I added this code
<a class="fancyImg" href="img1.jpg" title="Lorem ipsum dolor sit amet"><img src="img1.jpg" alt="" /></a>
<script type="text/javascript">
$(document).ready(function() {
$(".fancyImg").fancybox();
type:"iframe"
});
</script>
And it seems to be working fine :)
I'm quite new to js and jQuery, just using it from templates.
My goal is to use magnific popup like a video lightbox, but I can't make it work.
I've tried to remove some other libraries that I used but don't seem to change anything.
Where have I made a mistake? I've uploaded it here.
<!DOCTYPE HTML>
<!--
Overflow 1.1 by HTML5 UP
html5up.net | #n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="shortcut icon" href="../favicon.ico">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript"> document.createElement('video');document.createElement('audio');document.createElement('track'); </script>
<script src="js/video.js"></script>
<script> videojs.options.flash.swf = "js/video-js.swf"</script>
<link rel="stylesheet" href="css/effets_perso.css" />
<link rel="stylesheet" href="css/video-js.css">
<link rel="stylesheet" href="css/perso.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<noscript>
<link rel="stylesheet" href="css/skel-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Generic -->
<article class="container box style3">
<header>
<h2>Generic Box</h2>
<p>Just a generic box. Nothing to see here.</p>
</header>
<section>
<header>
<h3>Paragraph</h3>
<p>This is a byline</p>
</header>
<a class="test-popup-link" href="images/pic02.jpg">Image</a>
<script type="text/javascript">
$(document).ready(function() {
$(".test-popup-link").magnificPopup({
type: "image"
// autres options
});
});
</script>
<div align="center">
<a class="popup-youtube" href="http://www.youtube.com/watch?v=miTfXsMn5ms">video YouTube </a><br>
<a class="popup-vimeo" href="https://vimeo.com/45830194">video sur Vimeo </a><br>
<a class="popup-gmaps" href="https://maps.google.com/maps?q=epfl+&hl=en&ll=46.521666,6.56652&spn=0.016005,0.038581&sll=37.0625,-95.677068&sspn=37.683309,79.013672&t=h&hq=epfl&z=15&iwloc=A">EPFL sur Google Map</a>
<script type="text/javascript">
$(document).ready(function() {
$(".popup-youtube, .popup-vimeo, .popup-gmaps").magnificPopup({
disableOn: 700,
type: "iframe",
mainClass: "mfp-fade",
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
</script>
</div>
</video>
</section>
</section>
</article>
</body>
</html>
I don't know if this is the complete problem but the order of your javascript tags is definitely part of the problem.
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
As you can see you are loading the js/jquery.magnific-popup.js before you actually load the jquery library (js/jquery.min.js). This is an important distinction because your magnific-popup.js uses jquery. If you look at the console on your web page (type ctrl+i, and switch to the console tab) you will see several errors that have to do with jquery not being loaded, and thus the functions in magnific-popup.js not being defined.
So move your jquery script to the top
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
and if it still doesn't work. Look at the console, and try to include the errors when writing an Stack Overflow question.