I am trying to initialize the jQuery bxSlider but for some reason, even adding the same resources as shown on the website examples I can't intialize the plugin.
$(document).ready(function() {
$('.bxslider').bxSlider({
mode: 'fade',
captions: true
});
});
What am I doing wrong?
JSFiddle: https://jsfiddle.net/rcymj0s0/2/
Use this cdn path it will work.
$('.bxslider').bxSlider({
captions: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css">
<div id="slider-section">
<ul class="bxslider">
<li><img src="http://media.voog.com/0000/0039/0203/photos/icon.png" /></li>
<li><img src="http://media.voog.com/0000/0039/0203/photos/icon.png" /></li>
</ul>
</div>
You're creating your own build of jQuery in /javascripts/application.js. This is after you have already included jQuery earlier in the DOM and tried to add the bxSlider plugin. To fix the issue, include the bxSlider javascript after the line that has the following:
<script src="/javascripts/application.js"></script>
The result will be the following (remember to remove the original bxSlider script tag before making this change)
<script src="/javascripts/application.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.js"></script>
Related
I believe this question has been asked multiple times and I have researched many other articles but I'm afraid I'm at a complete impasse...
I am trying to make a very basic flexslider but it simply does not seem to want to work for me. The images appear as lists, so the HTML and the image links would seem to be Ok. This leads me to believe I have missed something in the JS.
Would anybody be able to advise me?
Many Thanks in advance.
Ryan
<!DOCTYPE html>
<html>
<head>
<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
</head>
<body>
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="../lachantongeimg/group.jpg" alt=""/>
</li>
<li>
<img src="../lachantongeimg/howtojoin.jpg" alt=""/>
</li>
<li>
<img src="../lachantongeimg/playmusic.jpg" alt=""/>
</li>
</ul>
</div>
</body>
</html>
If your photos appear like a list, must be the CSS file. Make sure the file exist or fix your path.
The only difference that I found with the official documentation is the option to animate:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
here there is a basic example working exactly as you have:
https://jsbin.com/jicodadace/2/edit?html,console,output
First of all I'm a newbie at Javascript/JQuery
I'm trying to make a bxslider. I'm not being able to work with it, I did all the steps from bxslider website and still can't, been searching and nothing. Instead of working, it's just working as a normal ul, showing all photos vertically.
The libraries
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script language="javascript" src="css/libraries/jqueryBxslider/jquery.bxslider.js" ></script>
<!-- bxSlider CSS file -->
<link href="css/libraries/jqueryBxslider/jquery.bxslider.css" rel="stylesheet" type="javascript">
The ul that contains the photos.
<div class="container">
<ul id="slider">
<li><img src="css/libraries/images/test1.PNG"/></li>
<li><img src="css/libraries/images/test2.PNG"/></li>
</ul>
</div>
Code at my javascript file.
$(document).ready(function() {
$('#slider').bxSlider({
auto: true,
autoControls: true
});
});
Thank you.
When testing locally, you need to use a full URL (including protocol) in any libraries you link to that use protocol-relative URLs (e.g. src="//ajax.googleapis.com).
Change:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
to:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Otherwise the browser's default behavior is to use the file:// protocol to search your local file system for jQuery.
firstly, make sure your bxslider libraries path src on <script></script> and href on <link>is correct.
and then change this line :
<link href="css/libraries/jqueryBxslider/jquery.bxslider.css" rel="stylesheet" type="javascript">
to
<link href="css/libraries/jqueryBxslider/jquery.bxslider.css" rel="stylesheet">
without type="javascript" because the type is CSS.
So the answer was to make a before the where it contained the JQuery code.
I am using jquery 1.10.2 to include a slider on my website, but for some reason it is not showing up. Please help!
Here is my code:
<head>
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script src="js/jquery-1.10.2.js"></script>
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'>
<script>
$(document).ready(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
Why is it not showing up? Code seems to be correct.
The JQUERY UI library also requires the standard JQUERY Library.
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="ASHLEYSIMONE/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="ASHLEYSIMONE/lib/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>
I've checked others users answers regarding this issue but I still can't figure it out. I have no idea what I'm doing wrong. Please help. This part is preventing me from finishing my site.
Try specifying to http:// for your first library.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
I want to create a book style page turn effect on some images so I decided to use the JQuery plugin, JFlip. The plugin seems to be doing what it is supposed to do except display the image. I have checked the Network tab and the images are being loaded. Also, I can see the Canvas element JFlip has created but it is just a blank space.
I have some code:
<ul id="g1">
<li>
<img src="img/proforma.jpg">
</li>
<li>
<img src="img/proforma2.jpg">
</li>
</ul>
And some javascript:
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.jFlip.js"></script>
<script type="text/javascript">
$("#g1").jFlip(700,230,{background:"green",cornersTop:false});
</script>
It does work, just the plugins are a bit old. See my code below :
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<!--[if IE]><script type="text/javascript" src="http://www.jquery.info/scripts/jFlip/excanvasX.js"></script><![endif]-->
<script src="http://www.jquery.info/scripts/jFlip/jquery.jflip-0.3.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul id="g1">
<li>
<img src="http://keith-wood.name/img/calendar.gif">
</li>
<li>
<img src="http://keith-wood.name/img/calendar.gif">
</li>
</ul>
</body>
</html>
JS:
$("#g1").jFlip(700,230,{background:"green",cornersTop:false});
See the full solution here : http://jsbin.com/iqaran/1/edit . Remember to run with js in jsbin
Cheers !
Turns out that script is so old (2008), you need to include the jQuery migrate script.
JSFiddle
Scripts
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.jFlip.js"></script>
HTML
<ul id="g1">
<li>
<img src="http://placehold.it/300x300"/>
</li>
<li>
<img src="http://placehold.it/300x300" />
</li>
</ul>
Also make sure to wrap your executing code in a document.ready so the images get the change to render.
JS
<script>
$(document).ready(function() {
$("#g1").jFlip(700,230,{background:"green",cornersTop:false});
});
</script>