Fancybox is not working on my site - javascript

I have added fancybox to my site but every way I try it just won't work. All it does is just open the image in a new window! I am only calling jQuery once. The only thing I can think is it's conflicting with the other JavaScript code in my site.
When I run the page using Firebug I get the error: "type error fancybox is not a function". All code is in end of head tag.
Here is code:
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script src="js/libs/modernizr.min.js"></script>
<script src="js/libs/jquery.easing.1.3.min.js"></script>
<script src="js/libs/jquery.fitvids.js"></script>
<script src="js/script.js"></script>
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
<a class="fancybox" rel="group" href="images/linked _big.png"><img src="images/linked.png" alt="linked" /></a>

Related

wow.js is not working

I have just tried to implement wow.js to my site but it wont work.
I have linked everything but i don't know why it isn't working.
I even added the wow.js and linked it to the html but there still seems to be nothing that is working. I also added the animate.css and still there is no effect.
HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="animate.css">
<script language="javascript" type="text/javascript"src="javascript.js"></script>
<script language="javascript" type="text/javascript" src="wow.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<title> Vids </title>
<header> <img src="images/Logo.png" > </header>
</head>
<body>
<div class="vids-title">
<p>Vids</p>
</div>
<div class="video-1 wow slideInRight">
<h>Shia LaBeouf delivers the most intense motivational speech of all-time</h>
<iframe width="550" height="435"
src="https://www.youtube.com/embed/nuHfVn_cfHU">
</iframe>
</div>
<div class="video-2 wow slideInLeft">
<h>Truth or Drink (Exes)</h>
<iframe width="550" height="435"
src="https://www.youtube.com/embed/pxYpvNMbdXQ">
</iframe>
</div>
<div class="video-3 wow slideInRight">
<h>Walker broke his arm</h>
<iframe width="550" height="435"
src="https://www.youtube.com/embed/5-NXguyFFko">
</iframe>
</div>
javascript
$(function(){
new WOW().init();
});
There is nothing wrong with your code - its working fine
https://jsfiddle.net/k3qaoyxe/
I included the directories as external resources and then
$(function(){
new WOW().init();
});
worked fine.
Are you sure you have included all the libraries properly and they are loading correctly - check the network tab in your developer console.
Libraries included from cdn:
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js
https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js
For me, it worked well after calling WOW at the window load event in addition to document ready event:
//At the document ready event
$(function(){
new WOW().init();
});
//also at the window load event
$(window).on('load', function(){
new WOW().init();
});
<script language="javascript" type="text/javascript"src="javascript.js"></script>
<script language="javascript" type="text/javascript" src="wow.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
should probably be
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="wow.js"></script>
<script src="javascript.js"></script>
You can also get rid of language and type attributes, they're useless and not W3C compliant.

prettyphoto undefined is not a function

I'm attempting to install prettyPhoto lightbox on my site and I keep getting them same error. The following code in the console generates this error
"undefined is not a function"
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
Line 18
I've tried it in the footer and the head, both cause the same problem and the lightbox doesn't load.
Here's the files in my head tag...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
My site is www.jessicadraws.com
Any ideas?
Dave.
Your page loads 3 versions of jQuery. This is likely causing issues with other plugins. Pretty Photo is loading fine - it's just loading onto jQuery 1.9
I can see this by running this in the devtools:
var jquery162 = $.noConflict(true);
> undefined
$.fn.jquery
> "1.9.0"
$.prettyPhoto
> Object {version: "3.1.5"}
To fix this won't be simple unfortunately, you'll need to decide which version of jQuery you are using and stop loading the rest.
For reference in <head> you are loading:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
PrettyPhoto is loaded just after these, in the head.
In your <body>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Fancybox is not working (open in the new tab, not a popup)

I have a problem with fancybox plugin. When i click on thumbnail image, it open the larger image in new tab (not a fancybox).
Here's my code:
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
I want to add fancybox here:
<div id="slide">
<ul>
<li><a class="fancybox" rel="group" href="bigImages/cover-mockup.jpg"><img src="images/001.png" alt="" /></a>
<div id="name4">Lettuce Eat's Flyer</div>
</li>
and the fancybox script:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
I've create the simple html with fancybox and it's working. I do the same on this but something wrong, i dont know... Thank you for your help.
try replacing the $ with jQuery
jQuery(document).ready(function() {
jQuery(".fancybox").fancybox();
});

How can I properly add CSS and JavaScript to an HTML document?

This very well might be a very stupid question.
I'm trying to add an empty CSS file, an empty JavaScript file and the jQuery library into the most basic of HTML files, as follows:
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="theme.css">
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" />
<script src="application.js" />
</head>
<body>
<h1 class=test>This is a test! Hello, world!</h1>
</body>
</html>
However, it doesn't work. The h1 doesn't display in my browser when the link or any of the scripts are present, but displays normally otherwise.
What am I doing wrong here? Why doesn't this work, and how can I make it work?
Thank you very much,
Eden.
Your <script> tags cannot be self closing. Try changing them to look like <script src="..." type="text/javascript"></script>
two things. script tags should have an end tag.
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" /></script>
<script type="text/javascript" src="application.js" /></script>
Another thing, see if you are navigating to the right file. Assume that your directory tree is the next
directory
|-yourHTMLpage.html
|-jquery-2.0.3.js
|-application.js
\-theme.css
then the next will work
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" />
<script type="text/javascript" src="application.js" /></script>
<link rel="stylesheet" type="text/css" href="theme.css">
But in most recent standards, we are using a folder for css and js files, like the next
directory
|-yourHTMLpage.html
|-js
|-jquery-2.0.3.js
\-application.js
\-css
\-theme.css
Then you have to adapt the link,
<script language="javascript" type="text/javascript" src="js/jquery-2.0.3.js" />
<script type="text/javascript" src="js/application.js" /></script>
<link rel="stylesheet" type="text/css" href="css/theme.css">
Notice the "js/" addition for javascript files and "css/" addition for css files. HTML will navigate from its directory to the said file. But if the file isn't there as the source element is telling, then the page won't load the said file.
Are the css and js files in the same folder as your html ?
To see what is wrong, try a developper console to see what requests are sent (Press 'F12' on chrome or install the firebug extension on Firefox). There should be a "Network" tab that shows what files are requested and if your browser does or doesn't find them.
Are you sure that the path to the several files is correct? If it is, is the class of the h1 spelled correctly?
You should embed the javascript files like this:
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js"> </script>
<script language="javascript" type="text/javascript" src="application.js"> </script>
Here is the simple method for include css and javascript file to your page.
<link rel="stylesheet" type="text/css" href="YOUR FILE PATH">
<script src="YOUR FILE PATH" type="text/javascript"></script>

Fancybox Problems, nothing happens

I want to integrate Fancybox in my gallery with the following Code:
Include the scripts :
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="tl_files/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="tl_files/fancybox/source/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="tl_files/fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="tl_files/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" />
<script type="text/javascript" src="tl_files/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<script type="text/javascript" src="tl_files/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<link rel="stylesheet" href="tl_files/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="tl_files/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.6"></script>
my Link to an picture looks like that :
< a class="fancybox" data-fancybox-group="gallery" title="hello world" href="tl_files/photomania/images/51.jpg"><img src="tl_files/photo/images/51.jpg"></img></a>
And in the end i call the fancy box with following code:
<script type="text/javascript">
(function($) {
$('.fancybox').fancybox();
})(jQuery);
</script>
But nothing happens.. please help me
What kind of error du you get?
Have you checked the javascript console, or firebug (if you use firefox/iceweasel)?
Paste the error messages and it will be easier to help you out.
try this:
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
Since you load jquery at the first row I don't think you need to do it like that.
It should work.

Categories