Owl + PrettyPhoto - BIZAMAJIG USAGE #3

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>
<div class="bizamajig-gallery-carousel-lightbox owl-carousel">
    <div class="item" style="background-color: black;">
        <a href="http://lorempixel.com/800/400/food/1/" rel="prettyPhoto[gallery1]" title="HERE1">
            <img src="http://lorempixel.com/300/150/food/1/" width="300" height="150" alt="111" />
            <span class="caption animate-me">HERE1 HERE1</span>
        </a>
        <div style="display: none;">
            <a href="http://lorempixel.com/800/400/food/2/" rel="prettyPhoto[gallery1]" title="HERE2">
                <img src="http://lorempixel.com/300/150/food/2/" width="300" height="150" alt="222" />
            </a>
            <a href="http://lorempixel.com/800/400/food/3/" rel="prettyPhoto[gallery1]" title="HERE3">
                <img src="http://lorempixel.com/300/150/food/3/" width="300" height="150" alt="333" />
            </a>
        </div>
    </div>
    <div class="item" style="background-color: black;">
        <a href="http://lorempixel.com/800/400/food/4/" rel="prettyPhoto[gallery2]" title="HERE4">
            <img src="http://lorempixel.com/300/150/food/4/" width="300" height="150" alt="444" />
            <span class="caption animate-me">HERE2 HERE2</span>
        </a>
        <div style="display: none;">
            <a href="http://lorempixel.com/800/400/food/5/" rel="prettyPhoto[gallery2]" title="HERE4">
                <img src="http://lorempixel.com/300/150/food/5/" width="300" height="150" alt="555" />
            </a>
            <a...

CSS

.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 .owl-next,.owl-carousel .owl-controls .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loaded{display:block}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel .owl-refresh .owl-item{display:none}.owl-carousel...

JavaScript

/*


Don't add items by using jQuery on a running carousel. You should use the add method instead like this:

 $('.owl-carousel').owlCarousel('add', '<markup>').owlCarousel('refresh')

Please notice that you need the latest develop for this: https://github.com/OwlFonk/OwlCarousel2#building.
2014-08-19 13:09:44

I don't use owl carousel myself, but it seems to have an addItem method - try using that.




$slider.parent().append("<div class='slider-nav'><a id='slide-prev'>PREV</i></a><a id='slide-next'>NEXT</a></div>");
 // show first caption
  $("#slider .caption").addClass("animate-me");
  
   $("#slide-next").click(function(){
     $("#slider .caption").removeClass("animate-me");
      $slider.trigger('owl.next');
      $("#slider .caption").addClass("animate-me");
   });
   
   $("#slide-prev").click(function(){
     $("#slider .caption").removeClass("animate-me");
      $slider.trigger('owl.prev');
     $("#slider .caption").addClass("animate-me");
   });  
*/

var $owl = $('.owl-carousel');
$owl.owlCarousel({
    autoplay:              true,
    autoplayTimeout:      5000,
    autoplayHoverPause:    false,


    
    margin:              10,

    //    With loop, add items > 1, so autoWidth will work.
    autoWidth:           true,
    item:                5,
    loop:                true,

    nav:                 true,

    responseiveClass:    true,
    responsive: {
        0: {
            items:         1,
            nav:           true
        },
        600: {
            items:         3,
            nav:           false
        },
        1000: {
            items:         5,
            nav:           true,
            loop:          true
        }
    }
});


$("a[rel^='prettyPhoto']").prettyPhoto({
         social_tools: false,
theme: 'facebook', // 'pp_default', /* pp_default / light_rounded / dark_rounded / light_square / dark_square / facebook */
animation_speed: 'fast', /* fast/slow/normal */
slideshow: 5000, /* false OR interval time in ms...