I cannot get Bootstrap Carousel to start, um, carousel-ing. Below is all the code that is involved with what I'm trying to do. When it renders in the browser, all I see are two images, one above the other, and a less-than and greater-than beneath them. It's just rendering the DIVs as defined by the HTML as opposed to rendering in a Carousel. I verified that the jQuery.ready function is being called, and is calling the code to initialize the carousel. I also tried this on multiple browsers - IE9, Chrome, and Firefox. I'm running out of ideas. Any help would be appreciated. Thanks!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link type="text/css" href="styles/carousel.css" />
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-transition.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-carousel.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
$('#carousel').carousel();
});
</script>
<div id="carousel" class="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/APM_icon_big.png" alt="Some Alt Text" />
<div class="carousel-caption">
Some caption
</div>
</div>
<div class="item">
<img src="images/appdev_icon_big.png" alt="Some Alt Text" />
<div class="carousel-caption">
Some caption
</div>
</div>
…
</div>
<a class="carousel-control left" href="#carousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel" data-slide="next">›</a>
</div>
</body>
</html>
It seems to be working just fine in this fiddle
Be sure to include the styles defined by bootstrap for the carousel : the css included in the fiddle comes from the twitter-bootstrap custom download page selecting only the JS components > Carousel.
It might not hurt to put your <script> inside the <head> or at the end of your page.
I figured it out. I was missing a rel="stylesheet" in my LINK tag!
Related
Link to jQuery plugin github and documentation
It is the exact same code, the only difference being that I link to several sources/external files instead of just throwing them all into one big file like on jsfiddle. But I get no error in the browser console, everything is linked properly.
It image lightbox works, the video light almost works, I just get a black blank empty light when clicking on the video link. When clicked this gets added to the HTML, but the HTML is empty inside the iframe. But on jsfiddle it is not.
<iframe class="lg-video-object lg-youtube " src="//www.youtube.com/embed/VXEkoXgb4bI?wmode=opaque&autoplay=1&enablejsapi=1" allowfullscreen="" height="315" frameborder="0" width="560">
#document
<html>
<head></head>
<body></body>
</html>
</iframe>
I've been over and over this, and I can't even come up with one reason why it happens, I've tested in Firefox, Chrome and even IE. And since it works on jsfiddle in Firefox, so it can't really be the browser.
Any help is really appreciated, I'm so in the woods. I'm hoping it is just something really simple that I can't see because I've stared at intensely for hours.
Thanks.
Link to jsfiddle: http://jsfiddle.net/vtkv4j2h/5/
Link to the local files: https://mega.nz/#F!4QhXhQaY!vaIMGXqYSzJf8s8qkVouqg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Why doesn't this work, when it works on jsfiddle</title>
<link rel="stylesheet" href="lightgallery.min.css" media="screen" title="lightgallery">
</head>
<body>
<div id="lightgallery">
<a href="https://dummyimage.com/1200x700/000/fff.jpg">
<img src="https://dummyimage.com/300x200/000/fff.jpg" />
</a>
<a href="https://dummyimage.com/1200x700/d40fd4/0011ff.jpg">
<img src="https://dummyimage.com/300x200/d40fd4/0011ff.jpg.jpg" />
</a>
<a href="https://dummyimage.com/1200x700/44d613/0011ff.jpg">
<img src="https://dummyimage.com/300x200/44d613/0011ff.jpg" />
</a>
<a href="https://dummyimage.com/1200x700/1ff068/0011ff.jpg">
<img src="https://dummyimage.com/300x200/1ff068/0011ff.jpg" />
</a>
<a href="https://dummyimage.com/1200x700/5e6063/0011ff.jpg">
<img src="https://dummyimage.com/300x200/5e6063/0011ff.jpg" />
</a>
<a href="https://www.youtube.com/watch?v=VXEkoXgb4bI" data-poster="https://dummyimage.com/1200x700/fc1241/313de6.jpg&text=click-to-play">
<img src="https://dummyimage.com/300x200/fc1241/313de6.jpg&text=Video1"/>
</a>
<a href="https://www.youtube.com/watch?v=VkzVgiYUEIM" data-poster="https://dummyimage.com/1200x700/73f00c/313de6.jpg&text=click-to-play">
<img src="https://dummyimage.com/300x200/73f00c/313de6.jpg&text=Video2"/>
</a>
<a href="https://www.youtube.com/watch?v=7BWWWQzTpNU" data-poster="https://dummyimage.com/1200x700/f7ff00/313de6.jpg&text=click-to-play">
<img src="https://dummyimage.com/300x200/f7ff00/313de6.jpg&text=Video3"/>
</a>
</div>
<script src="jquery.js" charset="utf-8"></script> <!-- jQuery v3.1.0 -->
<script src="lightgallery.min.js" charset="utf-8"></script>
<script src="lg-video.min.js" charset="utf-8"></script>
<script src="js.js" charset="utf-8"></script>
</body>
</html>
js.js
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
Thank you all for help and suggestions.
#Novice was right.
Are you sure using a web-server to access if your url shows something
like this file:/// rather than http:// then its a problem
Switching to a properly virtual box solved the issue.
How I can to use lightbox 2 options? How to include in document? It does not work as specified on the site http://lokeshdhakar.com/projects/lightbox2/#options
<script>
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
})
</script>
<a class="example-image-link" data-lightbox="example-set" href="pic.png">
<img style="width: 100%" src="pic.png">
</a>
How do you set the lightbox options?
Make sure you are including both the lightbox.js AND lightbox.css stylesheet.
You will also need jQuery 1.7 or greater (as stated in step 4 of the Getting Started section of the Lightbox website). You should include the jQuery script before the lightbox script.
This setup worked for me:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" />
<script src="jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js"></script>
</head>
<body>
<a class="example-image-link" data-lightbox="example-set" href="pic.png">
<img style="width: 100%" src="pic.png">
</a>
<script>
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
})
</script>
</body>
</html>
I've been searching around and trying to find an answer to Blueimp not working...
This is heavily frustrating, and this is a school team website, and I kind of want it done very soon.
Here is the snippet of my code:
<!-- Images -->
<div id="links">
<a href="1.jpg" title="Banana">
<img src="1.jpg" alt="Banana">
</a>
<a href="2.jpg" title="Apple">
<img src="2.jpg" alt="Apple">
</a>
</div>
<!-- Photo Gallery Courtesy of Blueimp -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<script type="text/javascript">document.getElementById("links").onclick=function(e){e=e||window.event;var t=e.target||e.srcElement,n=t.src?t.parentNode:t,r={index:n,event:e},i=this.getElementsByTagName("a");blueimp.Gallery(i,r)}</script>
These are the references in my head section:
<!-- Styles -->
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/styles.css" />
<link rel="stylesheet" href="/css/animate.css" />
<link rel="stylesheet" href="/css/blueimp-gallery.min.css" />
<link rel="stylesheet" href="/css/bootstrap-image-gallery.min.css" />
These are the JS references at the bottom of the document:
<!-- JS at bottom for faster load -->
<script type="text/javascript" src="/scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/scripts/menu_jquery.js"></script>
<script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.nicescroll.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.blueimp-gallery.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-image-gallery.min.js"></script>
It would be very kind if someone could tell me what is wrong? Personally, the documentation seems very vague, and this seems like a great product. I will now describe what I'm getting.
I'm getting the images, all right, but they aren't resized and quite large... It looks nothing like a gallery. I can click on the images, however, it just darkens the page like it's supposed to but no image gallery sliding fancy stuff.
So, is there a better gallery system or better tutorials, maybe even better, someone who can teach me exactly how to do this?
Much appreciated!
include atribute data-gallery in a
Example:
<div id="links">
<a href="1.jpg" title="Banana" data-gallery>
<img src="1.jpg" alt="Banana">
</a>
<a href="2.jpg" title="Apple" data-gallery>
<img src="2.jpg" alt="Apple">
</a>
</div>
My overall intention is to over-ride the .click function of an element with a certain id, so that a button will replace only the contents of a specific element (not the whole page).
I am under the impression that I am running into trouble when embedding the script file, or in some of the coding in the script file.
I have come to this conclusion due to the fact that when my HTML and JS files are pasted into their respective windows on JSFiddle.net, that it works.
However, when I try to run the file from localhost, it is as though my .js file is not over-riding the .click function.
Any help is appreciated.
<!DOCTYPE html>
<html>
<head>
<title>NoteVote</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="./NV_home.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="./scripts/navScript.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<!-- COURSES page -->
<div data-role="page" id="noteVote">
<div data-role="header" align="middle" class="header">
<img src="./images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
<!-- This is the Navbar -->
<div data-role="navbar" data-grid="c" id="navBar">
<ul>
<li><a class="ui-btn" id="coursesButton">Courses</a></li>
<li><a class="ui-btn" id="searchButton">Search</a></li>
<li><a class="ui-btn" id="submitButton">Submit</a></li>
<li><a class="ui-btn" id="accountButton">Account</a></li>
</ul>
</div>
</div>
<!-- This is the MAIN section -->
<div data-role="content" class="ui-content" id="coursesContent">
Main section
</div>
<!-- FOOTER -->
<div data-role="footer" class="footer">
SomeText
</div>
</div>
<!-- /COURSES -->
<!-- SEARCH -->
<div data-role="page" id="search">
<!-- This is the MAIN section -->
<div data-role="content" class="ui-content" id="searchContent">
<h1>Search Section</h1>
</div>
</div>
</body>
</html>
I believe I have linked the scripts in the correct order: JQuery, my_custom, JQuery Mobile.
So is it in my custom script that there is the error?
$("#searchButton").click( function() {
$('#coursesContent').html( $('#searchContent').html() )
});
If there is a better/easier way to do this, please let me know.
I have searched the internet for solutions, and I found that the order in which the scripts are loaded is important. I also tried inserting my script code inside a "$(document).bind("mobileinit", function(){ " function, which did not yield the results I'd hoped for.
I'm obviously quite new to JavaScript, and JQuery.
Thanks for your help, people.
You're right - order of the script is important (all lib's have to be loaded before you can refer to them).
You may use alternative javascript for this purpouse:
$(document).ready(function()
{
$(document).on("click","#searchButton",function(e)
{
e.preventDefault();
alert('And now what? Click will not take me anywhere...');
$('#coursesContent').html($('#searchContent').html());
});
});
Try to put this code at the bottom of the page (before </body>) and check browsers console for any other JS errors.
This is working example: http://jsfiddle.net/3Qaq7/1/
I'm trying to implement the Twitter Bootstrap carousel, and so far I've been unsuccessful. I have the following page:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Fluxware: Play, learn and build games</title>
<meta name="description" content="Home page for Fluxware">
<meta name="author" content="Tim Butram">
<!-- CSS Stylesheets -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<!--For shitty webbrowsers -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/sbn/trunk/html5.js></script>
<![endif]-->
<!-- Favicon -->
<link rel="favicon" href="images/favicon.ico">
</head>
<body>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Play</li>
<li>Learn</li>
<li>Build</li>
</ul>
</div>
</div>
</div>
<!-- Grid -->
<div class="container">
<div class="row">
<div class="span12">
<div class="hero-unit">
<div id="myCarousel" class="carousel">
<div class="carousel-inner">
<div class="active item"><img src="/images/1.png" /></div>
<div class="item"><img src="./images/2.png" /></div>
<div class="item"><img src="./images/3.png" /></div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="row">
<div class="span4">
<a class="btn btn-large">Play</a>
<p>Play games created with Fluxware.</p>
</div>
<div class="span4">
<a class="btn btn-large">Learn</a>
<p>Learn how to create games and game assets</p>
</div>
<div class="span4">
<a class="btn btn-large">Build</a>
<p>Use the Fluxware tools to create game.</p>
</div>
</div>
</div>
</div>
</div>
<script src="../bootstrap/js/jquery.js"></script>
<script src="../bootstrap/js/bootstrap-carousel.js"></script>
<script src="../bootstrap/js/bootstrap-transition.js"></script>
</body>
</html>
And everything seems to render correctly, except for the carousel. From reading the Bootstrap page, it appears that I need to stick a
$('.myCarousel').carousel();
somewhere, but I have no clue as to where, how or why. In addition to that, in the Firefox error console, I get the two errors
$ is undefined
in bootstrap-carousel.js [line 125] and
$ is not a function
in bootstrap-transition.js [line 22]
Clearly jQuery wasn't loaded correctly.
Try loading the two scripts in the page <head>.
The code to run the carousel is
<script>
// Load this when the DOM is ready
$(function(){
// You used .myCarousel here.
// That's the class selector not the id selector,
// which is #myCarousel
$('#myCarousel').carousel();
});
</script>
You can put it either in the <head> after the two other scripts
or where the other scripts are now.
Had the same problem.
For me i had to use jQuery 1.7.1 , as 1.6.4 didn't work.
i had to include bootstrap-transition
Recently had the same problem, it seems in the current version of Bootstrap, you must also include a class called slide.
<div id="myCarousel" class="carousel slide span12">
You defined as id not a class , So you should start carousel by this code of jquery , so replace
$('#myCarousel').carousel();
instead of
$('.myCarousel').carousel();
I was using Django's JQuery (I don't know the version) and it was not working.
However, it works with Jquery 1.7.1.
If you're struggling getting a Bootstrap carousel slideshow to work --
Here's a template with positionable controls, and a progress navbar at the bottom that tracks the slides.
[http://codepen.io/TheNickelDime/][1]
<div class="Slideshow_carousel-wrapper container-fluid">
<span class="Slideshow-ctl-L" onclick="carousel_left()"></span>
<div class="carousel slide" data-ride="carousel" ... </div>
<span class="Slideshow-ctl-R" onclick="carousel_right()"></span>
</div>
<div class="container-fluid Slideshow_progress-bar">
<ul id="slideshow_progress" class="Slideshow_progress"></ul>
</div>