Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Junior Member
    Join Date
    Oct 2013
    Posts
    1
    Member #
    37513

    Question Masonry Javascript Grid Layout LIbrary

    If you go to Masonry that is one of the javascript elements within the website template I am using.

    You can see my webpage at BUILD tamu. My problem is minor- If you go to the portion of the page that is labeled as Progress, the section doesn't automatically display the pictures, instead, I have to click on "Week 1," and it will then display the pictures.

    I have included what I believe is relevant code. It won't let me upload the masonry.pkgd.min.js. However, you can download or view it by going to http://buildtamu.com/js/masonry.pkgd.min.js.

    Here is the Main.js part of file regarding the Masonry code:

    Code:
    /**** Portfolio masonry ****/
    var portfolio = document.querySelector('.portfolio-wrapper');
    var portfolioContainer = portfolio.querySelector('.masonry-container');
    
    jQuery(window).load(function() {
    	var msnry = new Masonry(portfolioContainer, {
    		itemSelector: '.masonry-container a',
    		columnWidth: '.grid-sizer',
    	});
    
    	jQuery(function() {
    		var showmore = true;
    		$('#portfolio-show-more').click(function(e) {
    			e.preventDefault();
    			if (showmore === false) {
    				shakeButton(this);
    				return false;
    			}
    
    			var elems = [];
    			var portfolioId = 1;
    
    			$.get('inc/portfolio-content/portfolio_more_' + portfolioId + '.php', function(data) {
    				var elems = [];
    				$('.portfolio-more-content').html(data);
    				$('.portfolio-more-content a').addClass('load-this').hide();
    				$('.portfolio-more-content a').each(function(i, item) {
    					$('.masonry-container').append(item);
    					elems.push(item);
    				});
    
    				$('.masonry-container a.load-this').imagesLoaded(function() {
    					msnry.appended(elems);
    					$('.load-this').show();
    					msnry.layout();
    				});
    
    				$('.masonry-container .load-this').removeClass('load-this');
    
    			}, 'html');
    
    			$('.portfolio-more-content a').each(function(i, data) {
    				$('.masonry-container').append(data);
    				elems.push(data);
    			});
    
    			msnry.appended(elems);
    			showmore = false;
    		});
    
    		$('.portfolio .section-nav a').click(function(e) {
    			e.preventDefault();
    			$('.portfolio .section-nav .portfolio-selected').removeClass('portfolio-selected');
    			$(this).addClass('portfolio-selected');
    		});
    
    		$('.portfolio-select').click(function(e) {
    			e.preventDefault();
    			showmore = true;
    			var items = msnry.getItemElements();
    			msnry.remove(items);
    			var portfolioId = $(this).data('portfolio');
    			$.get('inc/portfolio-content/portfolio_more_' + portfolioId + '.php', function(data) {
    				var elems = [];
    				$('.portfolio-more-content').html(data);
    				$('.portfolio-more-content a').addClass('load-this').hide();
    				$('.portfolio-more-content a').each(function(i, item) {
    					$('.masonry-container').append(item);
    					elems.push(item);
    				});
    
    				$('.masonry-container a.load-this').imagesLoaded(function() {
    					msnry.appended(elems);
    					$('.load-this').show();
    					msnry.layout();
    				});
    
    				$('.masonry-container .load-this').removeClass('load-this');
    			}, 'html');
    		});
    	});
    });
    Here is the part of my index.html
    Code:
    </div>				
    				<div class="container portfolio" id="portfolio">
    					<div class="row">
    						<div class="col-xs-12 col-sm-12 col-md-12">
    							<div class="banner">
    								<h3>Progress</h3>
    								<div class="edge"></div>	
    								<div class="progressbar"></div>
    								<ul class="section-nav">
    									<!--<li><a href="#" alt="" class="portfolio-select portfolio-selected" data-portfolio="1">all</a></li>-->
    									<li><a href="#" alt="" class="portfolio-select portfolio-selected" data-portfolio="2">week 1</a></li>
    									<!--<li><a href="#" alt="" class="portfolio-select" data-portfolio="3">week 2</a></li>
    									<li><a href="#" alt="" class="portfolio-select" data-portfolio="1">week 3</a></li>
    									<li><a href="#" alt="" class="portfolio-select" data-portfolio="2">week 4</a></li>
    									<li><a href="#" alt="" class="portfolio-select" data-portfolio="3">week 5</a></li>
    									<li><a href="#" alt="" class="portfolio-select" data-portfolio="1">week 6</a></li>
    									<li><a href="#" alt="" class="portfolio-select" data-portfolio="2">week 7</a></li>-->
    								</ul>
    							</div>
    						</div>
    					</div>
    				</div>
    <div class="container portfolio-wrapper anim1">
    	<div class="row">
    	  <div id="basic" class="masonry-container">
    		  <div class="grid-sizer"></div>
    		  <!--<?php include 'portfolio-content/portfolio_more_1.php';?>-->
    		  <?php include 'portfolio-content/portfolio_more_2.php';?>
     		  <!--<?php include 'portfolio-content/portfolio_more_3.php';?>-->
    	  </div>
    	</div>
    </div>
    <div class="hidden portfolio-more-content"></div>
    <!--<div class="row portfolio-show-more-container">
    	<button type="button" class="btn btn-default" id="portfolio-show-more">Show more...</button>	
    </div>-->
    Any ideas or direction?

    Many thanks

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:31 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com