I liked Quicksand by razorjack so much, so I put it on Codeigniter.
All the credit goes to razorjack and please read his documentation and other credits information.
Since I am writing about Codeigniter Shopping Cart series, I am going to add the Quicksand to this application. It has already back-end facilities with BackendPro.
The code is just duplicate of the original demo. I added product items in database with name, shortdesc, thumbnail, class and grouping.
Download Page
welcome.php controller
Add the following to module/welcome/controllers/welcome.php.
function quicksand(){
$data['header']='Quicksand';
$group = 'quicksand';
$data['image_num']= $this->MQuicksand->getNumRowsByGroup($group);
$data['images']= $this->MQuicksand->getProductsByGroup($group);
$this->load->view('general/quicksand_temp',$data);
}
I am not using Bep container, since this is just a quick demo. No module, just normal CI way of loading a view.
I am going to use general/quicksand_temp.php for the view container.
mquicksand.php
In module/welcome/models/quicksand.php, only two functions. One for getting product details and another one is getting number of products.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class MQuicksand extends Model{
function MQuicksand(){
parent::Model();
}
function getProductsByGroup($group){
$data = array();
$this->db->where('grouping', $group);
$this->db->where('status', 'active');
// $this->db->orderby('name','asc');
$Q = $this->db->get('omc_product');
if ($Q->num_rows() > 0){
$num_rows = $Q->num_rows();
foreach ($Q->result_array() as $row){
$data[] = $row;
}
}
$Q->free_result();
return $data;
return $num_rows;
}
function getNumRowsByGroup($group){
$data = array();
$this->db->where('grouping', $group);
$this->db->where('status', 'active');
// $this->db->orderby('name','asc');
$Q = $this->db->get('omc_product');
if ($Q->num_rows() > 0){
$num_rows = $Q->num_rows();
}
$Q->free_result();
return $num_rows;
}
}
views
I use two views for this in system/application/views/general folder.
quicksand_temp.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Quicksand plugin on Codeigniter</title>
<link rel="stylesheet" href="<?= base_url();?>assets/css/quicksand/qmain.css" />
<!--[if IE 7]><link rel="stylesheet" href="<?= base_url();?>assets/css/quicksand/ie7.css" /><![endif]-->
<!-- DO NOT USE THESE FILES. they are compiled for fast http access -->
<!-- if you’re looking for source, download or read documentation -->
</head>
<body>
<div id="wrapper">
<div id="site">
<div id="title">
<h1>Quicksand<span></span></h1>
<p>Reorder and filter items with a nice shuffling animation.</p>
</div>
<!-- this isn’t part of the plugin, just a control for demo -->
<ul class="splitter">
<li>Filter by type:
<ul>
<li class="segment-1 selected-1"><a href="#" data-value="all">Everything</a></li>
<li class="segment-0"><a href="#" data-value="app">Applications</a></li>
<li class="segment-2"><a href="#" data-value="util">Utilities</a></li>
</ul>
</li>
<li>Sort by:
<ul>
<li class="segment-1 selected-1"><a href="#" data-value="name">Name</a></li>
<li class="segment-2"><a href="#" data-value="size">Size</a></li>
</ul>
</li>
</ul>
<div class="demo">
<!-- read the documentation to understand what’s going on here -->
<?php $this->load->view('general/quicksand_view');?>
</div>
</div>
</div>
<p class="footer">
<span>Powered by <a href="http://jquery.com">jQuery</a> – Made by <a href="http://twitter.com/razorjack">@razorjack</a></span>
<span>Design by <a href="http://twitter.com/riddle">@riddle</a></span>
</p>
<script src="<?= base_url();?>assets/js/quicksand/jquery-1.4.1-and-plugins.min.js" type="text/javascript"></script>
<script src="<?= base_url();?>assets/js/quicksand/main.js" type="text/javascript"></script>
</body>
</html>
quicksand_view.php
<ul id="list" class="image-grid">
<?php
foreach($images as $elem => $image){
echo "<li data-id=\"id-".($elem + 1)."\" data-type=\"".$image['class'].
"\">\n<img src=\"".base_url().$image['thumbnail'].
"\" width=\"128\" height=\"128\" />\n<strong>".
$image['name']."</strong>\n<span data-type=\"size\">".
$image['shortdesc']."</span></li>\n";
}
?>
</ul>
That’s it.
Download Page
Download the file and unzip to your localhost.
Dump ci_bep_quicksand.sql which is in sql folder.
Modify system/application/config/config.php and database.php according to your environment.
No related posts.
Thanks for the post and the link to Quicksand by razorjack site.
[...] jquery Quicksand on Codeigniter [...]
Hey,
Thankyou your tutorials are awesome!!
I’m learning a lot from your site, please keep’em coming
Carlos
[...] jquery Quicksand on Codeigniter [...]
[...] a Portofolio CMS with CodeIgniter Create an Event calendar using Codeigniter and jQuery jQuery Quicksand on CodeIgniter Ajax Todo List system with CodeIgniter Zend framework Flickr class on CodeIgniter with jquery Zend [...]