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.

View Replies:
core77 replied on at Permalink Reply
I'm loading jQuery 2.10 here:
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?
JohntheFish replied on at Permalink Reply
JohntheFish
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/...
core77 replied on at Permalink Reply
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...
Gauravwagh11 replied on at Permalink Reply
Nice one
SheldonB replied on at Permalink Reply
SheldonB
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/...
core77 replied on at Permalink Reply
The free template from radiantweb has no carousel...
core77 replied on at Permalink Reply
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.
thephilm replied on at Permalink Reply
thephilm
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.

<?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);


Note - you need to load the bootstrap3 css file in your header...
I'm not done with this, but needed something quick.