Hi,
I've been playing around with MODX for a few days now and am very tempted to switch from Drupal. Letting a designer go nuts with just HTML and CSS would be fantastic.
Anyway, I seem to be missing something. I'm using the bootstrap theme and am unable to get the image gallery to work for some reason.
The only reference I have found to it working with MODX is down the bottom at
http://shorewalker.com/site-building/modx/modx-with-bootstrap.html
There's an example of it working nicely at
http://shorewalker.com/culture-and-tech/photographing-wilsons-promontory.html and I've checked the source and I've got MODX spitting out the same kind of thing yet it simply opens the image instead of using the modal dialogue. There's obviously a step I'm missing but I can't find any documentation as to what it might be.
Here's a reduced version of the page:
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="assets/components/gallery/packages/galleriffic20/js/jquery-1.3.2.js"></script>
<script src="/assets/components/themebootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/assets/components/themebootstrap/js/main.js" type="text/javascript"></script>
<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
<script src="/assets/components/themebootstrap/js/bootstrap-image-gallery.min.js"></script>
<!-- Here you can change your default template: just add the name of the folder where others template are,
for example: href="/assets/components/themebootstrap/css/cerulean/bootstrap.min.css" - cerulean template. -->
<link href="/assets/components/themebootstrap/css/cerulean/bootstrap.min.css" rel="stylesheet">
<link href="/assets/components/themebootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="/assets/components/themebootstrap/css/main.css" rel="stylesheet">
<!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-ie6.min.css"><![endif]-->
<link rel="stylesheet" href="css/bootstrap-image-gallery.min.css">
</head>
<body>
<div class="container">
<div id="content" class="main">
<p>Here is the content..</p>
<div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery">
<a title="Banana" href="/assets/gallery/1/banana.jpg" rel="gallery">Banana</a>
<a title="Apple" href="/assets/gallery/1/apple.jpg" rel="gallery">Apple</a>
</div>
</div>
<!-- modal-gallery is the modal dialog used for the image gallery -->
<div id="modal-gallery" class="modal modal-gallery hide fade" tabindex="-1">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body"><div class="modal-image"></div></div>
<div class="modal-footer">
<a class="btn btn-primary modal-next">Next <i class="icon-arrow-right icon-white"></i></a>
<a class="btn btn-info modal-prev"><i class="icon-arrow-left icon-white"></i> Previous</a>
<a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000"><i class="icon-play icon-white"></i> Slideshow</a>
<a class="btn modal-download" target="_blank"><i class="icon-download"></i> Download</a>
</div>
</div>
</body>
</html>
Does anything stand out as blaringly obvious?
Thanks in advance,
Muzz
☆ A M B ☆
