Okada Design Blog » jquery

jquery Quicksand on Codeigniter

shinokada — Thu, 18 Feb 2010 18:32:18 +0000

I liked Quicksand by razorjack so much, so I put it on Codeigniter.

Demo: Frontend only

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.

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.

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

jQuery Quicksand plugin on Codeigniter

Quicksand

Reorder and filter items with a nice shuffling animation.

Filter by type:
Sort by:
- Name
- Size

load->view('general/quicksand_view');?>

quicksand_view.php

          
           $image){
  echo "\n\n".
  $image['name']."\n".
  $image['shortdesc']."\n";
}

          ?>

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.

Event Driven Programming with jQuery Tutorial

shinokada — Sat, 04 Apr 2009 10:35:00 +0000

Event Driven Programming with jQuery Tutorial. Written by Benson Wong

How to add jQuery Plugin: Scroll to Top to Blogger

shinokada — Sun, 29 Mar 2009 13:40:00 +0000

After reading an article “jQuery Plugin: Scroll to Top” by Craig Wilson a couple of weeks ago, here is how to add it to your Blogger.

There is a similar code by David Walsh here. But I am using a code by Craig.

You can see the action here. You just need to scroll down a bit and you will see a ^Scrol to Top box on the right bottom. By clicking it you go to the top of the page.

1. Add the following HTML before your tag.

^ Scroll to Top

2. Add the following CSS code in your Blogger CSS code.

/* to top */
#toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }

3. Add the following jQuery codes just before tag.

The undocumented life of jQuery .append()

shinokada — Sat, 21 Mar 2009 08:49:00 +0000

The undocumented life of jQuery’s .append()

Posted using ShareThis

Easy Display Switch with CSS and jQuery by By Soh Tanaka

shinokada — Mon, 09 Mar 2009 21:52:00 +0000

Easy Display Switch with CSS and jQuery is another image display for your portfolio. Simple and effective.
You can see the demo here.

Creating a “Filterable” Portfolio with jQuery by Trevor Davis

shinokada — Mon, 09 Mar 2009 06:55:00 +0000

Trevor Davis wrote a tutorial called “Creating a “Filterable” Portfolio with jQuery” in nettuts.com
You can find a demo here.
You can use it for a customer’s portfolio and add a jquery lightbox.

jQuery Accessible Tabs – How to make tabs REALLY accessible by Dirk Ginader

shinokada — Mon, 02 Mar 2009 20:43:00 +0000

Improved version of jquery tab by Dirk Ginader.

"How to Make a Smooth Animated Menu with jQuery" by Zach Dunn

jQuery Animation – Sliding In and Out, Up and Down

shinokada — Mon, 02 Mar 2009 10:54:00 +0000

Video tutorial from Vimeo.

jQuery Animation – Sliding In and Out, Up and Down from Jack Franklin on Vimeo.

Creating a Scrolling Gallery Using jQuery

shinokada — Mon, 02 Mar 2009 10:38:00 +0000

Video tutorial from From-the-couch

Organizing a long list with jQuery: ihwy version

shinokada — Thu, 19 Feb 2009 12:11:00 +0000

I found a jquery listnav plugin.

When I see the demo, it is a bit confusing with other functions, like tabs etc., and there are no zip files. So I put it one by one in order to simplify it.
You can find
listnav1
listnav2
listnav3
listnav4

I can’t find out how to make listnav3 red yet. And also I haven’t find out why the right side of listnav3 is not showing.