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.
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 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 am using prettyPhoto inside a Movable Type CMS page. To make it work I have to use a
<p>
<mt:setvarblock name="html_head" append="1">
JS scripts here
</mt:include>
</p>
section. To make a gallery with 30-40 pictures, I have to add a block for each picture that looks something like this:
<a href="pathtoimage.jpg" rel="prettyPhoto[GalleryName]" title="Some title">
<img src="pathtothumbnail.jpg" alt="alt text" height="120" width="120" />
</a>
I want to generate these entries from a csv file using a (python) script and put into a separate file on the web server. Then I use this code to load these entries into the page:
<div id="divTestArea1"></div>
<script type="text/javascript">
$(function() {
$("#divTestArea1").load("output_en.txt");
});
</script>
When I load the page the thumbnails show up, but when I click them the pathtoimage.jpg is loaded instead of prettyphoto.
My question: Am I doing something wrong or is movable type blocking the execution for security reasons? How to debug this? I have firebug but no idea what to look for.
P.S: When pasting the entries directly into the page it works as expected.
Edit: full working code
<p>
<mt:setvarblock name="html_head" append="1">
<script src="../gallery/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="../gallery/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="../gallery/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</mt:setvarblock>
<mt:include name="include/header.tmpl">
<div id="divTestArea1"></div>
<script type="text/javascript">
$(function() {
<!--$("#divTestArea1").load("../gallery/output_en.txt");-->
$("#divTestArea1").load("../gallery/output_en.txt", function() {
$("a[rel^='prettyPhoto']").prettyPhoto();
});
});
</script>
<script type="text/javascript" charset="utf-8">// <![CDATA[
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});
});
// ]]></script>
</mt:include>
</p>
Try including the prettyPhoto() call after the AJAX has finished loading, because at the moment the plugin is being executed on page load, before the element it is targeting is available in the DOM.
<script type="text/javascript">
$(function() {
$("#divTestArea1").load("../gallery/output_en.txt", function() {
$("a[rel^='prettyPhoto']").prettyPhoto();
});
});
</script>
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.
I'm trying to implement Coin Slider (http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/) on my website. However, I can't get it to work. Firefox error console brings up '$ is not defined'.
I only really know HTML and CSS and thought this would just be a case of copying and pasting code. If it's something simple to fix that would be great, but I may have bitten off more than I can chew!
Thanks for any help.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" type="text/css" href="../style.css" />
<style type="text/css">
</style>
</head>
<body>
<div id="wrapper">
<!-- Begin Content -->
<div id="content">
<div id='coin-slider'>
<a href="" target="">
<img src='../portfoliopages/Funpets/splashpresliced.jpg' >
<span>
Description for img01
</span>
</a>
<a href="" target="">
<img src='../portfoliopages/Funpets/eggprespliced.jpg' >
<span>
Description for imgN
</span>
</a>
<a href="" target="">
<img src='../portfoliopages/Funpets/baby.jpg' >
<span>
Description for img01
</span>
</a>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 550,
height: 220,
spw: 7,
sph: 5,
delay: 3000,
sDelay: 30,
opacity: 0.7,
titleSpeed: 500,
effect: '',
navigation: true,
links : true,
hoverPause: true });
});
</script
</div>
</div>
<!-- End Content -->
</div>
</div>
<!-- Begin Footer --></div> </div>
<!-- End Footer -->
</body>
</html>
That means the jQuery variable $ is not defined. I guess you just copypasted without downloading jQuery.
This particular piece of code requires you to have downloaded jQuery, named the file jquery-1.4.2.js and locatde it in the same place as this file. You should get the coin-slider.min.js there as well. You can probably find it attached to the tutorial.
The error $ is not defined is typical when the page cannot find jQuery or jQuery is being referenced before it's loaded. In your instance jQuery is being loaded first so I'd assume your path to jQuery is wrong. Double check the path to jquery and that you can browse to the jquery JS file jquery-1.4.2.js
Make sure you have no 404 errors while loading the page. Enable FireBug in firefox and go the the Net setting, reload the page and check your http responses (Or any other Debugger/Inspect tool)
You can try replacing your script source to full URLs to test if your code is working :
For Jquery : http://workshop.rs/projects/coin-slider/jquery-1.4.2.min.js
For Coin Slider : http://workshop.rs/projects/coin-slider/coin-slider.min.js
I got the full urls from the Coin Slider example/demo page. You can open the links and download it to your local machine.