The Masonry module is a powerful module that pulls your article from a category or categories and can display them in masonry style format. The module automatically changes on screen resize to fit the screen a user is viewing them on. You can choose to output a "load more" button that will load a set number of articles you define via AJAX. The second method to load articles is "scroll to load" which will load articles once you scroll to the bottom of your screen. You simply assign an intro image under your "Image and Links" parameters area of your article and then if you choose to show it in the module it will show up. The intro text will show up if you've added text to your article before your read more button.
Features:
Choose to enable scroll to load or load more or neither
Show or hide category elector
Show or hide read more
Set how many articles are to be shown
Set how many articles are to load via AJAX button or scroll methods
Order articles by publish date, created date, random or ordering
Show or hide hits
Responsive ready and more, view the below admin screenshot to see all the features
Masonry Article Layout:
Loading:
When you click "load more" or are using the "scroll to load" option a loading DIV will show when the AJAX is working:
The below code is custom code we generated for the modules and layout on this design
Comments:
Frank Thomas“I love the local skatepark in downtown Bustltown“Julie Hartment“We should catch up sometime, its great weather out there Lorem ipsum dolor ipsum dolor“Bill Robertson“Just learned how to do that yesterday, this month has been great“
<div style="float:left;margin-right: 24px;height:90px;"><img src="/images/man1.jpg" class="s5_testimonials" alt="man" /></div>
<span class="s5_highlightfont s5_username">Frank Thomas</span>
<span class="s5_userquote">“I love the local skatepark in downtown Bustltown“</span>
<div style="clear:both;height:15px;"></div>
<div style="float:left;margin-right: 24px;height:90px;"><img src="/images/woman.jpg" class="s5_testimonials" alt="woman" /></div>
<span class="s5_highlightfont s5_username">Julie Hartment</span>
<span class="s5_userquote">“We should catch up sometime, its great weather out there Lorem ipsum dolor ipsum dolor“</span>
<div style="clear:both;height:15px;"></div>
<div style="float:left;margin-right: 24px;height:90px;"><img src="/images/man2.jpg" class="s5_testimonials" alt="man2" /></div>
<span class="s5_highlightfont s5_username">Bill Robertson</span>
<span class="s5_userquote">“Just learned how to do that yesterday, this month has been great“</span>
<div style="clear:both;height:15px;"></div>
Image and Content Fader:
The below code is used for the slides on the Image and Content Fader:
<span class="left">
<span class="slide_title">
The final <span class="s5_highlight">hobbit</span> release
<span class="s5_highlight">hits</span> theaters
</span>
<span class="slide_text">
Read more for our review, trailer and interview
</span>
<br />
Frank Thomas“I love the local skatepark in downtown Bustltown“Julie Hartment“We should catch up sometime, its great weather out there Lorem ipsum dolor ipsum dolor“Bill Robertson“Just learned how to do that yesterday, this month has been great“Jill Cladsenon“Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorI love the local skatepark in downtown Bustltown“Betty Phils“We should catch up sometime, its great weather out there“