Hi Susan:
Spent some time with this yesterday. Fotorama is working pretty well for me. Have not set it up within Foundation 5 or MODx yet, but getting there. Had to play around with the options. Still playing and learning though. I inserted some code I used below in case you're interested. Working today on applying links to each image. I tested links on images briefly yesterday, and it seemed as though if linking is going to be done, it needed to be on all images.
http://fotorama.io
<!DOCTYPE html>
<head>
<title>fotorama testing</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Fotorama -->
<link href="/fotorama_testing/fotorama.css" rel="stylesheet">
<style type="text/css">
body {
margin: 0;
}
.contentsection {
width: 1000px;
margin: 0 auto;
padding: 40px 60px;
}
h1 {
color: #868383;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 2em;
font-weight: normal;
letter-spacing: 0.1em;
line-height: 1.5;
text-align: center;
}
</style>
<script type="text/javascript" src="/fotorama_testing/fotorama.js"></script>
</head>
<body>
<!-- Fotorama -->
<!--<div class="fotorama" data-allowfullscreen="native" data-width="100%">-->
<div class="fotorama"
data-autoplay="true"
data-width="100%"
data-height="100%"
data-fit="cover"
data-nav="none">
<img src="/fotorama_testing/testimage_01.jpg"/>
<img src="/fotorama_testing/testimage_02.jpg"/>
<img src="/fotorama_testing/testimage_03.jpg"/>
</div>
<div class="contentsection">
<h1>PUT OTHER CONTENT DOWN HERE</h1>
</div>
</body>
</html>
Below is how I structured for links on images.
<div class="fotorama"
data-autoplay="true"
data-width="100%"
data-height="100%"
data-fit="cover"
data-nav="none">
<div data-img="/fotorama_testing/testimage_01.jpg"><a href="http://www.google.com"></a></div>
<div data-img="/fotorama_testing/testimage_02.jpg"><a href="http://www.google.com"></a></div>
<div data-img="/fotorama_testing/testimage_03.jpg"><a href="http://www.google.com"></a></div>
</div>
☆ A M B ☆