Owl + PrettyPhoto - BIZAMAJIG USAGE #5

Basic usage example for nice jquery libraries

by bizamajig

HTML

<script src="http://cdn.jsdelivr.net/jquery.owlcarousel/1.31/grabbing.png"></script>
<script src="http://cdn.jsdelivr.net/jquery.owlcarousel/1.31/AjaxLoader.gif"></script>
<script src="http://cdn.jsdelivr.net/prettyphoto/3.1.5/js/jquery.prettyPhoto.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/prettyphoto/3.1.5/css/prettyPhoto.css">
<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<script>
function ScaleImage(srcwidth, srcheight, targetwidth, targetheight, fLetterBox) {

    var result = { 
		width: 							0,
		height: 						0,
		fScaleToTargetWidth: 			true
	};
    if ((srcwidth <= 0) || (srcheight <= 0) || (targetwidth <= 0) || (targetheight <= 0)) {
        return result;
    }
    // scale to the target width
    var scaleX1 = targetwidth;
    var scaleY1 = (srcheight * targetwidth) / srcwidth;
    // scale to the target height
    var scaleX2 = (srcwidth * targetheight) / srcheight;
    var scaleY2 = targetheight;
    // now figure out which one we should use
    var fScaleOnWidth = (scaleX2 > targetwidth);
    if (fScaleOnWidth) {
        fScaleOnWidth = fLetterBox;
    }
    else {
        fScaleOnWidth = !fLetterBox;
    }
    if (fScaleOnWidth) {
        result.width = Math.floor(scaleX1);
        result.height = Math.floor(scaleY1);
        result.fScaleToTargetWidth = true;
    }
    else {
        result.width = Math.floor(scaleX2);
        result.height = Math.floor(scaleY2);
        result.fScaleToTargetWidth = false;
    }
    result.targetleft = Math.floor((targetwidth - result.width) / 2);
    result.targettop = Math.floor((targetheight - result.height) / 2);
    return result;
}
function RememberOriginalSize(img) {
	if (!img.originalsize) {
		img.originalsize = {width : img.width, height : img.height};
	}
}
function FixImage(fLetterBox, div, img) {
	RememberOriginalSize(img);

	var targetwidth = $(div).width();
	var targetheight = $(div).height();
	var srcwidth =...

CSS

.dp-none { display: none; }
div.aspectcorrect,
.aspectcorrect {
/*	border: 10px solid #333333;*/
	overflow: hidden;
	position: relative;
margin: 0;
    padding: 0;
    background: black;
}
div.aspectcorrect img,
.aspectcorrect img {
	position: absolute;
}
div.square,
.square {
	width: 240px;
	height: 240px;
}
div.widescreen,
.widescreen {
	width: 320px;
	height: 180px;
}
div.portrait,
.portrait {
	width: 180px;
	height: 320px;
}
div.standard,
.standard {
	width: 240px;
	height: 180px;
}

.owl-carousel .animate-me {
    margin: 0 auto;
    padding: 10px;
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    color: #fff;
    display: block;
    font-size: 2em;
    letter-spacing: 0.1em;
    line-height: 1.2;
    opacity: 0;
}
.owl-carousel .animate-me {
    opacity: 1;
    transition: opacity 1500ms linear 0s;
}

.owl-carousel .animated{-webkit-animation-duration:1000ms;animation-duration:1000ms;-webkit-animation-fill-mode:both;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{-webkit-transition:height 500ms ease-in-out;-moz-transition:height 500ms ease-in-out;-ms-transition:height 500ms ease-in-out;-o-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out}.owl-carousel{display:none;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0px,0,0)}.owl-carousel .owl-controls .owl-dot,.owl-carousel .owl-controls .owl-nav...

JavaScript

$('.owl-carousel').owlCarousel();
//FixImages( true );