Category: jquery


Membuat Popup Image Gallery Dengan Jquery dan HTML5

By Irvan Galuh,

 
Image Popup atau Photo Popup yaitu gambar gambar yang akan menampilkan ukuran yang lebih besar jika salah satu gambar thumbnail nya di klik.

 

Beberapa hari yang lalu ada seorang follower di twitter yang menanyakan tentang cara membuat gambar popup untuk gallery website.

 

Untuk itu kita akan mencoba membuatkan nya, lengkap dengan bahan dan cara singkatnya 🙂


Ingredients

 

Bahan-bahan yang kita perlukan adalah :


*Kayak mau masak 🙂


1. White Carbonfiber Patter dari subtlepattern
2. Photo dari Bartek Elsner
3. Jquery
4. Jquery Lightbox


Code HTML (index.html)

 

Berikut ini kode HTML untuk bagian [head] [/head]



<link rel=”stylesheet” type=”text/css” href=”css/twd-base.css” />
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.lightbox-0.5.min.js”></script>
<link rel=”stylesheet” type=”text/css” href=”css/jquery.lightbox-0.5.css” media=”screen” />

<script type=”text/javascript”>
$(function() {
$(‘#gallery a’).lightBox();
});
</script>

Bagian ini digunakan mengaktifkan Jquery Lightbox dengan target ID #gallery

<script type=”text/javascript”>
$(function() {
$(‘#gallery a’).lightBox();
});
</script>

 

Code untuk BODY [body] [/body]


<section>

<div id=”gallery”>
<ul>
<li>
<a href=”photo/1.jpg” title=”Satu”>
<img src=”photo/thumb/1.jpg” alt=”tutorial web design” />
</a>
</li>
<li>
<a href=”photo/2.jpg” title=”Dua”>
<img src=”photo/thumb/2.jpg” alt=”tutorial web design” />
</a>
</li>
<li>
<a href=”photo/3.jpg” title=”Tiga”>
<img src=”photo/thumb/3.jpg” alt=”tutorial web design”/>
</a>
</li>
<li>
<a href=”photo/4.jpg” title=”Empat”>
<img src=”photo/thumb/4.jpg” alt=”tutorial web design” />
</a>
</li>
<li>
<a href=”photo/5.jpg” title=”Lima”>
<img src=”photo/thumb/5.jpg” alt=”tutorial web design” />
</a>
</li>
<li>
<a href=”photo/6.jpg” title=”Lima”>
<img src=”photo/thumb/6.jpg” alt=”tutorial web design” />
</a>
</li>
<li>
<a href=”photo/7.jpg” title=”Lima”>
<img src=”photo/thumb/7.jpg” alt=”tutorial web design” />
</a>
</li>
<li>
<a href=”photo/8.jpg” title=”Lima”>
<img src=”photo/thumb/8.jpg” alt=”tutorial web design” />
</a>
</li>
</ul>
</div>

</section>


Code CSS (css/style.css)

 

Untuk mempercantik tampilan awal gunakan code css berikut ini, sedangkan untuk popup lightbox tidak perlu dirubah, kecuali jika diinginkan dan diperlukan.


body{background:url(‘../images/white_carbonfiber.png’);}

section{width:672px;margin:20px auto;background:rgba(255,255,255,.3)}
#gallery{padding:10px}
#gallery ul{
list-style-type:none;
}
#gallery ul li{
display:inline-block;
padding:5px;
}
#gallery ul li img:hover{
opacity:0.8;
}.



Oke sekian tutorial kali ini, semoga bermanfaat 🙂




SUMBER = http://www.tutorial-webdesign.com/membuat-popup-photo-jquery/

  Category: html, jquery, Tips, Tutorial
  Comments: Comments Off on Membuat Popup Image Gallery Dengan Jquery dan HTML5

Membatasi Input text dengan Jquery | ala Twitter

By Irvan Galuh,

 
Beberapa waktu lalu saya diminta untuk membuat sebuah web aplikasi untuk keperluan lomba menulis cerita, cerita tersebut panjang nya hanya boleh 700 karakter.

Bagaimana caranya agar data yang tersimpan ke database tidak lebih dari 700 karakter?

Bagaimana pula caranya agar user mengetahui sudah berapa banyak karakter yang mereka tulis (bagian dari user experiance) ?

 

Ada 2 cara yang bisa digunakan.

1. Membatasi dengan PHP (Server site)
2. Membatasi dengan Javascript/Jquery (Client site)

Kali ini akan dibahas dengan Javascript, khususnya menggunakan Jquery.
Seperti apa yang akan dibuat?
Yang kita buat mungkin akan mirip dengan twitter, dimana twitter membatasi pengguna dengan hanya mengizinkan menulis 140 karakter untuk setiap kali posting status.
Mirip dengan kasus membatasi karakter untuk cerita.

Bagaimana membuat nya?

Struktur HTML (index.html)

 

<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title>Limit Input Jquery</title>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.7.2.min.js”></script>
<script type=”text/javascript”>
<!– Javascript ditulis disini –>
</script>
<style>
<!– CSS ditulis disini –>
</style>
</head>
<body>



<div class=”box”>
<h2>What’s Happening?</h2>
<textarea id=”status”></textarea>
<span id=”text_counter”></span><input type=”submit” id=”posting” value=”Post” />
</div>
<div class=”footer”><a href=”http://tutorial-webdesign.com”>Wakaka Design | <a href=”http://tutorial-webdesign.com/membatasi-input-jquery-limit”>Back to Tutorial</div>

</body>
</html>


Code Javascript


$(document).ready(function(){
var left = 140
$(‘#text_counter’).text(‘Characters left: ‘ + left);

$(‘#status’).keyup(function () {

left = 140 – $(this).val().length;

if(left < 0){
$(‘#text_counter’).addClass(“overlimit”);
$(‘#posting’).attr(“disabled”, true);
}else{
$(‘#text_counter’).removeClass(“overlimit”);
$(‘#posting’).attr(“disabled”, false);
}

$(‘#text_counter’).text(‘Characters left: ‘ + left);
});
});

Code CSS

body{background:#222 url(http://subtlepatterns.com/patterns/natural_paper.png)}
a{text-decoration:none;color:#999}
textarea{
width:100%;
height:50px;
display:block
}
input[type=”submit”]{padding:5px 10px;}
#text_counter{float:right;}
.box{
overflow:hidden;
width:400px;
margin:150px auto;
background:#f4f4f4;
padding:10px 30px;
box-shadow:0 0 10px #f4f4f4;
-webkit-box-shadow:0 0 10px #f4f4f4;
}
.overlimit{color: red;}
.footer{width:400px;padding:10px;margin:0 auto;text-alig



Oke sekian tutorial kali ini, semoga berguna untuk anda yang sedang belajar Jquery 🙂




SUMBER = http://www.tutorial-webdesign.com/jquery-limit-input/

  Category: jquery, Tips, Tutorial
  Comments: Comments Off on Membatasi Input text dengan Jquery | ala Twitter

Membuat slide control dengan Jquery

By Irvan Galuh,

Pada tutorial kali ini kita akan mencoba membuat Slide Control dengan Jquery, Apa sih slide control itu? Pada dasarnya kita akan mengontrol isi dari sebuah input text hanya dengan menyeret pengontrol nya saja.

Jquery Slide Control
 
Ini bagus jika anda ingin menggunakannya untuk mempercantik form ketika terdapat field untuk mengisi berat badan misal nya, atau tinggi badan, atau jika di sebuah website e-commerce ini bisa digunakan untuk mempercantik field jumlah barang yang ingin dibeli, atau jika ada sedang membuat website musik, nah ini bisa digunakan untuk mengatur volume dll. Ya kira-kira penggunaanya seperti itu lah.

Oke kita mulai

Pertama siapkan sebuah folder js, berisi file berikut:

  • jquery.js
  • jquery.slideControl.min.js
Plugin Jquery Slide Control bisa didapat disini.
Selanjutnya siapkan folder css berisi file berikut:
  • slideControl.css
  • style.css
Oke sekarang buat sebuah file bernama index.html, diletakan diluar folder js, dan css


Isinya kira-kira sebagai berikut


<section>

<ul>
<li><label>Responsiveness: </label><input type=”text” value=”6.0″ class=”slideControl” /></li>
<li><label>Safety: </label><input type=”text” value=”4.0″ class=”slideControl” /></li>
<li><label>Information: </label><input type=”text” value=”9.0″ class=”slideControl” /></li>
</ul>
</section>


Sedangkan isi file css/style.css adalah sebagai berikut:


section{width:700px;margin:20px auto;}
section li {margin:10px 0;}
section ul {list-style-type:none;}
section ul.options {margin-left:20px; margin-bottom:20px; list-style-type:disc;}
section ul.options li {margin:5px 0; font-size:0.85em;}
section input.slideControl {width:40px; font-size:1.5em; padding:3px 5px; border:1px solid #ccc; border-radius:5px; text-align:center; color:#333; font-weight:bold;}
section label {font-size:1em; font-weight:bold; float:left; width:145px; margin-top:10px;}




Sekian tutorial kali ini, semoga ini bisa membantu mempercantik website yang sedang anda buat.

Salam Web Design Indonesia…



SUMBER = http://www.tutorial-webdesign.com/membuat-slide-control-dengan-jquery/

  Category: jquery, Tutorial
  Comments: Comments Off on Membuat slide control dengan Jquery

Membuat Slide Menu Dengan CSS dan Jquery

By Irvan Galuh,

Menu yang ketika Mouse Hover akan berganti seperti slide, dibuat dengan CSS dan Jquery.
Kali ini kita akan mencaba membuat contoh menu yang bisa diterapkan di website anda, menu ini cukup menarik karena terlihat agak animatif dengan slide nya.

Oke kita mulai saja langsung

Ingredients

  1. Font Electrolize dari Google Web Fonts
  2. Jquery
  3. Subtlepattern Egg-Shell

Struktur HTML Menu

<div class=”mn-container”>

<ul id=”topnav”>
<li><a href=””>Home</a></li>
<li><a href=””>Services</a></li>
<li><a href=””>Portfolio</a></li>
<li><a href=””>Blog</a></li>
<li><a href=””>About</a></li>
<li><a href=””>Contact</a></li>
</ul>
</div>

Disitu kita membuat container untuk menu, dan sebuah unordered list untuk list menu nya.


Code untuk bagan menu

.mn-container{
margin:50px auto;
width:680px;
padding:20px;
background:rgba(255,255,0,.1);
overflow:hidden;
border:1px solid rgba(225,225,225,.9)
}


Berikut ini code untuk List Menu nya

ul#topnav {
margin: 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.1em;
font-family: ‘Electrolize’, sans-serif;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #333;
background:rgba(255,255,255,.5);
text-transform: uppercase;
clear: both;
width: 100%;
height: 20px;
line-height: 20px;
}
ul#topnav a{
color: #ff0000;
background-position: left bottom;
}
ul#topnav span{
background-position: left top;
}


Code Jquery untuk membuat menu terlihat berganti seperti sebuah slide


$(document).ready(function() {

$(“#topnav li”).prepend(“<span></span>”);

$(“#topnav li”).each(function() {
var linkText = $(this).find(“a”).html();
$(this).find(“span”).show().html(linkText);
});

$(“#topnav li”).hover(function() { //On hover…
$(this).find(“span”).stop().animate({
marginTop: “-40”
}, 500);
} , function() { //On hover out…
$(this).find(“span”).stop().animate({
marginTop: “0”
}, 500);
});

});


Oke sekian tulisan saya kali ini, semoga bermanfaat ya.

Salam Web Design Indonesia 🙂



SUMBER = http://www.tutorial-webdesign.com/membuat-slide-menu-dengan-css-dan-jquery/

  Category: CSS, jquery
  Comments: Comments Off on Membuat Slide Menu Dengan CSS dan Jquery