Style Guide
All the goodies you need to know about
Background Colors
.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-inverse
Headers/Copy
H1 Followed by p Tag
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
H2 Followed by p Tag
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
H3 Followed by p Tag
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
H4 Followed by p Tag
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
H5 Followed by p Tag
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
H6 Followed by p Tag
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Full Width Banner Image
Utilizing Background Images only
Size is 1600x550 and it crops in from sides. Copy is align center.
Primary View Code
Left Banner
<div class="bg33-md bg40-sm bg-half-xs dark-boxshadow" style="background-image:url('https://placehold.co/1600x550');">
<!--need to inline the image as a bg-img -->
<!-- many different ratios to choose from-->
<!-- need this div to left/center/right copy-->
<div class="left-pos">
<h1>Full Width Banner Image</h1>
<p>Size is 1600x550 and it crops in from sides. Copy is align center.</p>
<a href="" class="btn btn-primary action-link" type="button">Primary</a>
</div>
<!-- end need this div to left/center/right copy-->
</div>
Centered banner
<div class="bg33-md bg40-sm bg-half-xs dark-boxshadow" style="background-image:url('https://placehold.co/1600x550');">
<!--need to inline the image as a bg-img -->
<!-- many different ratios to choose from-->
<!-- need this div to left/center/right copy-->
<div class="center-pos">
<h1>Full Width Banner Image</h1>
<p>Size is 1600x550 and it crops in from sides. Copy is align center.</p>
<a href="" class="btn btn-primary action-link" type="button">Primary</a>
</div>
<!-- end need this div to left/center/right copy-->
</div>
Right Banner
<div class="bg33-md bg40-sm bg-half-xs dark-boxshadow" style="background-image:url('https://placehold.co/1600x550');">
<!--need to inline the image as a bg-img -->
<!-- many different ratios to choose from-->
<!-- need this div to left/center/right copy-->
<div class="right-pos">
<h1>Full Width Banner Image</h1>
<p>Size is 1600x550 and it crops in from sides. Copy is align center.</p>
<a href="" class="btn btn-primary action-link" type="button">Primary</a>
</div>
<!-- end need this div to left/center/right copy-->
</div>
Banners not Using Bg-imgs
Can easily control images for different viewports - utilizing lazysizes (see documentation towards bottom of styleguide)
View Code
Left Banner
<div style="position:relative">
<picture>
<!--[if IE 9]><video style="display: none;><![endif]-->
<source data-srcset="http://placehold.it/500x600/11e87f/fff&text=SM(500w)" media="sm" />
<source data-srcset="http://placehold.it/900x600&text=MD(900w)" media="md" />
<source data-srcset="http://placehold.it/1200x600/e8117f/fff&text=LG(1200w)" media="lg" />
<source data-srcset="http://placehold.it/1600x900/117fe8/fff&text=XL(1600w)" />
<!--[if IE 9]></video><![endif]-->
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://placehold.it/1400x600/e8117f/fff" class="lazyload" alt="Lazy Sizes" width="100%" />
</picture>
<div class="boxed-copy-left">
<div class="left">
<h1>Title</h1>
<p>Paragraph tag for shits and giggles</p>
</div>
</div>
</div>Centered banner
<div style="position:relative">
<picture>
<!--[if IE 9]><video style="display: none;><![endif]-->
<source data-srcset="http://placehold.it/500x600/11e87f/fff&text=SM(500w)" media="sm" />
<source data-srcset="http://placehold.it/900x600&text=MD(900w)" media="md" />
<source data-srcset="http://placehold.it/1200x600/e8117f/fff&text=LG(1200w)" media="lg" />
<source data-srcset="http://placehold.it/1600x900/117fe8/fff&text=XL(1600w)" />
<!--[if IE 9]></video><![endif]-->
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://placehold.it/1400x600/e8117f/fff" class="lazyload" alt="Lazy Sizes" width="100%" />
</picture>
<div class="boxed-copy-center">
<div class="center">
<h1>Title</h1>
<p>Paragraph tag for shits and giggles</p>
</div>
</div>
</div>Right Banner
<div style="position:relative">
<picture>
<!--[if IE 9]><video style="display: none;><![endif]-->
<source data-srcset="http://placehold.it/500x600/11e87f/fff&text=SM(500w)" media="sm" />
<source data-srcset="http://placehold.it/900x600&text=MD(900w)" media="md" />
<source data-srcset="http://placehold.it/1200x600/e8117f/fff&text=LG(1200w)" media="lg" />
<source data-srcset="http://placehold.it/1600x900/117fe8/fff&text=XL(1600w)" />
<!--[if IE 9]></video><![endif]-->
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://placehold.it/1400x600/e8117f/fff" class="lazyload" alt="Lazy Sizes" width="100%" />
</picture>
<div class="boxed-copy-right">
<div class="right">
<h1>Title</h1>
<p>Paragraph tag for shits and giggles</p>
</div>
</div>
</div>Non-Boxed
<div style="position:relative">
<picture>
<!--[if IE 9]><video style="display: none;><![endif]-->
<source data-srcset="http://placehold.it/500x600/11e87f/fff&text=SM(500w)" media="sm" />
<source data-srcset="http://placehold.it/900x600&text=MD(900w)" media="md" />
<source data-srcset="http://placehold.it/1200x600/e8117f/fff&text=LG(1200w)" media="lg" />
<source data-srcset="http://placehold.it/1600x900/117fe8/fff&text=XL(1600w)" />
<!--[if IE 9]></video><![endif]-->
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://placehold.it/1400x600/e8117f/fff" class="lazyload" alt="Lazy Sizes" width="100%" />
</picture>
<div>
<div class="left">
<h1>Title</h1>
<p>Paragraph tag for shits and giggles</p>
</div>
</div>
</div>Buttons
Default Inverse Primary Success Info Warning Danger Link
View Code
View Code
Button Code
<!-- '.action-link' gives the left chevron after the cta link-->
<!-- Standard button -->
<a href="" class="btn btn-default action-link" type="button">Default</a>
<!-- Inverse button -->
<a href="" class="btn btn-inverse action-link" type="button">Inverse</a>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<a href="" class="btn btn-primary action-link" type="button">Primary</a>
<!-- Indicates a successful or positive action -->
<a href="" class="btn btn-success action-link" type="button">Success</a>
<!-- Contextual button for informational alert messages -->
<a href="" class="btn btn-info action-link" type="button">Info</a>
<!-- Indicates caution should be taken with this action -->
<a href="" class="btn btn-warning action-link" type="button">Warning</a>
<!-- Indicates a dangerous or potentially negative action -->
<a href="" class="btn btn-danger action-link" type="button">Danger</a>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<a href="" class="btn btn-link action-link" type="button">Link</a>
Progress Bars
Progress Bar Title - Success
Progress Bar Title - Info
Progress Bar Title - Warning
Progress Bar Title - Danger
View Code
Progress Bar Code
<h6>Progress Bar Title - Success</h6>
<div class="progress">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%">
<span class="sr-only">10% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
<span class="sr-only">30% Complete (success)</span>
</div>
</div>
<h6>Progress Bar Title - Info</h6>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
<span class="sr-only">50% Complete (info)</span>
</div>
</div>
<h6>Progress Bar Title - Warning</h6>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
<span class="sr-only">70% Complete (warning)</span>
</div>
</div>
<h6>Progress Bar Title - Danger</h6>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
<span class="sr-only">90% Complete (danger)</span>
</div>
</div>
Panels
Basic panel example
Panel title
Panel content
Panel title
Panel content
.panel-primary
Panel content
.panel-success
Panel content
.panel-info
Panel content
.panel-warning
Panel content
.panel-danger
Panel content
View Code
Panel Code
<!-- Default panel-->
<div class="panel panel-default">
<div class="panel-body"> Basic panel example </div>
</div>
<!-- Default panel with Heading-->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body"> Panel content </div>
</div>
<!-- Default panel w/heading and footer-->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body"> Panel content </div>
<div class="panel-footer">Panel footer</div>
</div>
Modal
View Code
Modal Code
<!-- Button trigger modal -->
<div class="btn btn-primary" type="button">
<a data-toggle="modal" data-target="#myModal">Launch Modal</a>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<img src="https://placehold.co/1920x1080" width="100%"/>
<p>This is a regular ole p tag in the 'modal-body'</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Tooltips
You can wrap these around font awesome icons
Tooltip on left Tooltip on top Tooltip on bottom Tooltip on right
Some font awesome icons that could be used
View Code
Tooltip Code
<!-- HTML to write -->
<!-- To get this to work properly you need to initialize it on the pages you want it on with the below script making sure it loads after the footer/bootstrap JS-->
<!-- <script>
$("[data-toggle=tooltip]").tooltip();
</script>
-->
<a class="btn btn-primary" data-toggle="tooltip" data-container="body" data-placement="left" title="Tooltip on left">Tooltip on left</a>
<a class="btn btn-primary" data-toggle="tooltip" data-container="body" data-placement="top" title="Tooltip on top">Tooltip on top</a>
<a class="btn btn-primary" data-toggle="tooltip" data-container="body" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a>
<a class="btn btn-primary" data-toggle="tooltip" data-container="body" data-placement="right" title="Tooltip on right">Tooltip on right</a>
Responsive Video Embeds
View Code
Responsive Embeds Code
<!-- You can embed multiple Youtube videos on a page -->
<div class="max-1080">
<div class="embed-responsive embed-responsive-16by9">
<meta itemprop="thumbnailURL" content="http://secondcropcreative.com/video/images/loks.jpg" />
<meta itemprop="uploadDate" content="Sep 14, 2015" />
<meta itemprop="embedURL" content="http://youtube.com/embed/6XHz8nvqwuk?rel=0&hd=1" />
<meta itemprop="name" content="Live on King Street 2014 - Cracker" />
<meta itemprop="description" content="Cracker performing Live on King Street in Madison, WI in front of The Majestic Theater." />
<div class="youtube" id="6XHz8nvqwuk">
<img data-src="/images/loks-cracker-thumb.jpg" width="100%" class="thumb lazyload" />
</div>
</div>
</div>
<!-- Include the JavaScript only once (should already be in footer)-->
Before/After
Original 
Modified View Code
Before/After
<figure class="cd-image-container">
<img src="/assets/js/before-after/img/img-original.jpg" alt="Original Image">
<span class="cd-image-label" data-type="original">Original</span>
<div class="cd-resize-img"> <!-- the resizable image on top -->
<img src="/assets/js/before-after/img/img-modified.jpg" alt="Modified Image">
<span class="cd-image-label" data-type="modified">Modified</span>
</div>
<span class="cd-handle"></span>
</figure> <!-- cd-image-container -->
Portfolio Thumbs Hover
View Code
Portfolio Thumbs
<div class="row porto">
<div class="porto-item col-xs-12 col-sm-6 col-md-4 col-lg-3 nopad">
<img width="100%" alt="City" src="hhttps://placehold.co/640">
<div class="porto-info">
<div class="info-content">
<a href="#">
<h2 class="porto title proxima-nova-bold">And another Title</h2>
<span class="porto categories proxima-nova-reg">You can use any of the .bg-**colors** and btn class</span>
</a>
<a href="#" class="porto more btn-primary btn-xs proxima-nova-condensed">MORE CTA</a>
</div>
</div>
</div>
<div class="porto-item col-xs-12 col-sm-6 col-md-4 col-lg-3 nopad">
<img width="100%" alt="City" src="https://placehold.co/640">
<div class="porto-info">
<div class="info-content">
<a href="#">
<h2 class="porto title proxima-nova-bold">And another Title</h2>
<span class="porto categories proxima-nova-reg">You can use any of the .bg-**colors** and btn class</span>
</a>
<a href="#" class="porto more btn-success btn-xs proxima-nova-condensed">MORE CTA</a>
</div>
</div>
</div>
<div class="porto-item col-xs-12 col-sm-6 col-md-4 col-lg-3 nopad">
<img width="100%" alt="City" src="hhttps://placehold.co/640">
<div class="porto-info">
<div class="info-content">
<a href="#">
<h2 class="porto title proxima-nova-bold">And another Title</h2>
<span class="porto categories proxima-nova-reg">You can use any of the .bg-**colors** and btn class</span>
</a>
<a href="#" class="porto more btn-info btn-xs proxima-nova-condensed">MORE CTA</a>
</div>
</div>
</div>
<div class="porto-item col-xs-12 col-sm-6 col-md-4 col-lg-3 nopad">
<img width="100%" alt="City" src="https://placehold.co/640">
<div class="porto-info">
<div class="info-content">
<a href="#">
<h2 class="porto title proxima-nova-bold">And another Title</h2>
<span class="porto categories proxima-nova-reg">You can use any of the .bg-**colors** and btn class</span>
</a>
<a href="#" class="porto more btn-danger btn-xs proxima-nova-condensed">MORE CTA</a>
</div>
</div>
</div>
<div class="porto-item col-xs-12 col-sm-6 col-md-4 col-lg-3 nopad">
<img width="100%" alt="City" src="https://placehold.co/640">
<div class="porto-info">
<div class="info-content">
<a href="#">
<h2 class="porto title proxima-nova-bold">And another Title</h2>
<span class="porto categories proxima-nova-reg">You can use any of the .bg-**colors** and btn class</span>
</a>
<a href="#" class="porto more btn-warning btn-xs proxima-nova-condensed">MORE CTA</a>
</div>
</div>
</div>
<div class="porto-item col-xs-12 col-sm-6 col-md-4 col-lg-3 nopad">
<img width="100%" alt="City" src="https://placehold.co/640">
<div class="porto-info">
<div class="info-content">
<a href="#">
<h2 class="porto title proxima-nova-bold">And another Title</h2>
<span class="porto categories proxima-nova-reg">You can use any of the .bg-**colors** and btn class</span>
</a>
<a href="#" class="porto more btn-inverse btn-xs proxima-nova-condensed">MORE CTA</a>
</div>
</div>
</div>
</div>
Contact Form
Contact Form
View Code
Contact Form
<!--Dependent on <script src="/assets/js/validator.js"></script> (which should be added to the pages that have forms on it -->
<!--Form needs action="/contact/php/mailer.php" to work as well-->
<!--Pay attention to 'data-error=' as well as the empty div '<div class="help-block with-errors"></div>' to show the error messages-->
<div class="panel panel-default" >
<div class="panel-heading">
<h2>Contact Form</h2>
</div>
<div class="panel-body">
<form id="contact-us" name="contactform" method="post" action="/contact/php/mailer.php" class="form-horizontal" data-toggle="validator" role="form">
<!-- prevents spambots-->
<input type="text" name="foo" style="display: none;" autocomplete="off">
<!-- prevents spambots-->
<div class="form-group">
<label for="inputName" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputName" name="inputName" placeholder="Your Name" data-error="Hey, we need to know who we are dealing with here!" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Your Email" data-error="Bruh, that email address is invalid" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label for="inputPhone" class="col-lg-2 control-label">Phone</label>
<div class="col-lg-10">
<input type="phone" class="form-control" id="inputPhone" name="inputPhone" placeholder="Your Phone" >
</div>
</div>
<div class="form-group">
<label for="inputSubject" class="col-lg-2 control-label">Subject</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputSubject" name="inputSubject" placeholder="Subject Message" data-error="Message must have a subject line" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-lg-2 control-label">Message</label>
<div class="col-lg-10">
<textarea class="form-control" rows="4" id="inputMessage" name="inputMessage" placeholder="Your message..." data-error="Aw, come on. I thought you wanted to contact us..." required></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">
Send Message
</button>
</div>
</div>
</form>
</div>
</div>
Isotope/Masonry Grid
Utilizes LazySizes for loading
View Code
Isotope/Masonry Grid
<div id="grid-container">
<div class="isotope-box">
<div class="grid-sizer"></div>
<div class="grid-item grid-item--width2">
<img data-src="https://placehold.co/480x300" class="lazyload" />
</div>
<div class="grid-item grid-item--width2">
<img data-src="https://placehold.co/480x300" class="lazyload" />
</div>
<div class="grid-item">
<img data-src="https://placehold.co/240x300" class="lazyload" />
</div>
<div class="grid-item grid-item--width2">
<img data-src="https://placehold.co/480x300" class="lazyload" />
</div>
<div class="grid-item">
<img data-src="https://placehold.co/240x300" class="lazyload" />
</div>
</div>
</div>
<script>
//ISOTOPE with Lazysizes (should already be in the global footer)
$( document ).ready(function() {
$('#grid-container').each(function() {
var $isotope = $('.isotope-box');
$isotope.isotope({
layoutMode: 'masonry',
// set itemSelector so .grid-sizer is not used in layout
itemSelector: '.grid-item',
// use element for option
masonry: {
columnWidth: '.grid-sizer'
},
percentPosition: true
// slow transitions
//transitionDuration: '.4s'
});
$isotope[0].addEventListener('load', (function() {
var runs;
var update = function() {
$isotope.isotope('layout');
runs = false;
};
return function() {
if (!runs) {
runs = true;
//timeout will affect the load of images
setTimeout(update, 0);
}
};
}()), true);
});
});
</script>
FLEXBOX
Title of the Video Goes Here
This could be a description for the video. These videos should have some copy associated with them to help with seo. Let's tr and write some shit for these videos.
View Code
FLEX
<div class="row row-eq-height txt-center">
<!-- Centered Next to image -->
<div class="col-xs-12 col-sm-8 no-pad">
<div class="max-1080">
<div class="embed-responsive embed-responsive-16by9">
<div class="youtube" id="J6XsdYpoyg0">
<img data-src="http://placehold.it/1080x608/117fe8/fff&text=Thumbnail" width="100%" class="thumb lazyload" />
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 no-pad">
<h1 class="txt-inherit proxima-nova-black">Title of the Video Goes Here</h1>
<p>This could be a description for the video. These videos should have some copy associated with them to help with seo. Let's tr and write some shit for these videos.</p>
</div>
<!-- end Centered Next ot image -->
</div>
Fancybox Gallery
View Code
Fancybox Gallery
<a class="fancybox" href="images/Walk-the-Moon_01.jpg" data-fancybox-group="gallery"><img src="images/Walk-the-Moon_01-thumb.jpg" alt="Walk the Moon #1" /></a>
<a class="fancybox" href="images/Walk-the-Moon_02.jpg" data-fancybox-group="gallery"><img src="images/Walk-the-Moon_02-thumb.jpg" alt="Walk the Moon #2" /></a>
<a class="fancybox" href="images/Walk-the-Moon_03.jpg" data-fancybox-group="gallery"><img src="images/Walk-the-Moon_03-thumb.jpg" alt="Walk the Moon #3" /></a>
<a class="fancybox" href="images/Walk-the-Moon_04.jpg" data-fancybox-group="gallery"><img src="images/Walk-the-Moon_04-thumb.jpg" alt="Walk the Moon #4" /></a>
<script>
//fancybox
$(document).ready(function() {
$(".fancybox").fancybox({
//Use Alt atribute
beforeShow: function() {
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title = alt;
/* Disable right click */
$.fancybox.wrap.bind("contextmenu", function(e) {
return false;
});
},
// For all options go to http://fancyapps.com/fancybox/
padding : 4,
fitToView: true,
autoSize: true,
closeClick: true,
openEffect: 'fade',
closeEffect: 'fade',
helpers: {
title: {
type: 'outside'
},
overlay: {
css: {
'background': 'rgba(0, 0, 0, 0.9)'
},
locked: false
}
},
mouseWheel: false,
nextEffect: 'fade',
prevEffect: 'fade'
});
});
</script>
Lazyload Lazysizes
Allows for Responsive Images
View Code
Lazyload Lazysizes
<style>
/* fade image in after load - this should already be in extra css*/
.lazyload,
.lazyloading {
opacity: 0;
}
.lazyloaded {
opacity: 1;
transition: opacity 1200ms;
}
</style>
<picture>
<!--[if IE 9]><video style="display: none;><![endif]-->
<source data-srcset="http://placehold.it/500x600/11e87f/fff" media="sm"/>
<source data-srcset="http://placehold.it/900x600" media="md"/>
<source data-srcset="http://placehold.it/1200x600/e8117f/fff" media="lg"/>
<source data-srcset="http://placehold.it/1600x900/117fe8/fff"/>
<!--[if IE 9]></video><![endif]-->
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://placehold.it/1400x600/e8117f/fff" class="lazyload" alt="Lazy Sizes" width="100%"/>
</picture>
<script>
//lazysizes - this should already be in footer
$(document).on('lazybeforesizes', function(e){
//use width of parent node instead of the image width itself
e.detail.width = $(e.target).closest(':not(picture)').innerWidth() || e.detail.width;
});
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.customMedia = {
'sm': '(max-width: 480px)',
'md': '(max-width: 900px)',
'lg': '(max-width: 1200px)'
};
</script>