I'm making a website for a company and I would like to use a Jquery slider on the Home page. I'm using Visual Studio to make the website and I'm trying to implement the Coin slider to the page. I downloaded the files for it and copied the code, changed the pictures and everything is going fine when I try to see it on my localhost. But the problem is that when I upload it to the server than the slider is not working at all, it just puts the pictures under each other.
The code that I'm using is the following:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script type="text/javascript" src="/Jquery/coin-slider.min.js" ></script>
<link rel="stylesheet" href="/coin-slider-styles.css" type="text/css" />
And:
<script type="text/javascript">
$(document).ready(function () {
$('#coin-slider').coinslider({ width: 759, navigation: true, delay: 5000,effect: 'straight', });
});
</script>
And for the images:
<div id="coin-slider">
<img src="Images/image1.jpg" alt="" width="759px" height="256px" />
<img src="Images/image2.jpg" alt="" width="759px" height="256px" />
<img src="Images/image3.jpg" alt="" width="759px" height="256px" />
</div>
If I try to see the problem with Firefox's Web Console then I get the following message:
TypeError: $("#coin-slider").coinslider is not a function
I don't know what is going wrong when I upload it to the server so I would appreciate any help. :) I also tried using Nivo slider instead of Coin slider to see if the problem was with the slider but everything was the same - it worked on my localhost but not on the server.
Here is the link where you can see the website as it is right now:
http://web.bptech.dk:33001/
Thank you for any help!! :)
I would suggest you have a pathing issue, "/", will probably not be the same path on both machines.
Related
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>
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">
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.
I'm trying to use this plugin: https://github.com/sachinchoolur/lightGallery
What i can't understand is - does it generate thumbnails for images/video?
And i can't get thumbnails from youtube using the docs...
CSS:
<link rel="stylesheet" href="/static/css/lightgallery.min.css">
<script type="text/javascript" src="/static/js/lg-fullscreen.min.js"></script>
<script type="text/javascript" src="/static/js/lightgallery.min.js"></script>
<script type="text/javascript" src="/static/js/lg-thumbnail.min.js"></script>
<script type="text/javascript" src="/static/js/lg-video.min.js"></script>
JS:
$('.light-gal-item').lightGallery({
thumbnail: true,
thumbWidth: 120,
thumbContHeight: 90,
loadYoutubeThumbnail: true,
youtubeThumbSize: 'default'
});
HTML:
<div class="light-gal-item">
<a href="http://www.youtube.com/watch?v=P5_GlAOCHyE" data-src="http://www.youtube.com/watch?v=P5_GlAOCHyE">
<img src="http://www.youtube.com/watch?v=P5_GlAOCHyE"
width="120" height="90" />
</a>
</div>
It does images like that... but even so, i cant figure out if it does thumbnails, or if it needs them by different url...
And it doesn't make youtube thumbnails... HELP!
I have the same problem, but maybe you can use this trick
This is my code
<div id="video-gallery">
<a href="https://www.youtube.com/watch?v=P1mmrxt71RQ">
<img src="http://img.youtube.com/vi/P1mmrxt71RQ/0.jpg" class="cropped" />
</a>
</div>
You just replace the youtube video id on img src, on this example "P1mmrxt71RQ". To search another youtube thumbnail size use this http://boingboing.net/features/getthumbs.html
And for this trick, you dont necessary use
<script type="text/javascript" src="/static/js/lg-thumbnail.min.js"></script>
I hope this help
I can't narrow down my problem with a simple logo parade. I'm working on this at promasterautomotive.com so you can see the context of the problem. The logo parade is at the very bottom, the faded logos.
I opened the console in Chrome (ctrl+shift+j) but I'm not seeing any errors.
Here is my javascript. I pulled it directly from an example.
$(function() {
$("#logoParade").smoothDivScroll({
autoScrollingMode: "always",
autoScrollingDirection: "endlessLoopRight",
autoScrollingStep: 1,
autoScrollingInterval: 25
});
// Logo parade event handlers
$("#logoParade").bind("mouseover", function() {
$(this).smoothDivScroll("stopAutoScrolling");
}).bind("mouseout", function() {
$(this).smoothDivScroll("startAutoScrolling");
});
});
Here's my HTML. Again, modified from an example. Once I get it working I'll tailor it as necessary.
<div id="logoParade">
<img src="images/logos/wiseco.png" class="logos">
<img src="images/logos/bullydog.png" class="logos">
<img src="images/logos/vortek.png" class="logos">
<img src="images/logos/sinister.png" class="logos">
<img src="images/logos/schaeffers.png" class="logos">
<img src="images/logos/arp.png" class="logos">
<img src="images/logos/bpd.png" class="logos">
<img src="images/logos/sct.png" class="logos">
</div>
Anyone else see something that I'm overlooking?
You are missing several files on your site that the plugin depends on
This jsfiddle should work (looks like you moved or deleted the images though ...actually ..the whole site...)
http://jsfiddle.net/DelightedDoD/68sv070h/
Here are the requisite files (download your own copies of course);
<link rel="Stylesheet" type="text/css" href="http://smoothdivscroll.com/css/smoothDivScroll.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://smoothdivscroll.com/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script src="http://smoothdivscroll.com/js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="http://smoothdivscroll.com/js/jquery.kinetic.min.js" type="text/javascript"></script>
<script src="http://smoothdivscroll.com/js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
Note the following from the plugin's docs:
LOAD JAVASCRIPT LATE - JUST BEFORE CLOSING THE BODY TAG.
That way the browser will have loaded the images and will
know the width of the images. No need to specify the width
in the CSS or inline.