Using ListItExtended module and Isotope jQuery plugin for nice showcase page

After using ListIt Module for few times i fell in love with it.
The Module is very simple to use and with enough imagionation you can do anything with it.

As Original ListIt version was lacking of Summary and Detail view, was declared dead, some of us decided to bring it back to life and extend some of the function in forked version named ListItExtended.

So this time i would like to show you an example, how easy you could use ListItExtended module for a nice looking Portfolio or Showcase page.

This is what we are going to create.

list-it-extended.jpg

This is what we will need to accomplish our task:

Adding fileddefinitionsAfter you have above files and Module ready, got to "Content -> ListItExtended" and add two additional Fielddefinitions.
Name these Image (with alias image) and Description (with alias description).
These fields will be used later for image upload and description text in our ListItExtended controlled page (note: read module Help for various settings of "Extra" fields).

After fields were created we will also need few Categories that we will be using for Filtering effect.
In my example i created three categories under tab "Categories" named Nature, Buildings and Planes (note: enter lowercase value in field "Alias" and no spaces). 

When you have Fields and Categories created, move on to "Templates" tab and add new Summary template by clicking on "Add summary tmeplate".
In our Summary template we construct two unordered lists, one for our categories and filtering and second is filled with module specific smarty code that will be populated with our content.
And this is how our Template should look like.  

{* create category navigation *}
<div id="categories" class="clearfix">
    <ul id="filter" class="option-set clearfix">
        <li>
            <a href="#show-all" class="selected button">All</a>
        </li>
        <li>
            <a href="#nature" class="button">Nature</a>
        </li>
        <li>
            <a href="#buildings" class="button">Buildings</a>
        </li>
        <li>
            <a href="#planes" class="button">Planes</a>
        </li>
    </ul>
</div>
<ul id="items" class="clearfix">
{foreach from=$items item=item}
    {* capture image *}
    {capture assign='thumb'}{$item->fielddefs.image.dir}/{$item->fielddefs.image.value}{/capture}
    {* list our items *}
    <li class="item {$item->category_alias}">
        {supersizer class="thumb" path=$thumb width='200' height='180' fill_attr='true' crop='true' strip_tags='true'}
        <h3 class="item-title">{$item->title|cms_escape}</h3>
        {* our hidden content/ shown when clicked *}
        <div class="item-content clearfix">
            {supersizer path=$thumb width='300' height='280' fill_attr='true' crop='true' strip_tags='true'}
            <h2>{$item->title|cms_escape}</h2>
            {$item->fielddefs.description.value}
        </div>
    </li>
{/foreach}
</ul>

Now we have our Summary template ready and have to add some style.
Go to "Layout -> Stylsheets" and add following style to Stylesheet you are using or create new Stylsheet and attach it to your page Template.
Note that CSS3 was used here so IE Browser family like IE7 or IE8 will ignore some of the styles.

/* CLEAR FLOATS */
.clearfix:before, .clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}

/* ISOTOPE COMMON STYLE */
html, body {
    height: 100%;
}
.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
.isotope, .isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}
.isotope.no-transition, .isotope.no-transition .isotope-item {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    transition-duration: 0s;
}
/* FILTERING OPTIONS - our style catgory style/navigation */
#categories {
    font-size: 14px;
    padding: 10px 0 10px 10px;
}
#categories li {
    float: left;
}
#categories li a.selected {
    text-decoration: none;
    color: #fcd3a5;
}
#categories .option-set li a.selected {
    color: #fcd3a5;
}
.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px sans-serif;
    padding: 8px 18px 8px;
    margin-right: 10px;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter: progid : DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.button:hover {
    text-decoration: none;
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter: progid : DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.button:active {
    position: relative;
    top: 1px;
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
    filter: progid : DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

/* ELEMENT CONTAINER */
.item {
    height: 190px;
    width: 210px;
    margin: 10px;
    float: left;
    overflow: hidden;
    position: relative;
    background: #020202;
    border-radius: 6px 0 6px 0;
    padding: 5px;
}
h3.item-title {
    position: absolute;
    bottom: 8px;
    left: 0;
    font-size: 14px;
    color: #f78d1d;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
    line-height: 32px;
    width: 100%;
    cursor: pointer;
}

/* EXPANDED BOX */
.item-content {
    display: none; /* for usability you could remove this */
}

.item-content img {
    -moz-box-shadow: 0px 0px 5px #868681;
    -webkit-box-shadow: 0px 0px 5px #868681;
    box-shadow: 0px 0px 5px #868681;
    border: 3px solid #fff;
    margin: 5px 18px 5px 5px;
    float: left;
}
.item-content h2 {
    font-size: 18px;
    color: #f78d1d;
    font-weight: bold;
    margin-top: 6px;
}
.item-content p {
    font-size: 12px;
    margin-bottom: 1em;
}
.item-content a {
    font-size: 12px;
    color: #df3950;
}
.item.large, .variable-sizes .item.large {
    width: 690px; /* you can change this width, i used 690px so another thumb item still fits in a row */
    height: auto;
    z-index: 100;
}
img.thumb {
    position: absolute;
    top: 5px;
    left: 7px;
    border: 3px solid #fff;
    border-radius: 6px 0 6px 0;
}

So we have our Summary template ready and styled. It's time to move on to our page Template and add some jQuery magic.
First thing we need is jQuery Framework and Isotope plugin in our page Template.
Upload jquery.isotope.min.js file via FTP of your choice for exmaple in uploads/your-theme-files folder, then go to "Layout -> Templates" and open the Template you are about to use. 

Include jQuery and Isotope with following code either before closing </head> or </body> tag (i prefer to load js as last). 

{* if you use local copy of jquery framework there is no need to use it twice so remove it *}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="{uploads_url}/your-theme-files/jquery.isotope.min.js" type="text/javascript"></script> 

And now isotope functions that will control our layout behavior. I would recommend a separate file for example functions.js where you can insert the code and include like files above, but for deomnstration i simply entered this inside my page template

<script type="text/javascript">$(function() {
    var $container = $('#items');
    //  $('.expanded').css('display','none'); {* uncomment this if you remove display:none; in your css for class .item-content *}
    $('#filter').find('a').click(function() {
        // get the href attribute
        var filterName = '.' + $(this).attr('href').slice(1);
        filterName = filterName === '.show-all' ? '*' : filterName;
        $container.isotope({
            filter : filterName
        });
        return false;
    });
    // change size of clicked element
    $container.find('.item').live('click', function() {
        if ($(this).is('.large')) {
            jQuery('.item-content', this).fadeToggle("fast", "linear");
            jQuery('.thumb', this).fadeToggle("fast", "linear");
            jQuery('h3', this).fadeToggle("fast", "linear");
            $(this).toggleClass('large');
            $container.isotope('reLayout');
        } else {
            jQuery('.large > .item-content').fadeToggle("fast", "linear");
            jQuery('.large > .thumb').fadeToggle("fast", "linear");
            jQuery('.large > h3').fadeToggle("fast", "linear");
            $container.find('.large').removeClass('large');
            jQuery('.item-content', this).fadeToggle("fast", "linear");
            jQuery('.thumb', this).fadeToggle("fast", "linear");
            jQuery('h3', this).fadeToggle("fast", "linear");
            $(this).toggleClass('large');
            $container.isotope('reLayout');
        }
    });
    // switch selected class on buttons
    $('#categories').find('.option-set a').click(function() {
        var $this = $(this);
        // don't proceed if already selected
        if (!$this.hasClass('selected')) {
            $this.parents('.option-set').find('.selected').removeClass('selected');
            $this.addClass('selected');
        }
    });
    // isotope behavior
    $container.isotope({
        itemSelector : '.item',
        layoutMode : 'fitRows',
        masonry : {
            columnWidth : 220
        },
        masonryHorizontal : {
            rowHeight : 230
        },
        animationEngine : 'jquery'
    });
});
</script>

That's it all you need to do now is add ListItExtended call in page where you want this displayed.

{ListIt2 summarytemplate="name-of-your-template"}
ALL-INKL.COM - Webhosting Server Hosting Domain Provider

Comments