Portfolio

Portfolio Page

Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.

copytextpop-up

<div class="container_12">
    <div class="pro_wrapper">
        <div class="grid_4">
            <div class="pro_wrapper pro_pad_port">
                <a data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image" href="YourBigImage.jpg"><img src="YourImage.jpg" alt=""></a>
                <p> Text </p>
                <a href="" class="pro_btn">Read More</a>
            </div>
        </div>
        <div class="grid_4">
            <div class="pro_wrapper pro_pad_port">
                <a data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image" href="YourBigImage.jpg"><img src="YourImage.jpg" alt=""></a>
                <p> Text </p>
                <a href="" class="pro_btn">Read More</a>
            </div>
        </div>
        <div class="grid_4">
            <div class="pro_wrapper pro_pad_port">
                <a data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image" href="YourBigImage.jpg"><img src="YourImage.jpg" alt=""></a>
                <p> Text </p>
                <a href="" class="pro_btn">Read More</a>
            </div>
        </div>
    </div>
</div>

<div class="container_12">
	<div class="pro_wrapper">
		<div class="grid_4">
			<div class="pro_wrapper pro_pad_port">
				<a data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image" href="YourBigImage.jpg"><img src="YourImage.jpg" alt=""></a>
				<p> Text </p>
				<a href="" class="pro_btn">Read More</a>
			</div>
		</div>
		<div class="grid_4">
			<div class="pro_wrapper pro_pad_port">
				<a data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image" href="YourBigImage.jpg"><img src="YourImage.jpg" alt=""></a>
				<p> Text </p>
				<a href="" class="pro_btn">Read More</a>
			</div>
		</div>
		<div class="grid_4">
			<div class="pro_wrapper pro_pad_port">
				<a data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image" href="YourBigImage.jpg"><img src="YourImage.jpg" alt=""></a>
				<p> Text </p>
				<a href="" class="pro_btn">Read More</a>
			</div>
		</div>
	</div>
</div>

Filter Images

Vestibulum libero nisl neque.
Read More
Vestibulum libero nisl neque.
Read More
Vestibulum libero nisl neque.
Read More
Vestibulum libero nisl neque.
Read More
Vestibulum libero nisl neque.
Read More
Vestibulum libero nisl neque.
Read More
Vestibulum libero nisl neque.
Read More
Vestibulum libero nisl neque.
Read More
Vestibulum libero nisl neque.
Read More
Vestibulum libero nisl neque.
Read More
Vestibulum libero nisl neque.
Read More
Vestibulum libero nisl neque.
Read More

Description

QuickSand plugin (jquery.quicksand.js) is used to filter images.

Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items.

First of all create a list with image categories.

copytextpop-up

<ul class="pro_splitter">
    <li>
         <ul class="fleft">
            <li class="segment-1 selected-1"><a data-value="all" class="pro_btn">Everything</a></li>
            <li class="segment-0"><a data-value="Category1" class="pro_btn">Category 1</a></li>
            <li class="segment-2 last"><a data-value="Category2" class="pro_btn">Category 2</a></li>
         </ul>
     </li>
</ul>

<ul class="pro_splitter">
	<li>
		 <ul class="fleft">
			<li class="segment-1 selected-1"><a data-value="all" class="pro_btn">Everything</a></li>
			<li class="segment-0"><a data-value="Category1" class="pro_btn">Category 1</a></li>
			<li class="segment-2 last"><a data-value="Category2" class="pro_btn">Category 2</a></li>
		 </ul>
	 </li>
</ul>

Then you need to create a list of items that will be filtered.

copytextpop-up

<ul id="pro_boxes-filter" class="pro_image-grid">
    <li data-id="id-1" class="Category1">
        Your Object Content
    </li>
    <li data-id="id-2" class="Category2">
        Your Object Content
    </li>
    ...
</ul>

<ul id="pro_boxes-filter" class="pro_image-grid">
	<li data-id="id-1" class="Category1">
		Your Object Content
	</li>
	<li data-id="id-2" class="Category2">
		Your Object Content
	</li>
	...
</ul>

Please note that each new <li> tag should have attribute data-id="id-1" assigned with sufficient id number and class class="Category1" with the required category name. Please make sure that your category name matches the data-value attribute in the categories list. It is required to define .pro_image-grid li element width and height in style.css file.