Real world example: photo gallery carousel

Author: agordon

lib/dancer_bootstrap_fontawesome_template.pm

@@ -8,6 +8,7 @@ use examples::simple_form;
 use examples::navbar_login;
 use examples::tabs;
 use examples::show_file;
+use examples::photo_carousel;
 
 our $VERSION = '0.1';
 

lib/examples/photo_carousel.pm

@@ -0,0 +1,52 @@
+package examples::photo_carousel;
+use Dancer ':syntax';
+use strict;
+use warnings;
+
+=pod
+Example of using Bootstrap's Photo-Carousel component.
+
+NOTE:
+  The images are stored in "./public/images/gallery",
+  which is available as "[% request.uri_base %]/images/gallery/" URL.
+  If you put them in a different location, modify the template accordingly.
+=cut
+
+my @photos = (
+	{
+		file => "cshl13.jpg",
+		caption => "Fall",
+		text => "View from accross Cold Spring Harbor",
+	},
+	{
+		file => "cshl12.jpg",
+		caption => "Fall",
+		text => "Cold Spring Harbor Campus",
+	},
+	{
+		file => "cshl11.jpg",
+		caption => "Winter",
+		text => "View of the Cold Spring (frozen) harbor",
+	},
+	{
+		file => "cshl3.jpg",
+		caption => "Summer Dusk",
+		text => "Cold Spring Harbor",
+	},
+	{
+		file => "cshl6.jpg",
+		caption => "Spring",
+		text => "Cold Spring Harbor Campus",
+	},
+	{
+		file => "cshl8.jpg",
+		caption => "Onley House",
+		text => "Cold Spring Harbor Campus",
+	},
+);
+
+get '/photo_carousel' => sub {
+	template 'examples/photo_carousel', { photos => \@photos };
+};
+
+true;

public/images/gallery/cshl11.jpg

@@ -0,0 +1,76 @@
+<!-- BootStrap NavBar -->
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="container">
+	<h3><a class="brand" href="[% request.uri_base %]"><img src="images/dancer_man.png"> Perl Dancer</a></h3>
+    </div>
+  </div>
+</div>
+
+<div class="container">
+
+<div class="page-header">
+	<div class="row">
+		<div class="span12">
+			<h2>Dancer + Bootstrap Exapmles<//h2>
+			<h1>Photo Gallery - Carousel</h1>
+		</div>
+	</div>
+</div>
+
+<div class="row">
+	<div class="span12">
+	Example of using <a target="_blank" href="http://twitter.github.com/bootstrap/javascript.html#carousel">Bootstrap's Carousel</a> with Dancer.
+	<br/>
+	<br/>
+	<br/>
+
+	<h3>Code Highlights</h3>
+	<ul>
+		<li>The Dancer code is in
+                    <a href="[% request.uri_for("/show_file",file => "photo_carousel.pm", example => "photo carousel", url => request.uri_for("/photo_carousel") ) %]">
+                    <code>./lib/examples/phot_carousel.pm</code> <i class="icon-eye-open"></i> </a>.
+                </li>
+
+		<li>This HTML tempate is in
+                    <a href="[% request.uri_for("/show_file",file => "photo_carousel.tt", example => "photo carousel", url => request.uri_for("/photo_carousel") ) %]">
+                    <code>./views/examples/photo_carousel.tt</code> <i class="icon-eye-open"></i> </a>.
+                </li>
+		<li>The photos to display are degined in the <code>@photos</code> variable in the Dancer module.</li>
+	</ul>
+
+	</div>
+</div>
+
+<br/>
+<br/>
+
+[%#################################
+   Photo Carousel Example Starts Here
+#################################%]
+
+<div class="row">
+<h2>Example Photo Carousel</h2>
+<p>Enjoy the show!</p>
+
+<div style="max-width: 800px;" class="carousel slide" id="dancing_carousel">
+
+	<div class="carousel-inner">
+	[%### loop over the "photos" list, and create HTML for each photo %]
+	[% FOREACH photo IN photos %]
+		<div class="item [% IF loop.index==0 %]active[% END %]">
+			<img src="[% request.uri_base %]/images/gallery/[% photo.file %]"
+				alt="[% photo.caption | html %]" />
+			<div class="carousel-caption">
+				<h4>[% photo.caption | html %]</h4>
+				<p>[% photo.text | html %]</p>
+			</div>
+		</div>
+	[% END %]
+	</div>
+
+	<!-- Carousel's Next/Prev buttons -->
+	<a class="left carousel-control" href="#dancing_carousel" data-slide="prev">&lsaquo;</a>
+        <a class="right carousel-control" href="#dancing_carousel" data-slide="next">&rsaquo;</a>
+</div>
+</div>

public/images/gallery/cshl12.jpg

@@ -88,6 +88,7 @@
 			<li><a href="[% request.uri_for("/simple_form")%]">Simple &lt;FORM&gt; processing</a></li>
 			<li><a href="[% request.uri_for("/navbar_login")%]">Login form embedded in a NavBar</a></li>
 			<li><a href="[% request.uri_for("/tabs")%]">Tabs/Pills</a></li>
+			<li><a href="[% request.uri_for("/photo_carousel")%]">Photo Gallery Carousel</a></li>
 		</ul>
 	</div>
 </div>