Responsive Website Design: May 2015

Thursday 28 May 2015

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;
}

Monday 25 May 2015

Responsive Newsletter design

Create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Newsletter design</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="main-wrapper">
  <div class="header">
    <div class="left">
      <p>Simple <span style="color:#0099CC">Newsletter</span></p>
    </div>
    
    <div class="right">
      <p>f |<span style="color:#00FFFF"> tw</span> |<span style="color:#0066CC"> li</span> </p>
    </div>
    
  </div>
  
  <div class="banner"> <img src="http://www.curdweb.com/navin/click.com/images/slider/slider4.png"> </div>
  
  <div class="banner-content">
    <p>Newsletters are published by clubs, churches, societies, associations, and businesses—especially companies—to provide information of interest to members, customers, or employees. A newsletter may be considered "grey literature". Newsletters delivered electronically via email (e-Newsletters) have gained rapid acceptance for the same reasons email in general has gained popularity over printed correspondence.</p>
    <p>Some newsletters are created as money-making ventures and sold directly to subscribers. Sending newsletters to customers and prospects is a common marketing strategy, which can have benefits and drawbacks. Public organizations emit newsletters in order to improve or maintain their reputation in the society. General attributes of newsletters include news and upcoming events of the related organization, as well as contact information.</p>
  </div>
  
  <div class="block-container">
    <div class="block"> <img src="http://curdweb.com/navin/click.com/images/gallery1.png"> </div>
    
    <div class="block"> <img src="http://curdweb.com/navin/click.com/images/gallery2.png"> </div>
    
    <div class="block"> <img src="http://curdweb.com/navin/click.com/images/gallery3.png"> </div>
    
    <div class="article">
      <h3>OFFERS</h3>
      <p>Enjoy travel OTTY only in $200</p>
      <p class="button">Read More</p>
    </div>
    
    <div class="article">
      <h3>OFFERS</h3>
      <p>Enjoy travel OTTY only in $200</p>
      <p class="button">Read More</p>
    </div>
    
    <div class="article">
      <h3>OFFERS</h3>
      <p>Enjoy travel OTTY only in $200</p>
      <p class="button">Read More</p>
    </div>
    
  </div>
  
</div>

<div class="footer">
  <div class="left"> <span style="color:#FFFFFF">Simple Newsletter<br>
    India<br>
    Bangalore</span></div>
  <div class="right"> <span style="color:#FFFFFF">Unsubscribe | Manage your subscriptions<br>
    Copyright 2015.<br>
    All Right Reserved.</span></div>
</div>

</body>
</html>

Create style.css

@charset "utf-8";
body {
 background:#0F6DA1;
}
.main-wrapper {
 padding:20px;
 margin:auto;
 background:#0F6DA1;
 box-shadow: 5px 12px 14px 5px #333;
}
.header {
 margin: 0 auto auto;
 padding: 33px;
 background:#FFFFFF;
}
.left {
 float:left;
}
.left p {
 color: #0099ff;
 font-size: 30px;
 font-weight: bold;
 margin-top: -18px;
}
.right {
 float:right;
}
.right p {
 color: #0099ff;
 font-size: 30px;
 font-weight: bold;
 margin-top: -18px;
 font-family: tahoma;
}
.banner {
 padding:10px;
 margin:auto;
 background:#FFFFFF;
 height:310px;
 box-shadow: 5px 12px 14px 5px #333;
}
.banner img {
 margin:auto;
 width:100%;
 height:100%;
}
.banner-content {
 margin:auto;
 padding:10px;
 background:#FFFFFF;
}
.banner-content p {
 color: #333;
 font-size: 20px;
 line-height: 27px;
 text-align: justify;
}
.block-container {
 padding:10px;
 margin:auto;
 background:#FFFFFF;
 overflow:auto;
}
.block {
 float: left;
 height: 200px;
 margin: 10px;
 padding: 10px;
 width: 355px;
 background:#ddd;
}
.article {
 float: left;
 margin: 10px;
 padding: 10px;
 width: 355px;
 background:#FFFFFF;
}
.block img {
 margin:auto;
 width:100%;
 height:100%;
}
.block p {
 text-align:justify;
 color:#ccc;
}
.footer {
 padding:10px;
 /*background:#FFFFFF;*/
margin:auto;
 overflow:auto;
}
.footer p {
 text-align:center;
 color:#fff;
}
.button {
 border-style: solid;
 border-width: 0;
 cursor: pointer;
 font-family: inherit;
 font-weight: bold;
 line-height: normal;
 margin: 0 0 1.25em;
 position: relative;
 text-decoration: none;
 text-align: center;
 display: inline-block;
 padding-top: 0.75em;
 padding-right: 1.5em;
 padding-bottom: 0.8125em;
 padding-left: 1.5em;
 font-size: 1em;
 background-color: #2daebf;
 border-color: #238896;
 color: white;
 display: inline-block;
 transition: background-color 300ms ease-out;
 border-radius: 2px;
 box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2) inset !important;
 -moz-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2) inset;
}
 @media screen and (min-device-width: 320px) and (max-device-width: 756px) {
 .header {
 overflow:auto;
}
.block {
 width: 84%;
}
.article {
 width: 84%;
}
}

Friday 22 May 2015

show and hide dropdown menu / Expanding and collapsing Menu

index.html

<!doctype html>
<html lang=''>
<head>
   <meta charset='utf-8'>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>
   <title>Expanding and collapsing Menu</title>
</head>
<body>

<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='active has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

</body>
<html>

script.js

( function( $ ) {
$( document ).ready(function() {
$('#cssmenu li.has-sub>a').on('click', function(){
  $(this).removeAttr('href');
  var element = $(this).parent('li');
  if (element.hasClass('open')) {
   element.removeClass('open');
   element.find('li').removeClass('open');
   element.find('ul').slideUp();
  }
  else {
   element.addClass('open');
   element.children('ul').slideDown();
   element.siblings('li').children('ul').slideUp();
   element.siblings('li').removeClass('open');
   element.siblings('li').find('li').removeClass('open');
   element.siblings('li').find('ul').slideUp();
  }
 });

$('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');

(function getColor() {
  var r, g, b;
  var textColor = $('#cssmenu').css('color');
  textColor = textColor.slice(4);
  r = textColor.slice(0, textColor.indexOf(','));
  textColor = textColor.slice(textColor.indexOf(' ') + 1);
  g = textColor.slice(0, textColor.indexOf(','));
  textColor = textColor.slice(textColor.indexOf(' ') + 1);
  b = textColor.slice(0, textColor.indexOf(')'));
  var l = rgbToHsl(r, g, b);
  if (l > 0.7) {
   $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
   $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
  }
  else
  {
   $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
   $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
  }
 })();

function rgbToHsl(r, g, b) {
     r /= 255, g /= 255, b /= 255;
     var max = Math.max(r, g, b), min = Math.min(r, g, b);
     var h, s, l = (max + min) / 2;

if(max == min){
         h = s = 0;
     }
     else {
         var d = max - min;
         s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
         switch(max){
             case r: h = (g - b) / d + (g < b ? 6 : 0); break;
             case g: h = (b - r) / d + 2; break;
             case b: h = (r - g) / d + 4; break;
         }
         h /= 6;
     }
     return l;
 }
});
} )( jQuery );

style.css

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: 200px;
  font-family: Helvetica, Arial, sans-serif;
  color: #ffffff;
}
#cssmenu ul ul {
  display: none;
}
.align-right {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 15px 20px;
  border-left: 1px solid #1682ba;
  border-right: 1px solid #1682ba;
  border-top: 1px solid #1682ba;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  background: #36aae7;
  background: -webkit-linear-gradient(#36aae7, #1fa0e4);
  background: -moz-linear-gradient(#36aae7, #1fa0e4);
  background: -o-linear-gradient(#36aae7, #1fa0e4);
  background: -ms-linear-gradient(#36aae7, #1fa0e4);
  background: linear-gradient(#36aae7, #1fa0e4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a,
#cssmenu > ul > li.open > a {
  color: #eeeeee;
  background: #1fa0e4;
  background: -webkit-linear-gradient(#1fa0e4, #1992d1);
  background: -moz-linear-gradient(#1fa0e4, #1992d1);
  background: -o-linear-gradient(#1fa0e4, #1992d1);
  background: -ms-linear-gradient(#1fa0e4, #1992d1);
  background: linear-gradient(#1fa0e4, #1992d1);
}
#cssmenu > ul > li.open > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid #1682ba;
}
#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
  border-bottom: 1px solid #1682ba;
}
.holder {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.holder::after,
.holder::before {
  display: block;
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  right: 20px;
  z-index: 10;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.holder::after {
  top: 17px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}
#cssmenu > ul > li > a:hover > span::after,
#cssmenu > ul > li.active > a > span::after,
#cssmenu > ul > li.open > a > span::after {
  border-color: #eeeeee;
}
.holder::before {
  top: 18px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-top-color: inherit;
  border-left-color: inherit;
}
#cssmenu ul ul li a {
  cursor: pointer;
  border-bottom: 1px solid #32373e;
  border-left: 1px solid #32373e;
  border-right: 1px solid #32373e;
  padding: 10px 20px;
  z-index: 1;
  text-decoration: none;
  font-size: 13px;
  color: #eeeeee;
  background: #49505a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
  background: #424852;
  color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
  box-shadow: none;
}
#cssmenu ul ul ul li:first-child > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul ul li a {
  padding-left: 30px;
}
#cssmenu > ul > li > ul > li:last-child > a,
#cssmenu > ul > li > ul > li.last > a {
  border-bottom: 0;
}
#cssmenu > ul > li > ul > li.open:last-child > a,
#cssmenu > ul > li > ul > li.last.open > a {
  border-bottom: 1px solid #32373e;
}
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
  border-bottom: 0;
}
#cssmenu ul ul li.has-sub > a::after {
  display: block;
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  right: 20px;
  z-index: 10;
  top: 11.5px;
  border-top: 2px solid #eeeeee;
  border-left: 2px solid #eeeeee;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#cssmenu ul ul li.active > a::after,
#cssmenu ul ul li.open > a::after,
#cssmenu ul ul li > a:hover::after {
  border-color: #ffffff;
}

How to Create a Responsive Website in about 15 Minutes

Create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive Design</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="responsive.css">
</head>
<body>
<div class="wrapper">
  <header>
    <p>this is header</p>
  </header>
  <div class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Blogs</a></li>
      <li><a href="#">Contacts</a></li>
    </ul>
  </div>
  
  <div class="aside-left">
    <h2>Responsive web design</h2>
    <p>Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).<br>
      A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids,flexible images, and CSS3 media queries, an extension of the @media rule, in the following ways:<br>
      The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.<br>
      <br>
      Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
      Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.</p>
  </div>
  
  <div class="aside-right">
    <h2>HTML5</h2>
    <p>HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. As of October 2014 this is the final and complete fifth revision of the HTML standard of the World Wide Web Consortium (W3C).The previous version, HTML 4, was standardised in 1997.<br>
      Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML.<br>
      <br>
      Following its immediate predecessors HTML 4.01 and XHTML 1.1, HTML5 is a response to the fact that the HTML and XHTML in common use on the World Wide Web are a mixture of features introduced by various specifications, along with those introduced by software products such as web browsers, those established by common practice.</p>
  </div>
  
  <div class="main-container">
    <h2>Cascading Style Sheets</h2>
    <p>Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
      
      CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts.This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple HTML pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content, such as semantically insignificant tables that were widely used to format pages before consistent CSS rendering was available in all major browsers. CSS makes it possible to separate presentation instructions from the HTML content in a separate file or style section of the HTML file. For each matching HTML element, it provides a list of formatting instructions. For example, a CSS rule might specify that "all heading 1 elements should be bold," leaving pure semantic HTML markup that asserts </p>
  </div>
  
  <footer>
    <p>This is footer</p>
  </footer>
</div>

</body>
</html>

create style.css

create responsive.css

Note :- for Responsive Web design you can use these media queries

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}