Carousel + Lightbox - OWL + PRETTYPHOTO

Basic usage example for nice jquery libraries

by bizamajig

HTML

<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.theme.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.css">
<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/jquery.owlcarousel/1.31/owl.carousel.min.js"></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">
<h1>Owl carousel and lightbox (prettyphoto) together</h1>

<p>See external resources for css and js libs ;)</p>

<h2>Miam responsive pictures of food</h2>

<p>Click the pictures</p>
<div id="pictures" class="owl-slider">
<a class="item" href="http://lorempixel.com/800/400/food/1/" rel="prettyPhoto" title="This is the description">
    <img src="http://lorempixel.com/300/150/food/1/" width="300" height="150" alt="title" />
</a>

<a class="item" href="http://lorempixel.com/800/400/food/2/" rel="prettyPhoto" title="This is the description">
    <img src="http://lorempixel.com/300/150/food/2/" width="300" height="150" alt="title" />
</a>

<a class="item" href="http://lorempixel.com/800/400/food/3/" rel="prettyPhoto" title="This is the description">
    <img src="http://lorempixel.com/300/150/food/3/" width="300" height="150" alt="title" />
</a>

<a class="item" href="http://lorempixel.com/800/400/food/4/" rel="prettyPhoto" title="This is the description">
    <img src="http://lorempixel.com/300/150/food/4/" width="300" height="150" alt="title" />
</a>

<a class="item" href="http://lorempixel.com/800/400/food/5/" rel="prettyPhoto" title="This is the description">
    <img src="http://lorempixel.com/300/150/food/5/" width="300" height="150" alt="title" />
</a>

</div>

<h2>Video Slider with pictures and linked videos</h2>

<p>videos...

JavaScript

$(document).ready(function () {
     $("a[rel^='prettyPhoto']").prettyPhoto();

     $(".owl-slider").owlCarousel({

         autoPlay: 3000, //Set AutoPlay to 3 seconds

         items: 4,
         itemsDesktop: [1199, 3],
         itemsDesktopSmall: [979, 3]

     });
 });