Using Twitter Bootstrap Carousel as custom template
Permalink 1 user found helpful
Hi,
I'm trying to use the twitter bootstrap carousel as a custom template for the core slideshow block (http://getbootstrap.com/javascript/#carousel).
In the directory
/packages/c5f5boilerplate/blocks/slideshow/templates/bootstrap-carousel
there are the files
view.php
view.css
view.js
But the images get stacked and don't slide because there's a javascript error in the console:
"Uncaught ReferenceError: jQuery is not defined"
Although I'm loading jQuery 2.10.
What can I do to make this working? Thanks.
I'm trying to use the twitter bootstrap carousel as a custom template for the core slideshow block (http://getbootstrap.com/javascript/#carousel).
In the directory
/packages/c5f5boilerplate/blocks/slideshow/templates/bootstrap-carousel
there are the files
view.php
view.css
view.js
But the images get stacked and don't slide because there's a javascript error in the console:
"Uncaught ReferenceError: jQuery is not defined"
Although I'm loading jQuery 2.10.
What can I do to make this working? Thanks.
c5 will load always jQuery 1.7.2. So your error is caused by loading a second copy of jQuery.
If the carousel won't work with 1.7.2, then you will need to modify the bootstrap code.
Hostco has Bootstrap Carousel in the marketplace. For $20 it may not be worth the effort of developing your own code.
http://www.concrete5.org/marketplace/addons/bootstrap-carousel/...
If the carousel won't work with 1.7.2, then you will need to modify the bootstrap code.
Hostco has Bootstrap Carousel in the marketplace. For $20 it may not be worth the effort of developing your own code.
http://www.concrete5.org/marketplace/addons/bootstrap-carousel/...
It's not the money. I want to understand what's happening.
I load the concrete5 version of jQuery only for registered users, I mean not for visitors:
https://github.com/vl-ad/c5f5boilerplate/blob/master/elements/header...
I load the concrete5 version of jQuery only for registered users, I mean not for visitors:
https://github.com/vl-ad/c5f5boilerplate/blob/master/elements/header...
Nice one
radiant web put up a pretty clean basic templet that works in c5
(maybe what they did could help you)
http://goradiantweb.com/blog/design/free-basic-bootstrap-theme/...
(maybe what they did could help you)
http://goradiantweb.com/blog/design/free-basic-bootstrap-theme/...
The free template from radiantweb has no carousel...
The same "jQuery is not defined" happens when I use 'slick carousel'
http://kenwheeler.github.io/slick/...
I also tried to load jQuery 2.10 in <head> But that didn't work, too.
http://kenwheeler.github.io/slick/...
I also tried to load jQuery 2.10 in <head> But that didn't work, too.
I just wrapped up modifying the standard slideshow's view to a custom template using bootstrap3.
I conditionally load jquery UI in my footer (right after the footer_required tag), then load up the bootstrap js.
Here's the code for the template (/blocks/slideshow/templates/bootstrap_slider.php)
Note - you need to load the bootstrap3 css file in your header...
I'm not done with this, but needed something quick.
I conditionally load jquery UI in my footer (right after the footer_required tag), then load up the bootstrap js.
<?php if (!$c->isEditMode()) { ?><script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script><?php } ?> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>--> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="<?php echo $this->getThemePath(); ?>/js/bootstrap.min.js"></script>
Here's the code for the template (/blocks/slideshow/templates/bootstrap_slider.php)
<?php defined('C5_EXECUTE') or die("Access Denied."); ?> <div class="carousel-wrapper"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <?php $notFirst=1; foreach($images as $imgInfo) { $f = File::getByID($imgInfo['fID']); $fp = new Permissions($f);
Viewing 15 lines of 39 lines. View entire code block.
Note - you need to load the bootstrap3 css file in your header...
I'm not done with this, but needed something quick.
https://github.com/vl-ad/c5f5boilerplate/blob/master/themes/c5f5boil...
Renamed the original bootstrap.min.css to view.css, and carousel.js to view.js.
Have you an idea why it doesn't work?