Codrops

Fullscreen Gallery with Thumbnail Flip using jQuery #codrops

Codrops this is the one developers where uses latest tecchnology , Fullscreen Gallery with Thumbnail Flip is one of many inspiration from codrops, Here I  share  administrator page to make your Custom galery look like and feel like. in this tutorial I use Codeigniter,AdminLTE,Xcrud, And Fullscreen Gallery with Thumbnail Flip

Galery table

CREATE TABLE IF NOT EXISTS `photo` (
`id` int(11) NOT NULL,
  `photo` varchar(223) NOT NULL,
  `title` varchar(20) NOT NULL,
  `description` varchar(50) NOT NULL,
  `ip_address` varchar(225) NOT NULL,
  `browser` varchar(225) NOT NULL,
  `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `photo`
 ADD PRIMARY KEY (`id`);

ALTER TABLE `photo`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

Dashboard Controller

class Dashboard extends MX_Controller
{
    function __construct()
    {
        parent::__construct();

        $this->load->helper('url');
        $this->load->library('form_validation');
        $this->meta = array(
            'activeMenu' => 'dashboard',
            'activeTab' => 'dashboard'
        );
    }

    public function index()
    {
    $this->load->helper('xcrud');
    $xcrud = xcrud_get_instance();
    $xcrud->table('photo');
    $xcrud->table_name('Galery');
    $xcrud->default_tab();
    $xcrud->columns('id,photo,title,description,ip_address,browser,timestamp');
    $xcrud->fields('id,title,description,photo');
    $xcrud->set_attr('id',array('type'=>'hidden'));
    $ipaddress = $_SERVER['REMOTE_ADDR'];
    $browser =@$_SERVER[HTTP_USER_AGENT];
    $xcrud->pass_var('browser', $browser, 'create');
    $xcrud->label('id','');
    $xcrud->benchmark();
    $xcrud->change_type('photo', 'image', '', array('thumbs' => array(array('width' => 250,'height' => 180,'crop' => true,'folder' =>   '../thumbs'),array('width' => 600,'height' => 400,'crop' => true))));
            
     
    $xcrud->unset_title();
    $data['content'] = $xcrud->render();
    $meta = $this->meta;   
    $this->load->view('commons/header_admin',$meta);
    $this->load->view('dashboard',$data);
    $this->load->view('commons/footer_admin');

Dashboard View

<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-body">
                  <?php echo $content;?>
                </div>
            </div>
        </div>
    </div>
</section>

Home Controller

class Home extends CI_Controller {

    function __construct()
    {
        parent::__construct();
        $this->load->helper('url');
        $this->load->library('form_validation');
        $this->meta = array('active_menu' => 'home');
    }

   function index()
   {
        $data['wow'] = $this->db->query("SELECT id,title,description,photo FROM photo ORDER By id DESC ");
        $data['limit1thumb'] = $this->db->query("SELECT id,title, description, photo FROM photo ORDER By id DESC limit 1");
        $this->load->view('content',$data);
       }
   }

Home View

<?php foreach ($wow->result() as $row) { ?>
            <div class="tf_content" id="<?php echo $row->id ;?>" style="display:block;">
                <h2><?php echo $row->title ;?></h2>
                    <p><?php echo $row->description ;?></p>

            </div>
 <?php }?>

 

And that’s all! We hope you enjoyed the tutorial 

demo download

About the Author

Entol Fakih

Gairah terbesar Saya adalah hiking ke hutan dan menikmati keindahan alam. Meskipun berjiwa romantis, saya adalah geek keseluruhan seperti anggota tim entol.net lainnya.Hal yang dapat menjauhkan saya dari komputer adalah fotografi.


Entol Fakih