LightGallery Video Plugin won't work (undefined $) - javascript

I am currently working on a webpage and tried implementing LightGallery. Although the image galleries work totally fine for me the videos won't seem to play.
When I check the console the following error message is displayed upon loading the site:
<Uncaught TypeError: $.fn.lightGallery is undefined
<anonymous> http://localhost/js/lg-video.js:352
<anonymous> http://localhost/js/lg-video.js:354
<anonymous> http://localhost/js/lg-video.js:17
<anonymous> http://localhost/js/lg-video.js:19
I am fairly new to using LightGallery and to finding out, what the problem in a JavaScript file is since I am not an 'expert' coder.
I used the code snippet from the lg-video plugin website to test it out:
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
...
</head>
<body>
<script src="js/lightgallery.js"></script>
<script src="js/lg-video.js"></script>
<div id="lightgallery">
<a href="https://www.youtube.com/watch?v=meBbDqAXago" data-poster="video-poster1.jpg" >
<img src="img/thumb1.jpg" /></a>
</div>
<script>
lightGallery(document.getElementById('lightgallery'));
</script>
</body>

Here's a working JSFiddle. Here's what I did, working through the installation page I referenced yesterday:
Starting in the "Include CSS and Javascript files" section, they say to include lightgallery.css, though they don't give a link for it. I searched and found a CDN link, and added that ;
Added a CDN link to the latest jQuery;
Copied and added the 'jsdelivr collection' link for the Lightgallery JS;
Copied the JS they show to initiate the plugin;
Copied the relevant part of your HTML snippet - just the lightgallery div, with some minor updates:
Neither video-poster1.jpg nor img/thumb1.jpg exist here of course, so I replaced them with placeholder images;
I get "Video unavailable" for that video, so I randomly picked another;
This works fine - the placeholder thumbnail is shown, when I click it the video opens against a black background, and plays if I click play. Here's the code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/css/lightgallery.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/combine/npm/lightgallery,npm/lg-autoplay,npm/lg-fullscreen,npm/lg-hash,npm/lg-pager,npm/lg-share,npm/lg-thumbnail,npm/lg-video,npm/lg-zoom"></script>
</head>
<body>
<div id="lightgallery">
<img src="https://via.placeholder.com/150" />
</div>
<script>
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
</script>
</body>
</html>

Related

Javascript not showing up

I'm working on a index.html file that was previously created by DNN (Dot Net Nuke).
I've put a Javascript Slideshow Banner in where there was previously an SWF Slideshow banner. The problem is the javascript is not showing up.
Here's what the problem (i.e. banner not showing) looks like: http://www.drkachooie.ca/index.html
Note: When I upload an html with just the flash banner it shows up (http://www.drkachooie.ca/rice.html), so something must be overlapping it, right?
My question is: How can I adjust my code to make my javascript show up? If someone can check the code out, and see what's wrong, I would greatly appreciate it.
Here's the javascript (Correction: HTML & CSS) in the body tags of the index.html document:
<div id="mhrotator">
<style type="text/css"> #mhrotator img { display:none; } </style>
<img src="images/Bitmap1.jpg" title="Bitmap1" />
<img src="images/Bitmap2.jpg" title="Bitmap2" />
<img src="images/Bitmap3.jpg" title="Bitmap3" />
<img src="images/Bitmap4.jpg" title="Bitmap4" />
<img src="images/Bitmap5.jpg" title="Bitmap5" />
</div>
Here's the javascript in the head tags of my index.html document:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mhrotator.js"></script>
<script type="text/javascript" src="js/initrotator.js"></script>
<link rel="stylesheet" href="js/mhrotator.css" type="text/css" />
Currently all the other pages of the website are using the old swf file as my banner. but the index.html file is currently using the javascript (which is not showing up)
Note: If you need any other information, feel free to ask!
The version that is working has the banner inside of a div element that is not being affected by <style type="text/css"> #mhrotator img { display:none; } </style> which is preventing the version that isn't working from showing the images.
I see this error in console :-
Uncaught TypeError: Cannot read property 'mhrotator' of null
at HTMLDocument.<anonymous> (initrotator.js:1)
at Function.ready (jquery.js:26)
at HTMLDocument.L (jquery.js:33)
Javascript is getting executed before div element mhrotator gets loaded.
Try placing below script tag after </body> tag.
<script type="text/javascript" src="js/mhrotator.js">

Javascript function not working. Script positioning issue?

I am attempting to get jQuery waypoints to work and I am doing a very basic example and it won't display the window alert that I am attempting to show when scrolled to. I was watching a video of this and I had exactly what the guy had, so I am not sure why it isn't working for me.
Any ideas of why this not initiating?
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
</head>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<section>
<img src="images/big-smile-face.png" class="dipper" alt="">
</section>
<script src="js/waypoints.js"></script> <!-- js/waypoints.js file -->
Javascript - js/waypoints.js file
$(document ).ready(function(){
var $dipper = $('.dipper');
$dipper.waypoint(function () {
alert('waypoint!');
});
});
What browser are you using? There might be some issue there. It seems to be working fine for me and I am not getting any errors.

Jquery-ui dialog box 'x' button image is not visible

I am doing a simple jquery-ui dialog application with my js,css code as,
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
</head>
<body>
<div id="dialog">this is a dialog box</div>
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
this jquery ui is added.....
<script>
$("#dialog").dialog()
</script>
</body>
</html>
When i add a simple dialog box, the x mark inside the dialog's close button is not visible.
Am i missing inclusion of any image sprite file?
Try this..
Include "sprite image" and if you put css file in project css folder means put image in image folder and add following changes
.ui-state-default .ui-icon {
background-image: url("images/ui-icons_888888_256x240.png");//change path of image in css(jquery-ui.css)
}
Alternatively, I think you have the bootstrap library. Some version of bootstrap and jquery-ui have conflict with the .button() method, and if your bootstrap.js is placed after jquery-ui.js, the bootstrap .button() overrides your jquery button and the jquery-ui 'X' image would then not show up.
This issue here might be helpful to know more!!
The below order works to showup your close button
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
The below causes issue
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
You can also run $.fn.button.noConflict() just before you call your dialog and everything should work fine!
Might be you have forget to include the sprite image
It looks very much like it wasn't able to load image resources for some reasons. Try to open your browser's network console and check it for any errors.
Perhaps it's trying to load the images from css/images/* rather than from the place that you're expecting for.

Open lightbox when page loads

I'm using this plugin to show lightbox on a website
http://www.zurb.com/playground/reveal-modal-plugin
I want to load some modal automatically when the page load.
I try using this but didn't work:
ON HEAD
<!-- REVEAL LIGHTBOX -->
<script type="text/javascript" src="jquery.reveal.js"></script>
<link rel="stylesheet" href="reveal.css">
<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
$('#flyer').reveal();
});
</script>
<!-- REVEAL LIGHTBOX -->
ON BODY
<div id="flyer" class="reveal-modal large">
<h1>Ahora tenemos flyer y todo</h1>
<div id="flyer-img"></div>
<a class="close-reveal-modal">×</a>
</div>
What I'm doing wrong?
This is the page that I'm working
www.cosaslindas.com/beta
Many thanks.
Try adding this after the $('#flier').reveal();
$('#flier').trigger('click');
This issue on Github explains how to do it. It's not a feature of Reveal, but it looks like it can be used to work. You need to have an element (in your case, #flyer have the attribute "data-reveal-onready").
Ive been looking to the modal plugin and i think the reveal function will only bind to a tags with the data-reveal-id attribute.
Not sure if this will work but i'd say give it a try!
add to you html:
<a id="triggerflyermodal" href="#" data-reveal-id="flyer" style="display:none">This is hidden</a>
And change the call to this:
<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
$('#triggerflyermodal').click();
});
</script>
EDIT:
Your loading jQuery library twice!
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
And
<script src="js/jquery.min.js" type="text/javascript"></script>
Trying removing the last one.
Edit2:
I just tested this in jsfiddle. If you remove the 2nd jquery library from your header your script should run fine!

Jquery and ShadowBox

I cant make the shadowbox work...I have a static html page which has an image that acts as a link to open a swf in the shadowbox.
however when I click on the image it opens the swf like any other image file in the browser.
The Shadow box doesn't seem to work at all.
This is my html page. I am using shadowbox-build-3.0b. Its strange that this editor doesnt allow new users to use image tag in the html code in the editor. So i have changed mine to image.
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="shadowbox-build-3.0b/adapters/shadowbox-jquery.js"></script>
<script type="text/javascript" src="shadowbox-build-3.0b/shadowbox.js"></script>
<link type="text/css" href="shadowbox-build-3.0b/shadowbox.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="shadowbox-build-3.0b/languages/shadowbox-en.js"></script>
<!-- Begin Shadowbox JS -->
<script type="text/javascript">
jQuery(document).ready(function () {
Shadowbox.init({
language: "en",
players: ["image"]
});
});
</script>
<!-- End Shadowbox JS -->
</head>
<body>
<image src="imagewithplaybutton.jpg" >
</body>
</html>
Hmm. I have not used shadowbox myself, but if you look at the way how the page suggests you set shadowbox up, there seems to be things that are wrong.
As i understand you want swf file to open when clicking on image; Shouldn't you set players: to swf then?
Your code also does not show if your img has link around it and if that link has rel="shadowbox" attribute.
I guess it should be set up something like this:
<script type="text/javascript">
Shadowbox.init({
language: "en",
players: ["swf"]
});
</script>
<img alrt="click here to open swf file" src="imgofflash.jpg"/>
Shadowbox.init() shouldn't be in the document.ready(). It should execute as the page loads.

Categories

Resources