vishwamano

source of vishwamano.com
git clone git://git.ricketyspace.net/vishwamano.git
Log | Files | Refs

commit 6e273dbe64db9b313389d48c467e2d5038518597
parent ea33a6229f12f700370325ec71983d01e29a984e
Author: rsiddharth <rsiddharth@ninthfloor.org>
Date:   Mon, 17 Jun 2013 15:33:14 +0530

new file:   gallery/boilerplate.html

Diffstat:
gallery/boilerplate.html | 331+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 331 insertions(+), 0 deletions(-)

diff --git a/gallery/boilerplate.html b/gallery/boilerplate.html @@ -0,0 +1,331 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link href="/css/bootstrap.min.css" rel="stylesheet" media="screen"> + <link href="/css/bootstrap-lightbox.min.css" rel="stylesheet" media="screen"> + <link href="/css/custom.css" rel="stylesheet" media="screen"> + <title> Vishwa Manoharan Photography </title> +</head> +<body> + <div class="container-fluid"> + <div class="navbar navbar-inverse"> + <div class="navbar-inner"> + <a class="brand" href="#">Vishwa Manoharan Photography</a> + <ul class="nav"> + <li><a href="/">Home</a></li> + <li class="active"><a href="#"> Gallery </a></li> + <li><a href="/as/">Apertures & Shutters</a></li> + <li><a href="/bio/"> Bio </a></li> + <li><a href="#">Contact</a></li> + </ul> + </div> + </div> + </div> + +<!-- Fashion, Fauna, Flora, Landscapes, People, Still Life --> + +<div class="container-fluid"> <!-- start genre container --> + <!-- + Hey Vishwa, + + All the <a> elements, in the 'genre container' must be + edited. + + An <a> element looks like this: + + <a data-toggle="lightbox" href="#something"><img src="something.jpg" alt="[ Some Image ]"> </a> + + The `href', `src', `alt' attributes must be edited. + + Explanation: + + [1] href -> unique name that identifies the image + example: + href="#unique-name" + + [2] src -> name of the image + example: + src="image-file.jpg" + + [3] alt -> short description of image (four words max) + example + alt="[ Vaira at Beach ]" + + --> + <div class="row-fluid"> <!-- start First Row --> + + <div class="span6"> <!-- start Fashion --> + <p><span class="label label-inverse"> Fashion </span></p> + <div class="row-fluid"> <!-- Fashion row 1 --> + <div class="span4"> + <a data-toggle="lightbox" href="#fashion"><img src="fashion.jpg" alt="[ Fashion Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#fashion2"> <img src="fashion-2.jpg" alt="[ Fashion Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#fashion"> <img src="fashion.jpg" alt="[ Fashion Image ]"> </a> + </div> + </div> + + <div class="row-fluid"> <!-- Fashion row 2 --> + <div class="span4"> + <a data-toggle="lightbox" href="#fashion2"> <img src="fashion-2.jpg" alt="[ Fashion Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#fashion"> <img src="fashion.jpg" alt="[ Fashion Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#fashion2"> <img src="fashion-2.jpg" alt="[ Fashion Image ]"> </a> + </div> + </div> + <p class="text-center"><a href="#">more+</a> </p> + </div> <!-- end Fashion --> + + <div class="span6"> <!-- start Fauna --> + <p><span class="label label-inverse">Fauna</span></p> + <div class="row-fluid"> <!-- Fauna row 1 --> + <div class="span4"> + <a data-toggle="lightbox" href="#fauna"> <img src="fauna.jpg" alt="[ Fauna Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#fauna2"> <img src="fauna-2.jpg" alt="[ Fauna Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#fauna"> <img src="fauna.jpg" alt="[ Fauna Image ]"> </a> + </div> + </div> + + <div class="row-fluid"> <!-- Fauna row 2 --> + <div class="span4"> + <a data-toggle="lightbox" href="#fauna2"> <img src="fauna-2.jpg" alt="[ Fauna Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#fauna"> <img src="fauna.jpg" alt="[ Fauna Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#fauna2"> <img src="fauna-2.jpg" alt="[ Fauna Image ]"> </a> + </div> + </div> + <p class="text-center"><a href="#">more+</a> </p> + </div> <!-- end Fauna --> + </div> <!-- end First Row --> + + + + <div class="row-fluid"> <!-- start Second Row --> + <div class="span6"> <!-- start Flora --> + <p><span class="label label-inverse">Flora</span></p> + <div class="row-fluid"> <!-- Flora row 1 --> + <div class="span4"> + <a data-toggle="lightbox" href="#flora"> <img src="flora.jpg" alt="[ Flora Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#flora2"> <img src="flora-2.jpg" alt="[ Flora Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#flora"> <img src="flora.jpg" alt="[ Flora Image ]"> </a> + </div> + </div> + + <div class="row-fluid"> <!-- Flora row 2 --> + <div class="span4"> + <a data-toggle="lightbox" href="#flora2"> <img src="flora-2.jpg" alt="[ Flora Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#flora"> <img src="flora.jpg" alt="[ Flora Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#flora2"> <img src="flora-2.jpg" alt="[ Flora Image ]"> </a> + </div> + </div> + <p class="text-center"><a href="#">more+</a> </p> + </div> <!-- end Flora --> + + <div class="span6"> <!-- start Landscapes --> + <p><span class="label label-inverse">Landscapes</span></p> + <div class="row-fluid"> <!-- Landscapes row 1 --> + <div class="span4"> + <a data-toggle="lightbox" href="#landscape"> <img src="landscape.jpg" alt="[ Landscapes Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#landscape2"> <img src="landscape-2.jpg" alt="[ Landscapes Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#landscape"> <img src="landscape.jpg" alt="[ Landscapes Image ]"> </a> + </div> + </div> + + <div class="row-fluid"> <!-- Landscapes row 2 --> + <div class="span4"> + <a data-toggle="lightbox" href="#landscape2"> <img src="landscape-2.jpg" alt="[ Landscapes Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#landscape"> <img src="landscape.jpg" alt="[ Landscapes Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#landscape2"> <img src="landscape-2.jpg" alt="[ Landscapes Image ]"> </a> + </div> + </div> + <p class="text-center"><a href="#">more+</a> </p> + </div> <!-- end Landscapes --> + </div> <!-- end Second Row --> + + + + <div class="row-fluid"> <!-- start Third Row --> + <div class="span6"> <!-- start People --> + <p><span class="label label-inverse">People</span></p> + <div class="row-fluid"> <!-- People row 1 --> + <div class="span4"> + <a data-toggle="lightbox" href="#people"> <img src="people.jpg" alt="[ People Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#people2"> <img src="people-2.jpg" alt="[ People Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#people"> <img src="people.jpg" alt="[ People Image ]"> </a> + </div> + </div> + + <div class="row-fluid"> <!-- People row 2 --> + <div class="span4"> + <a data-toggle="lightbox" href="#people2"> <img src="people-2.jpg" alt="[ People Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#people"> <img src="people.jpg" alt="[ People Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#people2"> <img src="people-2.jpg" alt="[ People Image ]"> </a> + </div> + </div> + <p class="text-center"><a href="#">more+</a> </p> + </div> <!-- end People --> + + <div class="span6"> <!-- start Still Life --> + <p><span class="label label-inverse">Still Life</span></p> + <div class="row-fluid"> <!-- Still Life row 1 --> + <div class="span4"> + <a data-toggle="lightbox" href="#stilllife"> <img src="stilllife.jpg" alt="[ Still Life Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#stilllife2"> <img src="stilllife-2.jpg" alt="[ Still Life Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#stilllife"> <img src="stilllife.jpg" alt="[ Still Life Image ]"> </a> + </div> + </div> + + <div class="row-fluid"> <!-- Still Life row 2 --> + <div class="span4"> + <a data-toggle="lightbox" href="#stilllife2"> <img src="stilllife-2.jpg" alt="[ Still Life Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#stilllife"> <img src="stilllife.jpg" alt="[ Still Life Image ]"> </a> + </div> + <div class="span4"> + <a data-toggle="lightbox" href="#stilllife2"> <img src="stilllife-2.jpg" alt="[ Still Life Image ]"> </a> + </div> + </div> + <p class="text-center"><a href="#">more+</a> </p> + </div> <!-- end Still Life --> + </div> <!-- end Third Row --> + +</div> <!-- end of genre container --> + + +<!-- start of lightboxes for above images --> + +<div class="container"> + + <!-- + Hey Vishwa, + + A 'lightbox' is the in-screen window that pops up, to show the + larger version of the image, when you click it. + + So for each image in the gallery page, there must be a + corresponding `lightbox', to pop-up a larger version of the + image. + + Below, the section between `start lightbox' & `end lightbox' + constitutes the HTML mark-up for one lightbox. + + The `id' attribute on the <div> element, the `src' & `alt' + attributes on the <img> element must edit. + + Explanation: + + [1] id -> unique name for the image that was given in the + `href' attribute of <a> element in the above section for the + respective image. + + Example: + id="unique-name" + + if the `href' element of the <a>, for the respective image, in + the above section looked like: + + href="#unique-name" + + [2] src -> name of the image file + + Example: + + src="image-file.jpg" + + [3] alt -> short description of the image (4 words max) + + Example: + alt="[ Vaira at Beach ]" + + [4] The string "Description of the Image." between <p> & </p> + must be replaced with the description of the actual image. + + --> + + <!-- start lightbox --> + <div id="fashion" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true"> + <div class="lightbox-content"> + + <img src="fashion.jpg" alt="[ Fashion Image ]"> + <div class="lightbox-caption"> + <p> Description of the Image. </p> + </div> + </div> + </div> + <!-- end lightbox --> + + <!-- creat more lightboxes like the one above, as needed --> + + +</div> +<!-- end of lightboxes for above images --> + + <footer class="footer"> + <div class="container-fluid"> + <p> + <a rel="license" + href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_US"><img alt="Creative + Commons License" style="border-width:0" src="/img/cc-nc-nd.png" + /></a><br />Vishwa Manoharan Photography + by <a href="http://vishwamano.com/" + property="cc:attributionName" + rel="cc:attributionURL">Vishwa Manoharan</a> is licensed + under a <a rel="license" + href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_US">Creative + Commons Attribution-NonCommercial-NoDerivs 3.0 Unported + License</a>.<br />Permissions beyond the scope of this + license may be available + at <a href="http://vishwamano.com/" + rel="cc:morePermissions">vishwamano.com</a>. + </p> + </div> + </footer> + <script src="/js/jquery-1.10.0.min.js"></script> + <script src="/js/bootstrap.min.js"></script> + <script src="/js/bootstrap-lightbox.min.js"></script> +</body> +</html>