Abby Acakadud: Jquery

Sekedar Catetan..

Untuk mengirim satu value dengan AJAX berbeda jika mengirim beberapa value dari data Array yang bisa dengan mudah menggunakan JQUERY .serialize(). dan berikut contoh untuk mengirim satu atau multiple value :

1 value :

var nim = $(this).attr("nim") ; //Ambil Value atau var nim = $('#nim').val() ;

dan untuk mengirim cukup menggunakan :

$.post("<?php echo base_url();?>data/mahasiswa/"+nim,{},

dan dari sisi server :

function mahasiswa($xxx)
{
echo "$xxx";
}

Multiple value :

var nim = $(this).attr("nim") ; //Ambil Value atau var nim = $('#nim').val() ;
var kode_prodi = $(this).attr("kode_prodi") ; //Ambil Value atau var kode_prodi = $('#kode_prodi').val() ;

dan untuk mengirim menggunakan :

$.post("<?php echo base_url();?>data/mahasiswa/",{nim:nim,kode_prodi:kode_prodi},

dan dari sisi server :

function mahasiswa()
{
$nim=$this->input->post('nim');
$kode_prodi=$this->input->post('kode_prodi');
echo "$nim $kode_prodi ";
}

Semoga Bermanfaat..

Daripada pusing , belum jelas mau posting apa, mending kita belajar membuat Gallery Slide dengan Jquery. Oke berikut screenshootnya :

Selanjutnya berikut caranya :

1. Buat 3 buah folder yaitu css, gambar, dan js .

2. Kita buat 2 buah file css dan simpan di dalam folder css :

scrollable-button.css

/* this makes it possible to add next button beside scrollable */
.scrollable {
    float:left;
}
/* prev, next, prevPage and nextPage buttons */
a.browse {
    background:url(img/hori_large.png) no-repeat;
    display:block;
    width:30px;
    height:30px;
    float:left;
    margin:40px 10px;
    cursor:pointer;
    font-size:1px;
}
/* right */
a.right                 { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover         { background-position:-30px -30px; }
a.right:active     { background-position:-60px -30px; }
/* left */
a.left                { margin-left: 0px; }
a.left:hover         { background-position:-30px 0; }
a.left:active     { background-position:-60px 0; }

/* up and down */
a.up, a.down        {
    background:url(img/vert_large.png) no-repeat;
    float: none;
    margin: 10px 50px;
}
/* up */
a.up:hover         { background-position:-30px 0; }
a.up:active         { background-position:-60px 0; }

/* down */
a.down                 { background-position: 0 -30px; }
a.down:hover         { background-position:-30px -30px; }
a.down:active     { background-position:-60px -30px; }
/* disabled navigational button */
a.disabled {
    visibility:hidden !important;
}

scrollable-horizontal.css

/*
    root element for the scrollable.
    when scrolling occurs this element stays still.
*/
.scrollable {
    /* required settings */
    position:relative;
    overflow:hidden;
    width:450px;
    height:90px;
    /* custom decorations */
    border:1px solid #ccc;
    background:url(img/h300.png) repeat-x;
}
/*
    root element for scrollable items. Must be absolutely positioned
    and it should have a extremely large width to accomodate scrollable items.
    it's enough that you set the width and height for the root element and
    not for this element.
*/
.scrollable .items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
    clear:both;
}
/* single scrollable item */
.scrollable img {
    float:left;
    margin:3px 5px 20px 21px;
    background-color:#fff;
    padding:2px;
    border:1px solid #ccc;
    cursor:pointer;
    width:80px;
    height:80px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}
/* active item */
.scrollable .active {
    border:2px solid #000;
    z-index:9999;
    position:relative;
}
    /* end scrollable styling */
body {
    font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}
/* get rid of those system borders being generated for A tags */
a:active {
outline:none;
}
:focus {
-moz-outline-style:none;
}

3. Download file jquery berikut di
sini dan ekstrak di folder js.

4. Masukan gambar yang akan di jadikan slide kedalam folder gambar.

5. Buat file gallery.html

gallery.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="Geany 0.18" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/scrollable-horizontal.css">
    <link rel="stylesheet" type="text/css" href="css/scrollable-buttons.css">
    <script type="text/javascript" src="js/jquery.tools.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $("div.scrollable").scrollable();
        $(".items img").click(function() {
             // hilangkan _t dibelakang nama file foto untuk foto yang besar
             // misal foto kecil (air_t.jpg) dihilangkan _t untuk foto besar menjadi (air.jpg)
             var url = $(this).attr("src").replace("_t", "");
             // untuk area gambar besar diberikan efek fade (semi transparan)
             var wrap = $("#image_wrap").fadeTo("medium", 0.5);
             // load foto
           var img = new Image();
              img.onload = function() {
              wrap.fadeTo("fast", 1);
              wrap.find("img").attr("src", url);
             };
             img.src = url;
        }).filter(":first").click();
        });
    </script>
    <style>
        /* style untuk image wrapper (preview image) */
        #image_wrap {
             width:470px;
             margin:15px 0 15px 30px;
             padding:0px 0;
             text-align:center;
             background-color:#transparent;
             border:2px solid #fff;
             outline:1px solid #ddd;
             -moz-ouline-radius:4px;
             -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="text">

      <div id="image_wrap">
         
         <img src="images/blank.gif" width="200" height="200" />
      </div>
      
      <a class="prevPage browse left"></a>
      
      <div class="scrollable">
         
         <div class="items">
        
            <img src="gambar/linux-mint.png">
            <img src="gambar/archlinux-logo.png">
            <img src="gambar/debian-logo2.jpg">
            <img src="gambar/gentoo-linux.jpg">
            <img src="gambar/mandriva-logo.jpg">
            
            <img src="gambar/slackware_logo.png">
            <img src="gambar/start_here_suse.png">
            <img src="gambar/zenwalk-logo.jpg">
            <img src="gambar/linux-mint.png">
            <img src="gambar/gentoo-linux.jpg">
      </div>
    </div>
    
    <a class="nextPage browse right"></a>
    <br clear="all">
</div>
</body>
</html>

6. Ganti tulisan berwarna merah sesuai dengan nama gambar yang ada di folder gambar.

7. Selesai

Selamat Berkreasi..

Abby Acakadud

Send Multiple Values to PHP dengan AJAX

Membuat Gallery Slide dengan Jquery