Bootstrap Snippet Bootstrap Portfolio Sliding Page using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="bg-content">       
  <!-- Content -->      
      <div id="content"><div class="ic"></div>
    <div class="container">
          <div class="row">
        <article class="span12">
        <h4>Portfolio</h4>
         </article>
        <div class="clear"></div>
         <ul class="portfolio clearfix">           
           <li class="box"><a href="img/image-blank.png" class="magnifier" ><img alt="" src="img/work/1.jpg">paste image here</a></li> 
           <li class="box"><a href="img/image-blank.png" class="magnifier" ><img alt="" src="img/work/2.jpg">paste image here</a></li> 
           <li class="box"><a href="img/image-blank.png" class="magnifier" ><img alt="" src="img/work/3.jpg">paste image here</a></li> 
           <li class="box"><a href="img/image-blank.png" class="magnifier" ><img alt="" src="img/work/4.jpg">paste image here</a></li> 
           <div class="clear"></div>
           <li class="box"><a href="img/image-blank.png" class="magnifier" ><img alt="" src="img/work/9.jpg">paste image here</a></li> 
           <li class="box"><a href="img/image-blank.png" class="magnifier" ><img alt="" src="img/work/10.jpg">paste image here</a></li> 
           <li class="box"><a href="img/image-blank.png" class="magnifier" ><img alt="" src="img/work/11.jpg">paste image here</a></li> 
           <li class="box"><a href="img/image-blank.png" class="magnifier" ><img alt="" src="img/work/12.jpg">paste image here</a></li> 
           </ul> 
      </div>
        </div>
  </div>
    </div> </div>
    
    <script type="text/javascript">if($(window).width()>1024){document.write("<"+"script src='js/jquery.preloader.js'></"+"script>");}  </script>
    <script>        
         jQuery(window).load(function() {   
         $x = $(window).width();        
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#content {
    position: relative;
    padding: 0 0 40px;
}
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
    width: 724px;
}
.container {
    margin-right: auto;
    margin-left: auto;
}
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
    width: 940px;
}
div {
    display: block;
}
body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #707070;
    background: #ffffff;
}
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
 * @name        jQuery touchTouch plugin
 * @author      Martin Angelov
 * @version     1.0
 * @url         http://tutorialzine.com/2012/04/mobile-touch-gallery/
 * @license     MIT License
 */
(function(){
    
    /* Private variables */
    
    var overlay = $('<div id="galleryOverlay">'),
        slider = $('<div id="gallerySlider">'),
        prevArrow = $('<a id="prevArrow"></a>'),
        nextArrow = $('<a id="nextArrow"></a>'),
        overlayVisible = false;
        
        
    /* Creating the plugin */
    
    $.fn.touchTouch = function(){
        
        var placeholders = $([]),
            index = 0,
            items = this;
        
        // Appending the markup to the page
        overlay.hide().appendTo('body');
        slider.appendTo(overlay);
        
        // Creating a placeholder for each image
        items.each(function(){
            placeholders = placeholders.add($('<div class="placeholder">'));
        });
    
        // Hide the gallery if the background is touched / clicked
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap Portfolio Sliding Page "
Bootstrap 3.3.0 Snippet by Bash1

Related: See More

Questions / Comments:

"Bootstrap Portfolio Sliding Page " Bootstrap 3.3.0 Snippet by Bash1

Related: See More

Questions / Comments:

"Bootstrap Portfolio Sliding Page "
Bootstrap 3.3.0 Snippet by Bash1