Responsive Website Design: Responsive Image Gallery with Light-box(zoom effect)

Create index.html

<!DOCTYPE>
<html>
<head>
<title>Image Gallery with Light-box</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="http://navinwebworld.blogspot.in/favicon.ico" />
<link type="text/css" href="css/styles.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/jquery.quicksand.js" type="text/javascript"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
  <div class="left-side"> <img src="http://navinwebworld.blogspot.in/favicon.ico"> </div>
  <div class="middle" style="color:#00CCFF;font-weight:bold"> Image Gallery With Light Box</div>
</header>
<div class="wrapper">
  <div class="portfolio-content">
    <h1 class="title-page"></h1>
    <ul class="portfolio-categ filter">
      <li>Categories:</li>
      <li class="all active"><a href="#">All</a></li>
      <li class="cat-item-1"><a href="#" title="Category 1">Portfolio</a> </li>
      <li class="cat-item-2"><a href="#" title="Category 2">Selected-Image</a> </li>
      <li class="cat-item-3"><a href="#" title="Category 3">My Clicked</a> </li>
    </ul>
    <ul class="portfolio-area">
      <li class="portfolio-item2" data-id="id-0" data-type="cat-item-1">
        <div> <span class="image-block"> <a class="image-zoom" href="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg" rel="prettyPhoto[gallery]" title="image"> <img width="225" height="140" src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg" alt="login" title="Login Page" /> </a> </span>
          <div class="home-portfolio-text">
            <h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="login">Image desc</a></h2>
            
          </div>
        </div>
      </li>
      <li class="portfolio-item2" data-id="id-1" data-type="cat-item-1">
        <div> <span class="image-block"> <a class="image-zoom" href="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" rel="prettyPhoto[gallery]" title="image"> <img width="225" height="140" src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" alt="image" title="image" /> </a> </span>
          <div class="home-portfolio-text">
            <h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="after-login-1st page-dashboard">Image desc</a></h2>
          </div>
        </div>
      </li>
      <li class="portfolio-item2" data-id="id-2" data-type="cat-item-1">
        <div> <span class="image-block"> <a class="image-zoom" href="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" rel="prettyPhoto[gallery]" title="image"> <img width="225" height="140" src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" alt="image" title="image" /> </a> </span>
          <div class="home-portfolio-text">
            <h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="image">Image desc</a></h2>
          </div>
        </div>
      </li>
      <li class="portfolio-item2" data-id="id-3" data-type="cat-item-1">
        <div> <span class="image-block"> <a class="image-zoom" href="http://www.curdweb.com/wp-content/uploads/2014/12/jquery-plugins-1024x512.jpg" rel="prettyPhoto[gallery]" title="image"><img width="225" height="140" src="http://www.curdweb.com/wp-content/uploads/2014/12/jquery-plugins-1024x512.jpg" alt="image" title="Image" /> </a> </span>
          <div class="home-portfolio-text">
            <h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="Image">Image desc</a></h2>
          </div>
        </div>
      </li>
      <li class="portfolio-item2" data-id="id-4" data-type="cat-item-1">
        <div> <span class="image-block"> <a class="image-zoom" href="http://www.curdweb.com/wp-content/uploads/2014/08/about_1.jpg" rel="prettyPhoto[gallery]" title=""><img width="225" height="140" src="http://www.curdweb.com/wp-content/uploads/2014/08/about_1.jpg" alt="image" title="Image" /> </a> </span>
          <div class="home-portfolio-text">
            <h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="image">Image desc</a></h2>
          </div>
        </div>
      </li>
      <li class="portfolio-item2" data-id="id-5" data-type="cat-item-2">
        <div> <span class="image-block"> <a class="image-zoom" href="
http://curdweb.com/navin/fullwidthlider.com/images/slider2.png" rel="prettyPhoto[gallery]" title=""><img width="225" height="140" src="
http://curdweb.com/navin/fullwidthlider.com/images/slider2.png" alt="image" title="Image" /> </a> </span>
          <div class="home-portfolio-text">
            <h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="image">Image desc</a></h2>
          </div>
        </div>
      </li>
      <li class="portfolio-item2" data-id="id-6" data-type="cat-item-2">
        <div> <span class="image-block"> <a class="image-zoom" href="http://curdweb.com/navin/fullwidthlider.com/images/slider1.png" rel="prettyPhoto[gallery]" title=""><img width="225" height="140" src="http://curdweb.com/navin/fullwidthlider.com/images/slider1.png" alt="image" title="Image" /> </a> </span>
          <div class="home-portfolio-text">
            <h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="image">Image desc</a></h2>
          </div>
        </div>
      </li>
      <li class="portfolio-item2" data-id="id-7" data-type="cat-item-2">
        <div> <span class="image-block"> <a class="image-zoom" href="http://curdweb.com/navin/fullwidthlider.com/images/slider3.png" rel="prettyPhoto[gallery]" title=""><img width="225" height="140" src="http://curdweb.com/navin/fullwidthlider.com/images/slider3.png" alt="image" title="Image" /> </a> </span>
          <div class="home-portfolio-text">
            <h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="image">Image desc</a></h2>
          </div>
        </div>
      </li>
      <li class="portfolio-item2" data-id="id-8" data-type="cat-item-2">
        <div> <span class="image-block"> <a class="image-zoom" href="http://curdweb.com/navin/responsive/images/slider2.jpg" rel="prettyPhoto[gallery]" title=""><img width="225" height="140" src="http://curdweb.com/navin/responsive/images/slider2.jpg" alt="image" title="Image" /> </a> </span>
          <div class="home-portfolio-text">
            <h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="image">Image desc</a></h2>
          </div>
        </div>
      </li>
      <li class="portfolio-item2" data-id="id-9" data-type="cat-item-2">
        <div> <span class="image-block"> <a class="image-zoom" href="http://curdweb.com/navin/responsive/images/slider4.jpg" rel="prettyPhoto[gallery]" title=""><img width="225" height="140" src="http://curdweb.com/navin/responsive/images/slider4.jpg" alt="image" title="Image" /> </a> </span>
          <div class="home-portfolio-text">
            <h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="image">Image desc</a></h2>
          </div>
        </div>
      </li>
      <li class="portfolio-item2" data-id="id-10" data-type="cat-item-2">
        <div> <span class="image-block"> <a class="image-zoom" href="http://curdweb.com/navin/responsive/images/slider1.jpg" rel="prettyPhoto[gallery]" title=""><img width="225" height="140" src="http://curdweb.com/navin/responsive/images/slider1.jpg" alt="image" title="Image" /> </a> </span>
          <div class="home-portfolio-text">
            <h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="image">Image desc</a></h2>
          </div>
        </div>
      </li>
      <li class="portfolio-item2" data-id="id-11" data-type="cat-item-2">
        <div> <span class="image-block"> <a class="image-zoom" href="http://curdweb.com/navin/click.com/images/slider/slider1.png" rel="prettyPhoto[gallery]" title=""><img width="225" height="140" src="http://curdweb.com/navin/click.com/images/slider/slider1.png" alt="image" title="Image" /> </a> </span>
          <div class="home-portfolio-text">
            <h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="image">Image desc</a></h2>
          </div>
        </div>
      </li>
      <li class="portfolio-item2" data-id="id-12" data-type="cat-item-2">
        <div> <span class="image-block"> <a class="image-zoom" href="http://curdweb.com/navin/click.com/images/slider/slider2.jpg" rel="prettyPhoto[gallery]" title=""><img width="225" height="140" class="1" src="http://curdweb.com/navin/click.com/images/slider/slider2.jpg" alt="image" title="Image" /> </a> </span>
          <div class="home-portfolio-text">
            <h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="image">Image desc</a></h2>
          </div>
        </div>
      </li>
      <div class="column-clear"></div>
    </ul>
    
  </div>
  
</div>

</body>
</html>

Create style.css

body {
 background:#333333;
}
.main-wrapper {
 padding:20px;
 background:#CCCCCC;
 overflow:auto;
 margin:auto;
}
header {
 padding:20px;
 margin:auto;
 background:#000000;
 overflow:auto;
}
.left-side {
 float:left;
}
.middle {
 text-align: center;
}
/* RESET STYLES */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td {
 margin:0;
 padding:0
}
table {
 border-collapse:collapse;
 border-spacing:0
}
fieldset, img {
 border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
 font-style:normal;
 font-weight:normal
}
ol, ul, li {
 list-style:none
}
caption, th {
 text-align:left
}
h1, h2, h3, h4, h5, h6 {
 font-weight:normal;
}
q:before, q:after {
 content:''
}
strong {
 font-weight: bold
}
em {
 font-style: italic
}
.aligncenter {
 display:block;
 margin:0 auto
}
.alignleft {
 float:left
}
.alignright {
 float:right
}
div {
 position:relative
}
/* END RESET STYLES */

html {
 -webkit-font-smoothing:antialiased;
}
body {
 background:#f5f5f5 url("../images/bkg-pat.png") repeat scroll 0 0;
 font: 12px/1.5em Arial, Helvetica, sans-serif, "Arial Narrow";
 color:#a5a5a5;
}
a {
 color:#65a42d;
 text-decoration:none;
}
a:hover {
 color:#65a42d;
 text-decoration:underline;
}
.column-clear {
 clear:both;
}
.wrapper {
 margin:0px auto;
 padding:0px;
 width:1080px;
}
.portfolio-content, .portfolio-area {
 width:1080px;
}
.title-page {
 font-size:40px;
 margin:50px 0px 60px 0px;
 color:#151515;
}
.goto {
 float:right;
 width:130px;
 margin:-80px 30px 0px 0px;
}
/**** PORTFOLIO STYLES*****/
.portfolio-categ {
 margin-bottom:30px;
}
.portfolio-categ li {
 display:inline;
 margin-right:10px;
}
.image-block {
 display:block;
 position: relative;
}
.image-block img {
 border: 1px solid #d5d5d5;
 border-radius: 4px 4px 4px 4px;
 background:#FFFFFF;
 padding:10px;
}
.image-block img:hover {
 border: 1px solid #A9CF54;
 box-shadow:0 0 5px #A9CF54;
}
.portfolio-area li {
 float: left;
 margin: 0 12px 20px 0;
 overflow: hidden;
 width: 245px;
 padding:5px;
 height:288px;
}
.home-portfolio-text {
 margin-top:10px;
}
li.active a {
 text-decoration:underline;
}
/**** END PORTFOLIO STYLES*****/

/*----------------------------------Responsive code comes here----------------------------------------*/

@media screen and (min-device-width: 320px) and (max-device-width: 756px) {
.portfolio-area li {
 float: none!important;
 height: 288px;
 margin: auto;
 overflow: hidden;
 padding: 5px;
 width: 245px;
}
.wrapper {
 margin: 0 auto;
 padding: 0;
 width: 100%;
}
.portfolio-content, .portfolio-area {
 width: 100%;
}
}

Create jquery.quicksand.js

// Gets called when any animation is finished
            var postCallbackPerformed = 0; // prevents the function from being called more than one time
            var postCallback = function () {
                
                if (!postCallbackPerformed) {
                    postCallbackPerformed = 1;
                    
                    // hack: 
                    // used to be: $sourceParent.html($dest.html()); // put target HTML into visible source container
                    // but new webkit builds cause flickering when replacing the collections
                    $toDelete = $sourceParent.find('> *');
                    $sourceParent.prepend($dest.find('> *'));
                    $toDelete.remove();
                         
                    if (adjustHeightOnCallback) {
                        $sourceParent.css('height', destHeight);
                    }
                    options.enhancement($sourceParent); // Perform custom visual enhancements on a newly replaced collection
                    if (typeof callbackFunction == 'function') {
                        callbackFunction.call(this);
                    }                    
                }
            };
            
            // Position: relative situations
            var $correctionParent = $sourceParent.offsetParent();
            var correctionOffset = $correctionParent.offset();
            if ($correctionParent.css('position') == 'relative') {
                if ($correctionParent.get(0).nodeName.toLowerCase() == 'body') {

} else {
                    correctionOffset.top += (parseFloat($correctionParent.css('border-top-width')) || 0);
                    correctionOffset.left +=( parseFloat($correctionParent.css('border-left-width')) || 0);
                }
            } else {
                correctionOffset.top -= (parseFloat($correctionParent.css('border-top-width')) || 0);
                correctionOffset.left -= (parseFloat($correctionParent.css('border-left-width')) || 0);
                correctionOffset.top -= (parseFloat($correctionParent.css('margin-top')) || 0);
                correctionOffset.left -= (parseFloat($correctionParent.css('margin-left')) || 0);
            }
            
            // perform custom corrections from options (use when Quicksand fails to detect proper correction)
            if (isNaN(correctionOffset.left)) {
                correctionOffset.left = 0;
            }
            if (isNaN(correctionOffset.top)) {
                correctionOffset.top = 0;
            }
            
            correctionOffset.left -= options.dx;
            correctionOffset.top -= options.dy;

// keeps nodes after source container, holding their position
            $sourceParent.css('height', $(this).height());
            
            // get positions of source collections
            $source.each(function (i) {
                offsets[i] = $(this).offset();
            });
            
            // stops previous animations on source container
            $(this).stop();
            var dx = 0; var dy = 0;
            $source.each(function (i) {
                $(this).stop(); // stop animation of collection items
                var rawObj = $(this).get(0);
                if (rawObj.style.position == 'absolute') {
                    dx = -options.dx;
                    dy = -options.dy;
                } else {
                    dx = options.dx;
                    dy = options.dy;                    
                }

rawObj.style.position = 'absolute';
                rawObj.style.margin = '0';

rawObj.style.top = (offsets[i].top - parseFloat(rawObj.style.marginTop) - correctionOffset.top + dy) + 'px';
                rawObj.style.left = (offsets[i].left - parseFloat(rawObj.style.marginLeft) - correctionOffset.left + dx) + 'px';
            });
                    
            // create temporary container with destination collection
            var $dest = $($sourceParent).clone();
            var rawDest = $dest.get(0);
            rawDest.innerHTML = '';
            rawDest.setAttribute('id', '');
            rawDest.style.height = 'auto';
            rawDest.style.width = $sourceParent.width() + 'px';
            $dest.append($collection);      
            // insert node into HTML
            // Note that the node is under visible source container in the exactly same position
            // The browser render all the items without showing them (opacity: 0.0)
            // No offset calculations are needed, the browser just extracts position from underlayered destination items
            // and sets animation to destination positions.
            $dest.insertBefore($sourceParent);
            $dest.css('opacity', 0.0);
            rawDest.style.zIndex = -1;
            
            rawDest.style.margin = '0';
            rawDest.style.position = 'absolute';
            rawDest.style.top = offset.top - correctionOffset.top + 'px';
            rawDest.style.left = offset.left - correctionOffset.left + 'px';

if (options.adjustHeight === 'dynamic') {
                // If destination container has different height than source container
                // the height can be animated, adjusting it to destination height
                $sourceParent.animate({height: $dest.height()}, options.duration, options.easing);
            } else if (options.adjustHeight === 'auto') {
                destHeight = $dest.height();
                if (parseFloat(sourceHeight) < parseFloat(destHeight)) {
                    // Adjust the height now so that the items don't move out of the container
                    $sourceParent.css('height', destHeight);
                } else {
                    //  Adjust later, on callback
                    adjustHeightOnCallback = true;
                }
            }
                
            // Now it's time to do shuffling animation
            // First of all, we need to identify same elements within source and destination collections    
            $source.each(function (i) {
                var destElement = [];
                if (typeof(options.attribute) == 'function') {
                    
                    val = options.attribute($(this));
                    $collection.each(function() {
                        if (options.attribute(this) == val) {
                            destElement = $(this);
                            return false;
                        }
                    });
                } else {
                    destElement = $collection.filter('[' + options.attribute + '=' + $(this).attr(options.attribute) + ']');
                }
                if (destElement.length) {
                    // The item is both in source and destination collections
                    // It it's under different position, let's move it
                    if (!options.useScaling) {
                        animationQueue.push(
                                            {
                                                element: $(this), 
                                                animation: 
                                                    {top: destElement.offset().top - correctionOffset.top, 
                                                     left: destElement.offset().left - correctionOffset.left, 
                                                     opacity: 1.0
                                                    }
                                            });

} else {
                        animationQueue.push({
                                            element: $(this), 
                                            animation: {top: destElement.offset().top - correctionOffset.top, 
                                                        left: destElement.offset().left - correctionOffset.left, 
                                                        opacity: 1.0, 
                                                        scale: '1.0'
                                                       }
                                            });

}
                } else {
                    // The item from source collection is not present in destination collections
                    // Let's remove it
                    if (!options.useScaling) {
                        animationQueue.push({element: $(this), 
                                             animation: {opacity: '0.0'}});
                    } else {
                        animationQueue.push({element: $(this), animation: {opacity: '0.0', 
                                         scale: '0.0'}});
                    }
                }
            });
            
            $collection.each(function (i) {
                // Grab all items from target collection not present in visible source collection
                
                var sourceElement = [];
                var destElement = [];
                if (typeof(options.attribute) == 'function') {
                    val = options.attribute($(this));
                    $source.each(function() {
                        if (options.attribute(this) == val) {
                            sourceElement = $(this);
                            return false;
                        }
                    });

$collection.each(function() {
                        if (options.attribute(this) == val) {
                            destElement = $(this);
                            return false;
                        }
                    });
                } else {
                    sourceElement = $source.filter('[' + options.attribute + '=' + $(this).attr(options.attribute) + ']');
                    destElement = $collection.filter('[' + options.attribute + '=' + $(this).attr(options.attribute) + ']');
                }
                
                var animationOptions;
                if (sourceElement.length === 0) {
                    // No such element in source collection...
                    if (!options.useScaling) {
                        animationOptions = {
                            opacity: '1.0'
                        };
                    } else {
                        animationOptions = {
                            opacity: '1.0',
                            scale: '1.0'
                        };
                    }
                    // Let's create it
                    d = destElement.clone();
                    var rawDestElement = d.get(0);
                    rawDestElement.style.position = 'absolute';
                    rawDestElement.style.margin = '0';
                    rawDestElement.style.top = destElement.offset().top - correctionOffset.top + 'px';
                    rawDestElement.style.left = destElement.offset().left - correctionOffset.left + 'px';
                    d.css('opacity', 0.0); // IE
                    if (options.useScaling) {
                        d.css('transform', 'scale(0.0)');
                    }
                    d.appendTo($sourceParent);
                    
                    animationQueue.push({element: $(d), 
                                         animation: animationOptions});
                }
            });
            
            $dest.remove();
            options.enhancement($sourceParent); // Perform custom visual enhancements during the animation
            for (i = 0; i < animationQueue.length; i++) {
                animationQueue[i].element.animate(animationQueue[i].animation, options.duration, options.easing, postCallback);
            }
        });
    };
})(jQuery);

Create jquery.easing.js

jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,
{
 def: 'easeOutQuad',
 swing: function (x, t, b, c, d) {
  //alert(jQuery.easing.default);
  return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
 },
 easeInQuad: function (x, t, b, c, d) {
  return c*(t/=d)*t + b;
 },
 easeOutQuad: function (x, t, b, c, d) {
  return -c *(t/=d)*(t-2) + b;
 },
 easeInOutQuad: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t + b;
  return -c/2 * ((--t)*(t-2) - 1) + b;
 },
 easeInCubic: function (x, t, b, c, d) {
  return c*(t/=d)*t*t + b;
 },
 easeOutCubic: function (x, t, b, c, d) {
  return c*((t=t/d-1)*t*t + 1) + b;
 },
 easeInOutCubic: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t + b;
  return c/2*((t-=2)*t*t + 2) + b;
 },
 easeInQuart: function (x, t, b, c, d) {
  return c*(t/=d)*t*t*t + b;
 },
 easeOutQuart: function (x, t, b, c, d) {
  return -c * ((t=t/d-1)*t*t*t - 1) + b;
 },
 easeInOutQuart: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
  return -c/2 * ((t-=2)*t*t*t - 2) + b;
 },
 easeInQuint: function (x, t, b, c, d) {
  return c*(t/=d)*t*t*t*t + b;
 },
 easeOutQuint: function (x, t, b, c, d) {
  return c*((t=t/d-1)*t*t*t*t + 1) + b;
 },
 easeInOutQuint: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
  return c/2*((t-=2)*t*t*t*t + 2) + b;
 },
 easeInSine: function (x, t, b, c, d) {
  return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
 },
 easeOutSine: function (x, t, b, c, d) {
  return c * Math.sin(t/d * (Math.PI/2)) + b;
 },
 easeInOutSine: function (x, t, b, c, d) {
  return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
 },
 easeInExpo: function (x, t, b, c, d) {
  return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
 },
 easeOutExpo: function (x, t, b, c, d) {
  return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 },
 easeInOutExpo: function (x, t, b, c, d) {
  if (t==0) return b;
  if (t==d) return b+c;
  if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
  return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
 },
 easeInCirc: function (x, t, b, c, d) {
  return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
 },
 easeOutCirc: function (x, t, b, c, d) {
  return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
 },
 easeInOutCirc: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
  return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
 },
 easeInElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 },
 easeOutElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
 },
 easeInOutElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
  return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
 },
 easeInBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  return c*(t/=d)*t*((s+1)*t - s) + b;
 },
 easeOutBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
 },
 easeInOutBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158; 
  if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
  return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
 },
 easeInBounce: function (x, t, b, c, d) {
  return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
 },
 easeOutBounce: function (x, t, b, c, d) {
  if ((t/=d) < (1/2.75)) {
   return c*(7.5625*t*t) + b;
  } else if (t < (2/2.75)) {
   return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
  } else if (t < (2.5/2.75)) {
   return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
  } else {
   return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
  }
 },
 easeInOutBounce: function (x, t, b, c, d) {
  if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
  return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
 }
});

Create script.js

jQuery.noConflict();
jQuery(document).ready(function($){
        
       
function lightboxPhoto() {
 
 jQuery("a[rel^='prettyPhoto']").prettyPhoto({
   animationSpeed:'fast',
   slideshow:5000,
   theme:'light_rounded',
   show_title:false,
   overlay_gallery: false
  });
 
 }
 
  if(jQuery().prettyPhoto) {
 
  lightboxPhoto(); 
   
 }
 
 
if (jQuery().quicksand) {

// Clone applications to get a second collection
 var $data = $(".portfolio-area").clone();
 
 //NOTE: Only filter on the main portfolio page, not on the subcategory pages
 $('.portfolio-categ li').click(function(e) {
  $(".filter li").removeClass("active"); 
  // Use the last category class as the category to filter by. This means that multiple categories are not supported (yet)
  var filterClass=$(this).attr('class').split(' ').slice(-1)[0];
  
  if (filterClass == 'all') {
   var $filteredData = $data.find('.portfolio-item2');
  } else {
   var $filteredData = $data.find('.portfolio-item2[data-type=' + filterClass + ']');
  }
  $(".portfolio-area").quicksand($filteredData, {
   duration: 600,
   adjustHeight: 'auto'
  }, function () {

lightboxPhoto();
      });  
  $(this).addClass("active");    
  return false;
 });
 
}//if quicksand

});

Create jquery.prettyPhoto.js

Create prettyPhoto.css

div.light_rounded .pp_top .pp_left {
 background: url(../images/prettyPhoto/light_rounded/sprite.png) -88px -53px no-repeat;
}
div.light_rounded .pp_top .pp_middle {
 background:#fff;
}
div.light_rounded .pp_top .pp_right {
 background: url(../images/prettyPhoto/light_rounded/sprite.png) -110px -53px no-repeat;
}
div.light_rounded .pp_content .ppt {
 color:#000;
}
div.light_rounded .pp_content_container .pp_left, div.light_rounded .pp_content_container .pp_right {
 background:#fff;
}
div.light_rounded .pp_content {
 background-color:#fff;
}
div.light_rounded .pp_next:hover {
 background: url(../images/prettyPhoto/light_rounded/btnNext.png) center right no-repeat;
 cursor: pointer;
}
div.light_rounded .pp_previous:hover {
 background: url(../images/prettyPhoto/light_rounded/btnPrevious.png) center left no-repeat;
 cursor: pointer;
}
div.light_rounded .pp_expand {
 background: url(../images/prettyPhoto/light_rounded/sprite.png) -31px -26px no-repeat;
 cursor: pointer;
}
div.light_rounded .pp_expand:hover {
 background: url(../images/prettyPhoto/light_rounded/sprite.png) -31px -47px no-repeat;
 cursor: pointer;
}
div.light_rounded .pp_contract {
 background: url(../images/prettyPhoto/light_rounded/sprite.png) 0 -26px no-repeat;
 cursor: pointer;
}
div.light_rounded .pp_contract:hover {
 background: url(../images/prettyPhoto/light_rounded/sprite.png) 0 -47px no-repeat;
 cursor: pointer;
}
div.light_rounded .pp_close {
 width:75px;
 height:22px;
 background: url(../images/prettyPhoto/light_rounded/sprite.png) -1px -1px no-repeat;
 cursor: pointer;
}
div.light_rounded #pp_full_res .pp_inline {
 color:#000;
}
div.light_rounded .pp_gallery a.pp_arrow_previous, div.light_rounded .pp_gallery a.pp_arrow_next {
 margin-top:12px !important;
}
div.light_rounded .pp_nav .pp_play {
 background: url(../images/prettyPhoto/light_rounded/sprite.png) -1px -100px no-repeat;
 height:15px;
 width:14px;
}
div.light_rounded .pp_nav .pp_pause {
 background: url(../images/prettyPhoto/light_rounded/sprite.png) -24px -100px no-repeat;
 height:15px;
 width:14px;
}
div.light_rounded .pp_arrow_previous {
 background: url(../images/prettyPhoto/light_rounded/sprite.png) 0 -71px no-repeat;
}
div.light_rounded .pp_arrow_previous.disabled {
 background-position:0 -87px;
 cursor:default;
}
div.light_rounded .pp_arrow_next {
 background: url(../images/prettyPhoto/light_rounded/sprite.png) -22px -71px no-repeat;
}
div.light_rounded .pp_arrow_next.disabled {
 background-position: -22px -87px;
 cursor:default;
}
div.light_rounded .pp_bottom .pp_left {
 background: url(../images/prettyPhoto/light_rounded/sprite.png) -88px -80px no-repeat;
}
div.light_rounded .pp_bottom .pp_middle {
 background:#fff;
}
div.light_rounded .pp_bottom .pp_right {
 background: url(../images/prettyPhoto/light_rounded/sprite.png) -110px -80px no-repeat;
}
div.light_rounded .pp_loaderIcon {
 background: url(../images/prettyPhoto/light_rounded/loader.gif) center center no-repeat;
}
div.dark_rounded .pp_top .pp_left {
 background: url(../images/prettyPhoto/dark_rounded/sprite.png) -88px -53px no-repeat;
}
div.dark_rounded .pp_top .pp_middle {
 background: url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat;
}
div.dark_rounded .pp_top .pp_right {
 background: url(../images/prettyPhoto/dark_rounded/sprite.png) -110px -53px no-repeat;
}
div.dark_rounded .pp_content_container .pp_left {
 background: url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat-y;
}
div.dark_rounded .pp_content_container .pp_right {
 background: url(../images/prettyPhoto/dark_rounded/contentPattern.png) top right repeat-y;
}
div.dark_rounded .pp_content {
 background: url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat;
}
div.dark_rounded .pp_next:hover {
 background: url(../images/prettyPhoto/dark_rounded/btnNext.png) center right no-repeat;
 cursor: pointer;
}
div.dark_rounded .pp_previous:hover {
 background: url(../images/prettyPhoto/dark_rounded/btnPrevious.png) center left no-repeat;
 cursor: pointer;
}
div.dark_rounded .pp_expand {
 background: url(../images/prettyPhoto/dark_rounded/sprite.png) -31px -26px no-repeat;
 cursor: pointer;
}
div.dark_rounded .pp_expand:hover {
 background: url(../images/prettyPhoto/dark_rounded/sprite.png) -31px -47px no-repeat;
 cursor: pointer;
}
div.dark_rounded .pp_contract {
 background: url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -26px no-repeat;
 cursor: pointer;
}
div.dark_rounded .pp_contract:hover {
 background: url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -47px no-repeat;
 cursor: pointer;
}
div.dark_rounded .pp_close {
 width:75px;
 height:22px;
 background: url(../images/prettyPhoto/dark_rounded/sprite.png) -1px -1px no-repeat;
 cursor: pointer;
}
div.dark_rounded .currentTextHolder {
 color:#c4c4c4;
}
div.dark_rounded .pp_description {
 color:#fff;
}
div.dark_rounded #pp_full_res .pp_inline {
 color:#fff;
}
div.dark_rounded .pp_gallery a.pp_arrow_previous, div.dark_rounded .pp_gallery a.pp_arrow_next {
 margin-top:12px !important;
}
div.dark_rounded .pp_nav .pp_play {
 background: url(../images/prettyPhoto/dark_rounded/sprite.png) -1px -100px no-repeat;
 height:15px;
 width:14px;
}
div.dark_rounded .pp_nav .pp_pause {
 background: url(../images/prettyPhoto/dark_rounded/sprite.png) -24px -100px no-repeat;
 height:15px;
 width:14px;
}
div.dark_rounded .pp_arrow_previous {
 background: url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -71px no-repeat;
}
div.dark_rounded .pp_arrow_previous.disabled {
 background-position:0 -87px;
 cursor:default;
}
div.dark_rounded .pp_arrow_next {
 background: url(../images/prettyPhoto/dark_rounded/sprite.png) -22px -71px no-repeat;
}
div.dark_rounded .pp_arrow_next.disabled {
 background-position: -22px -87px;
 cursor:default;
}
div.dark_rounded .pp_bottom .pp_left {
 background: url(../images/prettyPhoto/dark_rounded/sprite.png) -88px -80px no-repeat;
}
div.dark_rounded .pp_bottom .pp_middle {
 background: url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat;
}
div.dark_rounded .pp_bottom .pp_right {
 background: url(../images/prettyPhoto/dark_rounded/sprite.png) -110px -80px no-repeat;
}
div.dark_rounded .pp_loaderIcon {
 background: url(../images/prettyPhoto/dark_rounded/loader.gif) center center no-repeat;
}
div.dark_square .pp_left, div.dark_square .pp_middle, div.dark_square .pp_right, div.dark_square .pp_content {
 background: url(../images/prettyPhoto/dark_square/contentPattern.png) top left repeat;
}
div.dark_square .currentTextHolder {
 color:#c4c4c4;
}
div.dark_square .pp_description {
 color:#fff;
}
div.dark_square .pp_loaderIcon {
 background: url(../images/prettyPhoto/dark_rounded/loader.gif) center center no-repeat;
}
div.dark_square .pp_content_container .pp_left {
 background: url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat-y;
}
div.dark_square .pp_content_container .pp_right {
 background: url(../images/prettyPhoto/dark_rounded/contentPattern.png) top right repeat-y;
}
div.dark_square .pp_expand {
 background: url(../images/prettyPhoto/dark_square/sprite.png) -31px -26px no-repeat;
 cursor: pointer;
}
div.dark_square .pp_expand:hover {
 background: url(../images/prettyPhoto/dark_square/sprite.png) -31px -47px no-repeat;
 cursor: pointer;
}
div.dark_square .pp_contract {
 background: url(../images/prettyPhoto/dark_square/sprite.png) 0 -26px no-repeat;
 cursor: pointer;
}
div.dark_square .pp_contract:hover {
 background: url(../images/prettyPhoto/dark_square/sprite.png) 0 -47px no-repeat;
 cursor: pointer;
}
div.dark_square .pp_close {
 width:75px;
 height:22px;
 background: url(../images/prettyPhoto/dark_square/sprite.png) -1px -1px no-repeat;
 cursor: pointer;
}
div.dark_square #pp_full_res .pp_inline {
 color:#fff;
}
div.dark_square .pp_gallery a.pp_arrow_previous, div.dark_square .pp_gallery a.pp_arrow_next {
 margin-top:12px !important;
}
div.dark_square .pp_nav .pp_play {
 background: url(../images/prettyPhoto/dark_square/sprite.png) -1px -100px no-repeat;
 height:15px;
 width:14px;
}
div.dark_square .pp_nav .pp_pause {
 background: url(../images/prettyPhoto/dark_square/sprite.png) -24px -100px no-repeat;
 height:15px;
 width:14px;
}
div.dark_square .pp_arrow_previous {
 background: url(../images/prettyPhoto/dark_square/sprite.png) 0 -71px no-repeat;
}
div.dark_square .pp_arrow_previous.disabled {
 background-position:0 -87px;
 cursor:default;
}
div.dark_square .pp_arrow_next {
 background: url(../images/prettyPhoto/dark_square/sprite.png) -22px -71px no-repeat;
}
div.dark_square .pp_arrow_next.disabled {
 background-position: -22px -87px;
 cursor:default;
}
div.dark_square .pp_next:hover {
 background: url(../images/prettyPhoto/dark_square/btnNext.png) center right no-repeat;
 cursor: pointer;
}
div.dark_square .pp_previous:hover {
 background: url(../images/prettyPhoto/dark_square/btnPrevious.png) center left no-repeat;
 cursor: pointer;
}
div.light_square .pp_left, div.light_square .pp_middle, div.light_square .pp_right, div.light_square .pp_content {
 background:#fff;
}
div.light_square .pp_content .ppt {
 color:#000;
}
div.light_square .pp_expand {
 background: url(../images/prettyPhoto/light_square/sprite.png) -31px -26px no-repeat;
 cursor: pointer;
}
div.light_square .pp_expand:hover {
 background: url(../images/prettyPhoto/light_square/sprite.png) -31px -47px no-repeat;
 cursor: pointer;
}
div.light_square .pp_contract {
 background: url(../images/prettyPhoto/light_square/sprite.png) 0 -26px no-repeat;
 cursor: pointer;
}
div.light_square .pp_contract:hover {
 background: url(../images/prettyPhoto/light_square/sprite.png) 0 -47px no-repeat;
 cursor: pointer;
}
div.light_square .pp_close {
 width:75px;
 height:22px;
 background: url(../images/prettyPhoto/light_square/sprite.png) -1px -1px no-repeat;
 cursor: pointer;
}
div.light_square #pp_full_res .pp_inline {
 color:#000;
}
div.light_square .pp_gallery a.pp_arrow_previous, div.light_square .pp_gallery a.pp_arrow_next {
 margin-top:12px !important;
}
div.light_square .pp_nav .pp_play {
 background: url(../images/prettyPhoto/light_square/sprite.png) -1px -100px no-repeat;
 height:15px;
 width:14px;
}
div.light_square .pp_nav .pp_pause {
 background: url(../images/prettyPhoto/light_square/sprite.png) -24px -100px no-repeat;
 height:15px;
 width:14px;
}
div.light_square .pp_arrow_previous {
 background: url(../images/prettyPhoto/light_square/sprite.png) 0 -71px no-repeat;
}
div.light_square .pp_arrow_previous.disabled {
 background-position:0 -87px;
 cursor:default;
}
div.light_square .pp_arrow_next {
 background: url(../images/prettyPhoto/light_square/sprite.png) -22px -71px no-repeat;
}
div.light_square .pp_arrow_next.disabled {
 background-position: -22px -87px;
 cursor:default;
}
div.light_square .pp_next:hover {
 background: url(../images/prettyPhoto/light_square/btnNext.png) center right no-repeat;
 cursor: pointer;
}
div.light_square .pp_previous:hover {
 background: url(../images/prettyPhoto/light_square/btnPrevious.png) center left no-repeat;
 cursor: pointer;
}
div.facebook .pp_top .pp_left {
 background: url(../images/prettyPhoto/facebook/sprite.png) -88px -53px no-repeat;
}
div.facebook .pp_top .pp_middle {
 background: url(../images/prettyPhoto/facebook/contentPatternTop.png) top left repeat-x;
}
div.facebook .pp_top .pp_right {
 background: url(../images/prettyPhoto/facebook/sprite.png) -110px -53px no-repeat;
}
div.facebook .pp_content .ppt {
 color:#000;
}
div.facebook .pp_content_container .pp_left {
 background: url(../images/prettyPhoto/facebook/contentPatternLeft.png) top left repeat-y;
}
div.facebook .pp_content_container .pp_right {
 background: url(../images/prettyPhoto/facebook/contentPatternRight.png) top right repeat-y;
}
div.facebook .pp_content {
 background:#fff;
}
div.facebook .pp_expand {
 background: url(../images/prettyPhoto/facebook/sprite.png) -31px -26px no-repeat;
 cursor: pointer;
}
div.facebook .pp_expand:hover {
 background: url(../images/prettyPhoto/facebook/sprite.png) -31px -47px no-repeat;
 cursor: pointer;
}
div.facebook .pp_contract {
 background: url(../images/prettyPhoto/facebook/sprite.png) 0 -26px no-repeat;
 cursor: pointer;
}
div.facebook .pp_contract:hover {
 background: url(../images/prettyPhoto/facebook/sprite.png) 0 -47px no-repeat;
 cursor: pointer;
}
div.facebook .pp_close {
 width:22px;
 height:22px;
 background: url(../images/prettyPhoto/facebook/sprite.png) -1px -1px no-repeat;
 cursor: pointer;
}
div.facebook #pp_full_res .pp_inline {
 color:#000;
}
div.facebook .pp_loaderIcon {
 background: url(../images/prettyPhoto/facebook/loader.gif) center center no-repeat;
}
div.facebook .pp_arrow_previous {
 background: url(../images/prettyPhoto/facebook/sprite.png) 0 -71px no-repeat;
 height:22px;
 margin-top:0;
 width:22px;
}
div.facebook .pp_arrow_previous.disabled {
 background-position:0 -96px;
 cursor:default;
}
div.facebook .pp_arrow_next {
 background: url(../images/prettyPhoto/facebook/sprite.png) -32px -71px no-repeat;
 height:22px;
 margin-top:0;
 width:22px;
}
div.facebook .pp_arrow_next.disabled {
 background-position: -32px -96px;
 cursor:default;
}
div.facebook .pp_nav {
 margin-top:0;
}
div.facebook .pp_nav p {
 font-size:15px;
 padding:0 3px 0 4px;
}
div.facebook .pp_nav .pp_play {
 background: url(../images/prettyPhoto/facebook/sprite.png) -1px -123px no-repeat;
 height:22px;
 width:22px;
}
div.facebook .pp_nav .pp_pause {
 background: url(../images/prettyPhoto/facebook/sprite.png) -32px -123px no-repeat;
 height:22px;
 width:22px;
}
div.facebook .pp_next:hover {
 background: url(../images/prettyPhoto/facebook/btnNext.png) center right no-repeat;
 cursor: pointer;
}
div.facebook .pp_previous:hover {
 background: url(../images/prettyPhoto/facebook/btnPrevious.png) center left no-repeat;
 cursor: pointer;
}
div.facebook .pp_bottom .pp_left {
 background: url(../images/prettyPhoto/facebook/sprite.png) -88px -80px no-repeat;
}
div.facebook .pp_bottom .pp_middle {
 background: url(../images/prettyPhoto/facebook/contentPatternBottom.png) top left repeat-x;
}
div.facebook .pp_bottom .pp_right {
 background: url(../images/prettyPhoto/facebook/sprite.png) -110px -80px no-repeat;
}
div.pp_pic_holder a:focus {
 outline:none;
}
div.pp_overlay {
 background:#000;
 display: none;
 left:0;
 position:absolute;
 top:0;
 width:100%;
 z-index:9500;
}
div.pp_pic_holder {
 display: none;
 position:absolute;
 width:100px;
 z-index:10000;
}
.pp_top {
 height:20px;
 position: relative;
}
* html .pp_top {
 padding:0 20px;
}
.pp_top .pp_left {
 height:20px;
 left:0;
 position:absolute;
 width:20px;
}
.pp_top .pp_middle {
 height:20px;
 left:20px;
 position:absolute;
 right:20px;
}
* html .pp_top .pp_middle {
 left:0;
 position: static;
}
.pp_top .pp_right {
 height:20px;
 left:auto;
 position:absolute;
 right:0;
 top:0;
 width:20px;
}
.pp_content {
 height:40px;
}
.pp_fade {
 display: none;
}
.pp_content_container {
 position: relative;
 text-align: left;
 width:100%;
}
.pp_content_container .pp_left {
 padding-left:20px;
}
.pp_content_container .pp_right {
 padding-right:20px;
}
.pp_content_container .pp_details {
 float: left;
 margin:10px 0 2px 0;
}
.pp_description {
 display: none;
 margin:0 0 5px 0;
}
.pp_nav {
 clear: left;
 float: left;
 margin:3px 0 0 0;
}
.pp_nav p {
 float: left;
 margin:2px 4px;
}
.pp_nav .pp_play, .pp_nav .pp_pause {
 float: left;
 margin-right:4px;
 text-indent: -10000px;
}
a.pp_arrow_previous, a.pp_arrow_next {
 display:block;
 float: left;
 height:15px;
 margin-top:3px;
 overflow: hidden;
 text-indent: -10000px;
 width:14px;
}
.pp_hoverContainer {
 position:absolute;
 top:0;
 width:100%;
 z-index:2000;
}
.pp_gallery {
 left:50%;
 margin-top: -50px;
 position:absolute;
 z-index:10000;
}
.pp_gallery ul {
 float: left;
 height:35px;
 margin:0 0 0 5px;
 overflow: hidden;
 padding:0;
 position: relative;
}
.pp_gallery ul a {
 border:1px #000 solid;
 border:1px rgba(0, 0, 0, 0.5) solid;
 display:block;
 float: left;
 height:33px;
 overflow: hidden;
}
.pp_gallery ul a:hover, .pp_gallery li.selected a {
 border-color:#fff;
}
.pp_gallery ul a img {
 border:0;
}
.pp_gallery li {
 display:block;
 float: left;
 margin:0 5px 0 0;
}
.pp_gallery li.default a {
 background: url(../images/prettyPhoto/facebook/default_thumbnail.gif) 0 0 no-repeat;
 display:block;
 height:33px;
 width:50px;
}
.pp_gallery li.default a img {
 display: none;
}
.pp_gallery .pp_arrow_previous, .pp_gallery .pp_arrow_next {
 margin-top:7px !important;
}
a.pp_next {
 background: url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;
 display:block;
 float: right;
 height:100%;
 text-indent: -10000px;
 width:49%;
}
a.pp_previous {
 background: url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;
 display:block;
 float: left;
 height:100%;
 text-indent: -10000px;
 width:49%;
}
a.pp_expand, a.pp_contract {
 cursor: pointer;
 display: none;
 height:20px;
 position:absolute;
 right:30px;
 text-indent: -10000px;
 top:10px;
 width:20px;
 z-index:20000;
}
a.pp_close {
 display:block;
 float: right;
 line-height:22px;
 text-indent: -10000px;
}
.pp_bottom {
 height:20px;
 position: relative;
}
* html .pp_bottom {
 padding:0 20px;
}
.pp_bottom .pp_left {
 height:20px;
 left:0;
 position:absolute;
 width:20px;
}
.pp_bottom .pp_middle {
 height:20px;
 left:20px;
 position:absolute;
 right:20px;
}
* html .pp_bottom .pp_middle {
 left:0;
 position: static;
}
.pp_bottom .pp_right {
 height:20px;
 left:auto;
 position:absolute;
 right:0;
 top:0;
 width:20px;
}
.pp_loaderIcon {
 display:block;
 height:24px;
 left:50%;
 margin: -12px 0 0 -12px;
 position:absolute;
 top:50%;
 width:24px;
}
#pp_full_res {
 line-height:1 !important;
}
#pp_full_res .pp_inline {
 text-align: left;
}
#pp_full_res .pp_inline p {
 margin:0 0 15px 0;
}
div.ppt {
 color:#fff;
 display: none;
 font-size:17px;
 margin:0 0 5px 15px;
 z-index:9999;
}
.clearfix:after {
 content: ".";
 display:block;
 height:0;
 clear:both;
 visibility: hidden;
}
.clearfix {
 display: inline-block;
}
* html .clearfix {
 height:1%;
}
.clearfix {
 display:block;
}
.pp_gallery a {
 background: none !important;
 border: none !important;
 display: none !important;
 height: 146px;
 padding: 2px !important;
 width: 235px;
}

Thursday 28 May 2015

Responsive Image Gallery with Light-box(zoom effect)