API tools faq
paste
Advertisement
Guest User

Isotope/Swiper issue

a guest
Mar 21st, 2014
281
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.10 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>NICOLAS BLANDIN PHOTOGRAPHY | SONS OF THE PÁRAMO </title>
  6. <link rel="stylesheet" type="text/css" href="css/style.css">
  7. <link rel="stylesheet" type="text/css" href="fonts/stylesheet.css">
  8.   <link rel="stylesheet" href="swiper/idangerous.swiper.css">
  9.   <script defer src="swiper/idangerous.swiper-2.3.js"></script>
  10.         <script
  11.            type="text/javascript"
  12.            src="scripts/jquery-1.10.2.min.js">
  13.         </script>
  14.     <script src="scripts/jquery.isotope.min.js"></script>
  15.     <script src="scripts/imagesloaded.pkgd.min.js"></script>   
  16.  
  17. </head>
  18.  
  19. <script type="text/javascript">
  20.     //<![CDATA[
  21.        $(window).load(function() { // makes sure the whole site is loaded
  22.         $('#thumbnailgallery').hide();
  23.            $('#status').fadeOut(); // will first fade out the loading animation
  24.            $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
  25.  
  26.         $('.thumbnailbutton').click(function() {
  27.             $('.swiper-container').fadeToggle(50);
  28.             $('#thumbnailgallery').delay(20).fadeToggle(50);
  29.             $('body').css('overflow','auto');
  30.        
  31.         })
  32.        })
  33.    //]]>
  34.  
  35. </script>
  36.  
  37.  
  38. <body>
  39.  
  40. <div id="thumbnailgallery" style="position: absolute; top: -6px;">
  41.    
  42.    
  43. <style>
  44. .isotope-item {
  45.     margin-right: 30px;
  46.     background-color: black;
  47.     width: 150px;
  48.     height: 150px;
  49. };
  50.  
  51. </style>
  52.  
  53. <script>
  54.     imagesLoaded( '#thumbnailgallery', function(){
  55.     var $container = $('#thumbnailgallery');
  56.  
  57.       $container.isotope({
  58.         itemSelector: '.element',
  59.     layoutMode: 'masonry',
  60.         masonryHorizontal: {
  61.         columnWidth: 240,
  62.         rowHeight: 240,
  63.         gutterwidth: 50},
  64.       });
  65.     });
  66. </script>
  67.             <div class="element thumb"></div>
  68.             <div class="element thumb"></div>
  69.             <div class="element thumb"></div>
  70.             <div class="element thumb"></div>
  71.             <div class="element thumb"></div>
  72.             <div class="element thumb"></div>
  73.             <div class="element thumb"></div>
  74.             <div class="element thumb"></div>
  75.             <div class="element thumb"></div>
  76.             <div class="element thumb"></div>
  77.             <div class="element thumb"></div>
  78.             <div class="element thumb"></div>
  79.             <div class="element thumb"></div>
  80.             <div class="element thumb"></div>
  81.             <div class="element thumb"></div>
  82.             <div class="element thumb"></div>
  83.             <div class="element thumb"></div>
  84.             <div class="element thumb"></div>
  85.             <div class="element thumb"></div>
  86.             <div class="element thumb"></div>
  87.             <div class="element thumb"></div>
  88.             <div class="element thumb"></div>
  89.             <div class="element thumb"></div>
  90.             <div class="element thumb"></div>
  91. </div>
  92.     <div id="container">
  93.  
  94.  
  95.             <!--<span id="offset" style="position: fixed; top: 0px; left: 0px;"></span>-->
  96.  
  97.  
  98. <div class="swiper-container thumbnailfade">
  99.    
  100.     <div id="slider" class="swiper-wrapper">
  101.  
  102.             <div  class="swiper-slide paramoswipe lazy">
  103.                 <div class="imgwrap" style="position: relative; display: inline-block;">
  104.                 <img src="/images/meta/optim/nicolas_blandin_meta_01.jpg" />
  105.                 <?php include 'includes/gallerynav.php'; ?>
  106.                 </div>
  107.           </div>
  108.            
  109.             <div  class="swiper-slide paramoswipe lazy">
  110.                 <div class="imgwrap" style="position: relative; display: inline-block;">
  111.                 <img src="/images/meta/optim/nicolas_blandin_meta_02.jpg" class="metafirst" />
  112.                 <img src="/images/meta/optim/nicolas_blandin_meta_03.jpg" />            
  113.                 <?php include 'includes/gallerynav.php'; ?>
  114.                 </div>
  115.           </div>
  116.  
  117.     <!-- end swiper container -->
  118.     </div>
  119. <?php include 'includes/swiper.php'; ?>
  120.    
  121. </body>
  122. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!