penggunaan jquery

PENGGUNAAN JQUERY

Makalah ini disusun untuk memenuhi tugas mata kuliah

Teknologi Informasi dan Komunikasi

Dosen Pengampu: Septia Lutfi, S. Kom, M. Kom

Disusun Oleh:

Fajar Satrio

NIM. 1102412060

Rombel 3

JURUSAN KURIKULUM DAN TEKNOLOGI PENDIDIKAN

FAKULTAS ILMU PENDIDIKAN

UNIVERSITAS NEGERI SEMARANG

2013

KATA PENGANTAR

Assalamualaikum Wr.Wb.

Puji syukur senantiasa saya hanturkan kepada Allah SWT yang telah

melimpahkan rahmat dan hidayah-Nya sehingga saya dapat

menyelesaikan makalah dengan judul “Penggunaan JQuery” ini tepat pada

waktunya, untuk memenuhi salah satu tugas mata kuliah Teknologi

Informasi dan Komunikasi. Ada banyak kesulitan dalam penyelesaian tugas

ini, namun berkat bantuan dari berbagai pihak, akhirnya kesulitan itu dapat

saya atasi. Oleh karena itu, dengan segala kerendahan hati, saya

mengucapkan terima kasih kepada semua pihak yang telah membantu

dalam proses penyelesaian makalah ini. Dengan makalah ini, saya harap

semoga makalah ini dapat bermanfaat bagi kita semua, dan mampu

memberikan informasi tentang penggunaan JQuery Library.

Masih banyak kekurangan dalam penyusunan makalah ini. Oleh

karena itu, saya mengharapkan kritik dan saran yang membangun dari

pembaca agar nantinya bisa menjadi pembelajaran yang baik bagi saya

dan dapat membuat makalah yang lebih baik lagi.

Atas kritik dan saran anda saya mengucapkan terima kasih.

Wassalamualaikum Wr.Wb

Semarang, 25 November 2013

Fajar Satrio

DAFTAR ISI

Kata Pengantar

Daftar Isi

BAB I PENDAHULUAN

A. Latar Belakang

B. Rumusan Masalah

C. Tujuan

BAB II PEMBAHASAN

A. Sejarah dan Pengertian

1. Sejarah

2. Pengertian

B. JQuery Selector

1. JQuery Element Selectors

2. JQuery Attribute Selectors

C. JQuery Event

D. JQuery Effect

E. Macam-macam JQuery Sledeshow

1. JQZoom Evolution

2. JQuery EOGallery

3. JQuery Dynamic Drive Image Gallery

a. Lightbox image viewer

b. Lightbox Gambar penampil v2.03a

c. Facebox Image and Content Viewer

d. Simple Control Gallery

e. Touch Image Gallery

f. Tooltip Description

g. Photo Album Script

h. PHP Photo Album Script

i. Langkah Carousel Viewer

j. FrogJS Gallery

k. CMotion Gallery

l. CMotion Gallery II

m. Thumbnail Image Viewer

n. Thumbnail Image Viewer II

o. Choice Dynamic Image

4. JQuery Flick Gallery

5. JQuery Galleria

6. JQuery Gallery View

BAB III PENUTUP

Daftar Pustaka

BAB I

PENDAHULUAN

A. Latar Belakang

JQuery adalah javascript Library yaitu kumpulan kode / fungsi

Javascript siap pakai, sehingga mempermudah dan mempercepat kita

dalam membuat kode Javascript secara standar. Apabila kita membuat

kode Javascript, maka diperlukan kode yang cukup panjang, bahkan

terkadang sangat sulit dipahami, misalnya fungsi Javascript untuk

membuat stripe (warna selang-seling) pada baris suatu tabel.

Nah, disinilah peran jQuery sebagai Javascript Library, dimana

kita bisa langsung memanggil fungsi yang terdapat di dalam Library

tersebut, menariknya kita hanya memerlukan satu/dua baris untuk

membuat warna selang-seling pada suatu tabel.

Atas alasan banyaknya ketidaktahuan mengenai JQuery, selain

untuk memenuhi tugas mata kuliah Teknologi Informasi dan

Komunikasi, maka saya berusaha menyusun makalah ini dengan

segenap kemampuan yang saya miliki.

B. Rumusan Masalah

1. Bagaimana sejarah perkembangan JQuery?

2. Apa itu JQuery?

3. Apa yang dimaksud dengan JQuery selector?

4. Bagaimana menggunakan JQuery Event?

5. Bagaimana menggunakan JQuery Effect?

6. Jelaskan macam-macam JQuery Slideshow?

C. Tujuan

1. Mengetahui bagaimana sejarah perkembangan JQuery.

2. Mengenal apa yang disebut JQuery.

3. Mengerti tentang JQuery Selector.

4. Menguasai bagaimana cara menggunakan JQuery Event.

5. Mengerti dan menguasai bagaimana cara menggunakan JQuery

Effect

6. Mengetahui dan memahami JQuery Slideshow

BAB II

PEMBAHASAN

A. Sejarah dan Pengertian

1. Sejarah

Semenjak diluncurkan pertama kali pada tahun 2006 oleh

john Resig, jQuery sudah menarik perhatian mayoritas developer

web. Buktinya, dalam tahun-tahun sesudahnya jQuery sudah banyak

digunakan oleh website - website ternama di dunia seperti Google,

Microsoft, intel , Nokia, Oracle , IBM, DELL, BBC, NBC, ESPN, EAPN,

EA Sport, Twitter, Facebook, Amazon, Techorati, Youtobe Apple,

Wordpress, Mozila, Netflix , Digg, Time, dan masih banyak lagi.

Bahkan website lokalpun tidak mau ketinggalan, Lihat saja Detik,

Studio 21 (21cineplex.com). Indosiar, Vivanews, Kompas, termasuk

Pincuran.com tentunya dan sebagainya.

Jquery Pertama kali dikembangkan oleh Jhon Resig pertama

kali pada tahun 2005, saat itu dia terinspirasi dari kode Behavior,

ketika itu Jhon merasa kode kode behavior tidak elegan dan bahkan

sangat jelek, kemudian dia mulai memikirkan cara membuat library

yang bagus dan ringan untuk javascript. Resig mencatat di situs

webnya, ia menciptakan jQuery karena ia tidak puas dengan library

yang saat itu tersedia dan merasa bahwa seharusnya framework-

framework tersebut bisa jauh lebih baik dengan mengurangi

”syntactic fluff” dan menambahkan kontrol khusus untuk tindakan-

tindakan yang bersifat umum. Maka lahirlah JQUERY pada 14

januari 2006, dimana dengan penulisan code JQuery jadi lebih

simple, gampang dan tentunya dengan hasil yang memuaskan.

Diluncurkan versi pertama dari Jquery dan sampai sekarang masih

terus dikembangkan dan disempurnakan.

jQuery dengan cepat menemukan komunitas yang

mendukung pengembangan script dan dengan cepat mendapatkan

momentum. Banyak pengembang datang untuk membantu

menyempurnakan librari ini, dan akhirnya menghasilkan rilis stabil

pertama dari jQuery, versi 1.0, pada tanggal 26 Agustus 2006. Sejak

itu, jQuery sudah berkembang ke versi 1.7.1 dan sudah mempunyai

plug-in yang banyak tersedia dari komunitas pengembang. Sebuah

plug-in adalah ekstensi dari jQuery yang bukan bagian dari library

inti.

JQuery yang beralamatkan di http://jquery.com kurang lebih

baru menginjak usia 3 tahun. Akan tetapi, jQuery sebenarnya

bukanlah hal yang baru jika melihar “jeroan”-nya, karena berisi

fungsi-fungsi yang ditulis dengan JavaScript, dan JavaScript itu

sendiri telah diperkenalkan oleh Netscape sejak tahun 1995.

Akan tetapi, tentu jQuery menawarkan fitur-fitur modern

yang siap pakai, walaupun idenya sederhana, yaitu membuat

sebuah library JavaScript, ternyata jQuery mampu menarik

perusahaan-perusahaan besar yang mem-bundling jQuery kedalam

produknya. Nokia akan mengintegrasikan jQuery kedalam platform

web Run-Time, sedangkan Microsoft mengadopsi jQuery kedalam

Visual Studio.

2. Pengertian

jQuery merupakan javascript Library atau kumpulan kode /

fungsi Javascript siap pakai, sehingga mempermudah dan

mempercepat kita dalam membuat kode Javascript. Secara standar,

apabila kita membuat kode Javascript, maka diperlukan kode yang

cukup panjang, bahkan terkadang sangat sulit dipahami, misalnya

fungsi Javascript untuk membuat stripe (warna selang-seling) pada

baris suatu table.

Di sinilah peran JQuery sebagai Javascript Library, dimana

kita dapat langsung memanggil fungsi yang terdapat di dalam

library tersebut, dan hal yang menarik disini adalah kita hanya

membutuhkan satu baris untuk membuat warna selang-seling pada

suatu tabel.

Dengan JQuery, suatu halaman web yang menjadi aplikasi

web, jika dilihat sourcenya, akan terlihat seperti dokumen HTML

biasa, tidak ada kode JavaScript yang terlihat langsung. Teknik

pemrograman web seperti ini disebut sebagai unobstrusive

JavaScript programming.

JQuery memiliki kemampuan-kemampuan istimewa yaitu :

a. Kemudahan mengakses elemen-elemen HTML

b. Memanipulasi elemen HTML

c. Memanipulasi CSS

d. Penanganan event HTML

e. Efek-efek javascript dan animasi

f. Modifikasi HTML DOM

g. AJAX

h. Menyederhanakan kode javascript lainnya

Guna memudahkan pada pemahaman JQuery, sangat

dianjurkan terlebih dahulu paham dan menguasai pengkodean

HTML, CSS dan Javascript. Secara standar, apabila kita membuat

kode javascript, maka diperlukan kode yang sangat panjang. Bahkan

terkadang sangat sulit untuk di pahami. Misalnya, fungsi javascript

untuk membuat stripe (warna selang-seling) pada baris suatu tabel

adalah sebagai berikut :

JQuery juga disebut sebagai sebuah pustaka JavaScript kecil

bersumber terbuka yang menekankan pada interaksi antara

JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di

BarCamp NYC oleh John Resig dan berlisensi ganda di bawah

Lisensi MIT dan GPL. Microsoft dan Nokia telah mengumumkan

akan mengemas JQuery di platform mereka. Microsoft awalnya

mengadopsinya dalam Visual Studio untuk digunakan dalam

ASP.NET AJAX dan ASP.NET MVC Framework.

Bukan itu saja JQuery juga disebut sebagai library Javascript

yang gratis dan open source. Oleh karenanya JQuery dapat

digunakan dengan bebas untuk keperluan pengembangan website.

Tanpa library seperti jQuery, menerapkan Javascript mungkin akan

lebih sulit, terutama untuk pemula yang baru belajar Javascript.

Plugin tambahan seperti JQuery UI (user interface) semakin

memudahkan pengguna untuk mengembangkan website yang

cantik dan interaktif. Selain itu tersedia plugin-plugin lain yang

makin memperkaya kemampuan jQuery.

Sebenernya, JQuery akan terasa asing jika kita belum

mengenal HTML dan JavaScript (JS). Jadi akan lebih baik apa bila

sebelum belajar JQuery, pahami terlebih dahulu konsep HTML (dan

PHP) dan JS baru belajar JQuery. JQuery disebut-sebut sebagai

salah satu library JS. Jika di PHP kita mengenal framework, maka

JQuery dapat dianggap salah satu “framework”nya JS.

Pada kenyataannya jarang sekali sebuah situs dibuat murni

JQuery. Biasanya JQuery diposisikan seperti sebuah ‘function’ atau

class untuk di”tempel”kan pada sebuah web/aplikasi berbasis HTML

atau PHP.

Sekilas mengenai apa itu AJAX, Istilah AJAX pertama kali

dikemukakan oleh Jesse James Garrett dalam artikelnya yang

berjudul AJAX: A New Approach to Web Applications. Dalam artikel

tersebut ia mengatakan bahwa AJAX sebenarnya bukanlah

teknologi pemrograman web yang berdiri sendiri tetapi kombinasi

dari beberapa teknologi web yang sudah lebih dulu populer, yaitu

XHTML/CSS, Document Object Model (DOM), XMLHttpRequest, dan

JavaScript.

Inti dari library jQuery sebenarnya adalah fungsi jQuery

(jQuery Function ($)). Fungsi ini adalah jantung dan jiwa dari jQuery

dan digunakan dalam setiap baris kode ketika jQuery

diimplementasikan. Sebagian besar developer dalam

pengimplementasian (penerapan) jQuery menggunakan shortcut $()

sebagai pengganti dari sintaks jQuery(). Hal ini untuk meringkas

kode, seperti semboyan dari jQuery sendiri, write Less Do More

Library JavaScript tertentu juga menggunakan fungsi $(),

sehingga konflik mungkin dapat terjadi ketika kita mencoba untuk

menggunakan lebih dari satu library JavaScript secara bersamaan.

jQuery menyediakan fungsi khusus untuk mencegah situasi ini

dengan jQuery.noConflict(). Contoh script JQuery adalah sebagai

berikut:

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

//letak menulis coding jquery

</script>

</head>

</html>

B. JQuery Selector

Di dalam JQuery juga terdapat selector, selectors

memungkinkan Anda untuk memanipulasi elemen HTML sebagai

kelompok atau sebagai elemen tunggal. Pada penjelasan sebelumnya

kita telah melihat contoh cara memilih elemen HTML menggunakan

jQuery.

JQuery element selectors dan attribute selectors

memungkinkan Anda untuk memilih elemen HTML (atau kelompok

elemen) dengan nama tag, nama atribut atau konten. Selectors

memungkinkan Anda untuk memanipulasi elemen HTML sebagai

kelompok atau sebagai elemen tunggal.

1. JQuery Element Selectors, jQuery mirip CSS dalam hal memilih

elemen HTML. Berikut contohnya :

$("p") memilih semua elemen 

$("p.intro") memilih semua elemen yang mempunyai

class="intro".

$("p#demo") memilih elemen yang mempunyai id="demo".

2. JQuery Attribute Selectors, JQuery mirip XPath dalam hal memilih

elemen berdasarkan atribut yang ada. Berikut contohnya :

$("[href]") memilih semua elemen dengan atribut href.

$("[href='#']") memilih semua elemen dengan atribut href

bernilai="#".

$("[href!='#']") memilih semua elemen dengan atribut href dengan

nilai bukan sama dengan "#".

$("[href$='.jpg']") memilih semua elemen dengan atribut href yang

mengandung ".jpg".

Berikut ada beberapa contoh JQuery Selector:

Selector Contoh Yang Dipilih

* $("*") Semua elemen

#id $("#lastname") Elemen yang mempunyai

id=lastname

.class $(".intro") Semua elemen yang

mempunyai class="intro"

element $("p") Semua elemen 

.class.class $(".intro.demo") Semua elemen yang

mempunyai class=intro dan

class=demo

:first $("p:first") Elemen yang pertama

:last $("p:last") Elemen yang terakhir

:even $("tr:even") Semua elemen <tr> yang

genap

:odd $("tr:odd") Semua elemen <tr> yang ganjil

:eq(index) $("ul li:eq(3)") Elemen ke-empat dari suatu list

(index starts at 0)

:gt(no) $("ul li:gt(3)") Elemen-elemen dari suatu list

dengan index lebih besar dari 3

:lt(no) $("ul li:lt(3)") Elemen-elemen dari suatu list

dengan index kecil dari 3

:not(selector) $("input:not(:em

pty)")

Semua input elemen yang tidak

kosong

:header $(":header") Semua elemen header

<h1><h2>...

:animated Semua elemen animasi

:contains(text) $(":contains('W3S

chools')")

Semua elemen yang

mengandung teks ‘W3Schools’

:empty $(":empty") Semua elemen yang tidak

mempunyai child (elements)

nodes

:hidden $("p:hidden") Semua elemen yang

tersembunyi

s1,s2,s3 $("th,td,.intro")

Semua elemen yang cocok

dengan th, td, .intro

C. JQuery Event

Salah satu kemampuan utama jquery adalah menangani

event. Dalam pemograman jquery, biasanya kode-kode

pemograman diletakkan di dalam penanganan event yang terjadi

pada suatu atau kelompok elemen yang dipilih.

Hampir-hampir mirip dengan Visual Basic, biasanya suatu

kode dijalankan apabila ada sesuatu yang terjadi (event) pada suatu

elemen. Misalnya, kalau ada tombol di klik, maka action atau

kode apa yang dijalankan, apabila ada combox dipilih, kode apa

yang dijalankan, pada contoh jquery sebelumnya :

$(".tombol1").click(function(){

$("p").hide(1000);

});

Kode di atas berarti apabila terjadi event mengklik elemen

yang mempunyai class=’tombol1’, maka lakukan fungsi hide()

terhadap semua element . Berikut daftar table JQuery Event:

Method Description

bind() Add one or more event

handlers to matching

elements

blur() Triggers, or binds a function to

the blur event of selected

elements

change() Triggers, or binds a function to

the change event of selected

elements

click() Triggers, or binds a function to

the click event of selected

elements

dblclick() Triggers, or binds a function to

the dblclick event of selected

elements

http://w3schools.com/jquery/event_bind.asp

delegate() Add one or more event

handlers to current, or future,

specified child elements of the

matching elements

die() Remove all event handlers

added with the live() function

eror() Triggers, or binds a function to

the error event of selected

elements

event.currentTarget The current DOM element

within the event bubbling

phase

event.data Contains the optional data

passed to jQuery.fn.bind when

the current executing handler

was bound

event.isDefaultPrevented() Returns whether

event.preventDefault() was

called for the event object

event.isImmediatePropagationStop

ped()

Returns whether

event.stopImmediatePropagati

on() was called for the event

object

event.isPropagationStopped() Returns whether

event.stopPropagation() was

called for the event object

event.pageX The mouse position relative to

the left edge of the document

event.pageY The mouse position relative to

the top edge of the document

event.preventDefault() Prevents the default action of

the event

event.relatedTarget The other DOM element

involved in the event, if any

http://w3schools.com/jquery/event_delegate.asp

http://w3schools.com/jquery/event_isdefaultprevented.asp

http://w3schools.com/jquery/event_pagex.asp

http://w3schools.com/jquery/event_pagey.asp

http://w3schools.com/jquery/event_preventdefault.asp

event.result This attribute contains the last

value returned by an event

handler that was triggered by

this event, unless the value

was undefined

event.stopImmediatePropagation() Prevents other event handlers

from being called

event.stopPropagation() Prevents the event from

bubbling up the DOM tree,

preventing any parent

handlers from being notified

of the event

event.target The DOM element that

initiated the event

event.timeStamp This attribute returns the

number of milliseconds since

January 1, 1970, when the

event is triggered

event.type Describes the nature of the

event

event.which Which key or button was

pressed for a key or button

event

focus() Triggers, or binds a function to

the focus event of selected

elements

focusin() Binds a function to the focusin

event of selected elements

focusout() Binds a function to the

focusout event of selected

elements

hover() Binds one or two functions to

the hover event of selected

elements

http://w3schools.com/jquery/event_result.asp

http://w3schools.com/jquery/event_target.asp

http://w3schools.com/jquery/event_timestamp.asp

http://w3schools.com/jquery/event_type.asp

http://w3schools.com/jquery/event_which.asp

http://w3schools.com/jquery/event_focus.asp

http://w3schools.com/jquery/event_focusin.asp

http://w3schools.com/jquery/event_focusout.asp

http://w3schools.com/jquery/event_hover.asp

keydown() Triggers, or binds a function to

the keydown event of selected

elements

keypress() Triggers, or binds a function to

the keypress event of selected

elements

keyup() Triggers, or binds a function to

the keyup event of selected

elements

live() Add one or more event

handlers to current, or future,

matching elements

load() Triggers, or binds a function to

the load event of selected

elements

mousedown() Triggers, or binds a function to

the mouse down event of

selected elements

mouseenter() Triggers, or binds a function to

the mouse enter event of

selected elements

mouseleave() Triggers, or binds a function to

the mouse leave event of

selected elements

mousemove() Triggers, or binds a function to

the mouse move event of

selected elements

mouseout() Triggers, or binds a function to

the mouse out event of

selected elements

mouseover() Triggers, or binds a function to

the mouse over event of

selected elements

http://w3schools.com/jquery/event_keydown.asp

http://w3schools.com/jquery/event_keypress.asp

http://w3schools.com/jquery/event_keyup.asp

http://w3schools.com/jquery/event_live.asp

http://w3schools.com/jquery/event_load.asp

http://w3schools.com/jquery/event_mousedown.asp

http://w3schools.com/jquery/event_mouseenter.asp

http://w3schools.com/jquery/event_mouseleave.asp

http://w3schools.com/jquery/event_mousemove.asp

http://w3schools.com/jquery/event_mouseout.asp

http://w3schools.com/jquery/event_mouseover.asp

mouseup() Triggers, or binds a function to

the mouse up event of

selected elements

one() Add one or more event

handlers to matching

elements. This handler can

only be triggered once per

element

ready() Binds a function to the ready

event of a document

(when an HTML document is

ready to use)

resize() Triggers, or binds a function to

the resize event of selected

elements

scroll() Triggers, or binds a function to

the scroll event of selected

elements

select() Triggers, or binds a function to

the select event of selected

elements

submit() Triggers, or binds a function to

the submit event of selected

elements

toggle() Binds two or more functions

to the toggle between for the

click event for selected

elements

trigger() Triggers all events bound to

the selected elements

triggerHandler() Triggers all functions bound to

a specified event for the

selected elements

http://w3schools.com/jquery/event_mouseup.asp

http://w3schools.com/jquery/event_one.asp

http://w3schools.com/jquery/event_ready.asp

http://w3schools.com/jquery/event_resize.asp

http://w3schools.com/jquery/event_scroll.asp

http://w3schools.com/jquery/event_select.asp

http://w3schools.com/jquery/event_submit.asp

http://w3schools.com/jquery/event_toggle.asp

http://w3schools.com/jquery/event_trigger.asp

http://w3schools.com/jquery/event_triggerhandler.asp

unbind() Remove an added event

handler from selected

elements

undelegate() Remove an event handler to

selected elements, now or in

the future

unload() Triggers, or binds a function to

the unload event of selected

elements

D. JQuery Effect

Salah satu kemampuan jquery adalah, adanya fungsi-fungsi

efek yang siap pakai. Biasanya untuk membuat efek memudar di

javascript, kita harus membuat kode yang lumayan panjang. Tapi

dengan menggunakan jquery cukup menggunakan fungsi $(selector).

Berikut contoh script JQuery effect:

Method Description

animate() Performs a custom animation (of

a set of CSS properties) for

selected elements

clearQueue() Removes all queued functions

for the selected element

delay() Sets a delay for all queued

functions for the selected

element

dequeue() Runs the next queued functions

for the selected element

http://w3schools.com/jquery/event_unbind.asp

http://w3schools.com/jquery/event_undelegate.asp

http://w3schools.com/jquery/event_unload.asp

http://w3schools.com/jquery/eff_animate.asp

http://w3schools.com/jquery/eff_clearqueue.asp

fadeIn() Gradually changes the opacity,

for selected elements, from

hidden to visible

fadeOut() Gradually changes the opacity,

for selected elements, from

visible to hidden

fadeTo() Gradually changes the opacity,

for selected elements, to a

specified opacity

fadeToggle()

hide() Hides selected elements

queue() Shows the queued functions for

the selected element

show() Shows hidden selected elements

slideDown() Gradually changes the height, for

selected elements, from hidden

to visible

slideToggle() Toggles between slideUp() and

slideDown() for selected

elements

slideUp() Gradually changes the height, for

selected elements, from visible to

hidden

stop() Stops a running animation on

selected elements

http://w3schools.com/jquery/eff_fadein.asp

http://w3schools.com/jquery/eff_fadeout.asp

http://w3schools.com/jquery/eff_fadeto.asp

http://w3schools.com/jquery/eff_hide.asp

http://w3schools.com/jquery/eff_show.asp

http://w3schools.com/jquery/eff_slidedown.asp

http://w3schools.com/jquery/eff_slidetoggle.asp

http://w3schools.com/jquery/eff_slideup.asp

http://w3schools.com/jquery/eff_stop.asp

toggle() Toggles between hide() and

show(), or custom functions, for

selected elements

E. Macam-macam Jquery Slideshow

1. JQZoom Evolution

jQzoom adalah script yang besar dan sangat mudah

digunakan untuk memperbesar apa yang Anda inginkan.

Bekerja pada semua browser modern, seperti:

Mozilla, Internet Explorer, Opera mini, Kompas, dan Google Chrome.

JQZoom Evolution dirilis pada tanggal 3 Bulan Mei tahun 2011

Ada beberapa tipe JQZoom evolution, yaitu sebagai berikut:

a. Zoom standar

b. Zoom standar dengan thumbnail

c. Membalikkan zoom

d. Tarik zoom

e. Batin zoom

f. Selalu di zoom

g. Resize, posisi zoom kustom popup, fadeIn, efek fadeout

Berikut cara menggunakan JQZoom Evolution:

Menggunakan jQZoom sangatlah mudah, tetapi Anda perlu

menentukan elemen HTML anchor, yang akan menghasilkan zoom

yang menampilkan sebagian dari gambar yang diperbesar. Caranya

adalah sebagai berikut.

http://w3schools.com/jquery/eff_toggle.asp

01. <a href="images/BIGIMAGE.JPG" class="MYCLASS" title="

MYTITLE">

02. <img src="images/SMALLIMAGE.JPG" title="IMAGE TIT

LE">

03. </a>

04.

01. <a href="http://www.mind-

projects.it/projects/jqzoom/images/BIGIMAGE.JPG" clas

s="MYCLASS" title="MYTITLE">

02. <img src="SMALLIMAGE.JPG" title="IMAGE TITLE">

03. </a>

04.

Unsur jangkar mencakup gambar kecil yang ingin Anda

zoom. Dengan skema ini elemen dan basis yang diperlukan adalah:

SMALLIMAGE.JPG: Merupakan gambar kecil yang ingin anda

tampilkan.

BIGIMAGE.JPG: Merupakan gambar besar yang akan

ditampilkan dengan JQZoom.

MyClass: Merupakan kelas jangkar, yang akan digunakan untuk

instantiate script jQZoom dengan semua elemen yang cocok

dengan kelas ini (Anda dapat menggunakan ID juga).

MYTITLE / IMAGE JUDUL: Judul jangkar dan / atau judul yang

akan digunakan untuk menampilkan judul zoom dekat dengan

jQZoom Jendela gambar.

PERHATIKAN: SMALLIMAGE harus menjadi versione skala dari

BIGIMAGE tersebut.

Sekarang load plugin pada beban jendela.

01. $(document).ready(function(){ $ (

Document). Ready (function () {

02. $('.MYCLASS').jqzoom(); $ ('MyCla

ss.') Jqzoom ().;




align: left">}); });









align: left">$('.MYCLASS').jqzoom(); $ ('MyCla

ss.') Jqzoom ().;

Ini akan instantiate jQzoom di default (standar) mode. Anda

dapat menggunakan lebih banyak pilihan (bagian Dokumentasi),

untuk menciptakan efek khusus atau kustom seperti pada contoh

di bawah ini.









align: left">var options = { Pilihan var = {





04. lens:true, Lensa: benar,

05. preloadImages: true, preloadImage

s: benar,

06. alwaysOn:false, AlwaysOn: palsu,

07. zoomWidth: 300, zoomWidth: 300,




align: left">zoomHeight: 250, zoomHeight: 250,



09. xOffset:90, xOffset: 90,




align: left">yOffset:30, yOffset: 30,




align: left">position:'left' Posisi: 'kiri'</s

pan>




align: left">//...MORE OPTIONS / / ... OPSI LE

BIH

13. }; };

14. $('.MYCLASS').jqzoom(options); $

('MyClass.') Jqzoom (pilihan);.













align: left">var options = { Pilihan var = {

03. zoomType: 'standard', zoomType: '

standar',




align: left">lens:true, Lensa: benar,

align: left">preloadImages: true, preloadImage

s: benar,




align: left">alwaysOn:false, AlwaysOn: palsu,




align: left">zoomWidth: 300, zoomWidth: 300,




align: left">zoomHeight: 250, zoomHeight: 250,






align: left">xOffset:90, xOffset: 90,




align: left">yOffset:30, yOffset: 30,




align: left">position:'left' Posisi: 'kiri'</s

pan>

align: left">//...MORE OPTIONS / / ... OPSI LE

BIH




align: left">}; };




align: left">$('.MYCLASS').jqzoom(options); $

('MyClass.') Jqzoom (pilihan);.





2. JQuery EOGallery

EOGallery adalah slideshow galeri animasi Web yang dibuat

dengan jQuery . Hanya menggunakan fungsi jQuery Dasar dan Cody

Lindley Thickbox untuk menampilkan gambar yang lebih besar.

EOGallery adalah XHTML 1.0 dan mirip dengan CSS , telah diuji

pada Firefox, Safari, Bahkan Internet Explorer 6 dan bekerja dengan

non-JavaScript dan / atau browser non-CSS. EOGallery dibuat untuk

tujuan pengujian, mungkin ada bug dan system aneh yang tidak

kita ketahui.

3. JQuery Dynamic Drive Image Gallery

JQuery Dynamic Drive Image Gallery terbagi lagi menjadi:

a. Lightbox image viewer

Lightbox JS adalah, skrip mencolok yang berbasis elegan

untuk melapisi versi yang lebih besar dari gambar di halaman

web untuk layar pada saat klik gambar kecil. Ini snap untuk

mengatur dan bekerja pada semua browser modern.

b. Lightbox Gambar penampil v2.03a

Lightbox Image Viewer 2.0 memperluas dari versi

sebelumnya yaitu Lightbox Image Viewer dengan beberapa fitur

baru. Jika versi aslinya sangat bagus untuk melihat gambar

secara individual pada halaman, Lightbox 2.0 mendukung

"pengelompokan" fitur baru yang memungkinkan untuk

mengelompokkan gambar terkait pada halaman untuk browsing.

Efek transisi untuk membesarkan gambar juga berbeda dari versi

sebelumnya. Dan seperti sebelumnya, script ini mendukung

tampilan keterangan opsional, ditambah tambahan preloading

gambar berikutnya ketika gambar dikelompokkan.

c. Facebox Image and Content Viewer

Facebox adalah lightbox Facebook gaya ringan yang dapat

menampilkan gambar, divs, atau seluruh halaman jarak jauh

(melalui Ajax) inline pada halaman dan on demand. Facebox

menggunakan compact JQuery library sebagai mesin sistemnya,

tidak seperti Lightbox v2.0 , yang menggunakan Prototype.

d. Simple Control Gallery

Untuk menambahkan kemampuan menampilkan galeri

gambar saja setelah semua gambar dalam galeri telah dimuat.

Mesin ini membutuhkan jQuery 1.5 +.

e. Touch Image Gallery

Touch Image Gallery adalah galeri gambar sederhana yang

melayani browser mobile dan sejenisnya, dengan menyentuh /

menggesek, selain cara tradisional navigasi. Galeri bisa

dinavigasi dengan cara intuitif seperti berikut:

Dengan menggesekkan ke kiri atau kanan menggunakan jari-

jari di browser mobile, atau menyeret menggunakan mouse.

Dengan menekan atau mengklik baik pada sisi kiri atau kanan

dari galeri.

Dengan mengklik auto yang dihasilkan peluru bawah galeri.

f. Tooltip Description

Penggunaan Tooltip Description adalah dengan Gerakkan

mouse di atas link dan muncul gambar yang telah dipilih

ditambah deskripsi yang sesuai pop up, dengan menggunakan

skrip tooltip. Setiap tooltip didefinisikan dalam naskah kemudian

dikaitkan dengan elemen pada halaman dengan memasukkan "

rel "atribut ke dalamnya. Selain itu, setiap tooltip dapat dengan

mudah berganti-ganti gaya yang membedakan satu dengan

yang lainnya.

g. Photo Album Script

Photo Album skrip sangat ideal untuk menampilkan

beberapa gambar sekaligus, dengan link ke siklus melalui batch

tambahan yang berupa gambar. Tapi itu hanya awal. Berikut

adalah beberapa keterangannya:

Sesuaikan dimensi album yang diinginkan, seperti 3

dengan 2 gambar, 4 dengan 5 gambar dll

Untuk setiap gambar, tentukan deskripsi opsional, link,

dan link target.

Script otomatis membangun link navigasi untuk

memungkinkan pengunjung untuk siklus antara "batch"

gambar dalam album.

Kemampuan untuk menjalankan kode sendiri setiap kali

gambar dalam album diklik (via onselectphoto ). Hal ini

memungkinkan untuk mengubah pengaturan default

ketika pengguna mengklik gambar, seperti memuat link

yang terkait dalam pop up gantinya.

h. PHP Photo Album Script

PHP Photo Album Script adalah Photo Album yang

ditingkatkan script PHPnya untuk mengotomatisasi pengambilan

semua gambar dalam direktori tertentu untuk penunjukan.

Dengan link pagination dihasilkan untuk siklus melalui setiap

halaman. Sebuah script PHP ( getalbumpics.php ) ditempatkan di

direktori gambar yang diinginkan secara otomatis mendapatkan

nama file dari semua gambar di dalamnya dan menciptakan

array JavaScript untuk diproses lebih lanjut oleh script. Ketika

Anda meng-upload atau memodifikasi gambar di dalam

direktori, script secara otomatis akan menyesuaikan.

i. Langkah Carousel Viewer

Langkah Carousel Viewer menampilkan gambar atau HTML

bahkan sisi-sisinya dapat bergulir ke kiri atau kanan. Pengguna

dapat melangkah untuk setiap panel khusus pada permintaan,

atau menelusuri galeri berurutan dengan melangkah melalui x

jumlah panel. Sebuah animasi geser halus digunakan untuk

transisi antar langkah.

j. FrogJS Gallery

FrogJS adalah galeri foto sekuensial yang mendukung

deskripsi opsional dan link untuk masing-masing gambar. Jika

melihat gambar secara berurutan, dengan mengklik thumbnail

gambar sebelumnya dan berikutnya. Setiap slide gambar

didefinisikan sebagai HTML yang biasa terkandung dalam DIV

tag khusus pada halaman, sehingga sangat mudah untuk

menyiapkan opsi yang termasuk deskripsi sesuai dan link.

k. CMotion Gallery

CMotion Image Gallery adalah galeri skrip serbaguna yang

menggunakan input paling intuitif, mouse pengguna untuk

mengontrol itu. Pengguna dapat mengarahkan kedua arah

scrolling gambar dan kecepatan hanya dengan menempatkan

mouse di kedua spektrum dari galeri gambar. Mengklik pada

gambar kemudian dapat memuat versi yang lebih besar dari

gambar sebelumnya, menavigasi ke halaman dan lain-lain. Selain

dari dimensi galeri, kita juga dapat menentukan kecepatan

bergulirnya, dengan script kemudian menciptakan perguliran

dari kecepatan 0-atas dan mendistribusikan secara merata di

galeri. Script ini bekerja di semua browser modern yang DHTML-

IE5 +, NS6 / Firefox 1.0 +, Opera 7 +.

l. CMotion Gallery II

CMotion Galeri II didasarkan pada pendahulunya Cmotion

Gallery skrip, dimodifikasi oleh jscheuer1 untuk orientasi vertical.

Skrip ini menggunakan input perancangan yang paling intuitif,

Mouse pengguna untuk mengontrol aksi bergulirnya halaman.

Pengguna dapat mengarahkan kedua arah scrolling gambar dan

kecepatan hanya dengan menempatkan mouse di kedua

spektrum dari galeri gambar. Mengklik pada gambar kemudian

dapat memuat versi yang lebih besar dari itu, menavigasi ke

halaman dan lain-lain. Selain dari dimensi galeri, kita juga dapat

menentukan kecepatan bergulirnya halaman, dengan script

kemudian menciptakan kecepatan perguliran dari kecepatan 0-

atas dan mendistribusikan secara merata di galeri.

m. Thumbnail Image Viewer

Thumbnail Image Viewer adalah penampil gambar

sederhana yang dapat diterapkan untuk setiap link pada

halaman untuk memuat gambar yang diinginkan dalam bentuk

kecil berdasarkan pada link itu "href" nilai. Cukup memberikan

link dalam pertanyaan baik itu text link atau thumbnail image

link-a rel atribut "thumbnail".

n. Thumbnail Image Viewer II

Serupa dengan fungsi pendahulunya Thumbnail Image

Viewer, script ini dapat menampilkan gambar yang lebih besar

saat thumbnail diklik dan berguling. Ini dapat dimanfaatkan

untuk membiarkan pengunjung meninjau dari banyak gambar

yang kemudian pilih gambar pilihan untuk melihat pada

halaman yang sama. Fitur yang ada dalam Thumbnail Image

Viewer II adalah:

Desain mencolok, mudah diatur dengan hanya

menambah thumbnail link pada halaman "rel"dan" rev

'atribut. Itu saja.

Konfigurasi gambar yang lebih besar yang akan

ditampilkan melalui "klik" atau "mouseover" thumbnail.

Tentukan apakah gambar diperbesar harus dimuat ketika

beban halaman untuk tampilan lebih cepat, atau hanya

download bila diminta untuk menghemat halaman awal

waktu pembukaan.

Gambar diperbesar akan muncul opsional hyperlink.

Dua jenis efek transisi untuk membawa gambar

diperbesar menjadi pandangan yang: "memudar" atau

"mengungkapkan". Transisi juga dapat dinonaktifkan

sama sekali.

Tentukan apakah "title" atribut dari link thumbnail harus

ditampilkan sebagai teks deskripsi di bawah gambar yang

diperbesar.

Tentukan beberapa daerah bagi gambar yang berbeda

untuk ditampilkan.

o. Choice Dynamic Image

Choice Dynamic Image adalah pemilih gambar yang

memungkinkan browser untuk melihat gambar dengan

memilihnya dari daftar seleksi. Ini adalah dinamis dalam bahwa

gambar TIDAK harus menjadi dimensi yang sama, pembatasan

gambar script yang dimiliki pengunjung. Sekarang kita dapat

memiliki galeri gambar dari semua ukuran. Perangkap adalah

gambar diunggah dengan menggunakan DHTML, NS 3 - dan IE

3 -. Browser ini low-end akan mendapatkan pesan peringatan

menginformasikan mereka tentang hal ini ketika surfer mencoba

untuk memilih gambar.

4. JQuery Flick Gallery

FlickrGallery adalah plugin jQuery yang menyediakan cara

untuk menanamkan gambar flickr ke situs web. Fitur ini

membutuhkan jQuery dan style sheet.

5. JQuery Galleria

Galleria adalah gambar kerangka galeri JavaScript yang

menyederhanakan proses menciptakan galeri gambar yang indah

untuk web dan perangkat mobile.

6. JQuery Gallery View

Gallery View adalah upaya untuk menuliskan sebuah plugin

tunggal yang mampu menciptakan berbagai jenis galeri. Tujuan

gallery view adalah untuk menyediakan serangkaian pilihan untuk

pengguna. Pengguna tidak hanya akan dapat menyesuaikan ukuran

foto dan thumbnail, dan kecepatan transisi, tetapi ia juga akan

memiliki kebebasan untuk memilih dari pilihan posisi elemen, gaya

transisi dan fitur lainnya. Berikut contoh opsi-opsi yang ada dalam

Gallery View.

opsi jenis nilai

default deskripsi

transition_speed int 1000 durasi transisi foto animasi dalam

milidetik.

transition_interval int 4000 penundaan antara transisi slideshow

otomatis dalam milidetik.

mengurangi senar 'Ayunan'

metode pelonggaran digunakan

dalam foto dan animasi

thumbnail. setiap metode kustom

pelonggaran dapat digunakan.

show_panels boolean benar

flag untuk beralih tampilan panel

foto utama. diset false untuk

membuat galeri korsel gaya. (tidak

sepenuhnya dilaksanakan)

show_panel_nav boolean benar

flag untuk beralih tampilan

tombol berikutnya dan sebelumnya di

panel galeri.

enable_overlays boolean palsu flag untuk beralih tampilan overlay

gambar informasi.

panel_width int 800 lebar panel gambar dalam piksel.

panel_height int 400 ketinggian panel gambar dalam

piksel.

panel_animation senar 'Memudar'

metode animasi yang digunakan

untuk panel transisi

gambar. Pilihannya adalah

'memudar', 'crossfade', 'slide'

opsi jenis nilai

default deskripsi

panel_scale senar 'Tanaman'

metode skala untuk gambar

panel. Pilihannya adalah 'tanaman',

'cocok'.

overlay_position senar 'Bawah'

posisi lapisan panel

informasi. Pilihannya adalah 'bottom',

'top'

pan_images boolean palsu flag untuk beralih berbasis hambatan

panning gambar panel besar.

pan_style senar 'Drag'

Metode panning digunakan. 'Drag' =

pengguna mengklik dan menyeret

gambar ke dalam panci, 'track' =

gambar secara otomatis panci

berdasarkan posisi mouse

start_frame int 1

Indeks yang menunjukkan image

untuk ditampilkan ketika beban

galeri

show_filmstrip boolean benar flag untuk beralih tampilan navigasi

filmstrip.

show_filmstrip_nav boolean benar flag untuk beralih tampilan tombol

navigasi berbasis filmstrip.

enable_slideshow boolean benar

flag untuk beralih play / pause

button dan kemampuan untuk start /

stop slideshow

autoplay boolean palsu

bendera untuk secara otomatis

memulai slideshow ketika beban

galeri

filmstrip_position senar 'Bawah'

lokasi filmstrip dalam kaitannya

dengan panel. Pilihannya adalah

'top', 'kiri', 'bottom', 'benar'.

opsi jenis nilai

default deskripsi

frame_width int 70 lebar frame filmstrip dalam piksel.

frame_height int 40 ketinggian frame filmstrip dalam

piksel.

frame_opacity mengapung 0.4 opacity default frame filmstrip

(kisaran 0,0-1,0)

frame_scale senar 'Tanaman'

metode skala untuk gambar

bingkai. Pilihannya adalah 'tanaman',

'cocok'.

frame_gap int 5 jarak antara frame dalam pixel.

show_captions boolean palsu

flag untuk beralih tampilan

keterangan frame (dihuni oleh

gambar itu titleatribut).

show_infobar boolean benar flag untuk beralih tampilan gambar

meja bar.

infobar_opacity mengapung 1.0 opacity default infobar (kisaran 0,0-

1,0)

BAB III

PENUTUP

JQuery merupakan suatu web design yang memanfaatkan

kemudahan dalam menulis script library. Kemudahan-kemudahan tersebut

tentu saja tidak terlepas dari keluhan para pengguna web yang

mengatakan bahwa terlalu repot apa bila menulis script dengan

menggunakan javascript.

Dengan dibuatnya makalah ini saya dapat menyampaikan

tentang bagaimana dan apa itu bahasa pemrograman yang berbasis

JQuery. Saya harap makalah ini akan jadi sumber informasi bagi semua

orang yang ingin mengetahui tentang bahasa pemrograman yang berbasis

JQuery.

Demikian saya akhiri makalah ini, tak lupa kritik dan saran yang

membangun demi perbaikan, saya harapkan dari semua pihak.

DAFTAR PUSTAKA

Anonim. (2011). Sejarah JQuery. Diunduh dari http://pengenalan-

jquery.blogspot.com/2011/11/sejarah-jquery.html pada tanggal 21

November 2013.

Rizaldi, Mustafa. (2012). Pengertian Jquery Javascript. Diunduh dari

http://bisnisajidwi.blogspot.com/2012/04/pengertian-jquery-

javascript-library.html pada tanggal 21 November 2013.

Tomy Kurniawan, Muhammad. (2012). Pengenalan Javascript, JQuery, AJAX,

dan CSS. Diunduh dari

http://radeninformatika.blogspot.com/2012/12/makalah-web-

statis.html pada tanggal 21 November 2013.

Anonim. (_____). Macam-macam JQuery. Diunduh dari

http://belajarwebdesign.com/search/macam-macam-jquery/ pada

tanggal 21 November 2013.

Anonim. (_____). JQuery Effect Show() Method. Diunduh dari

http://www.w3schools.com/jquery/eff_show.asp pada tanggal 21

November 2013.

Cheyuz. (2012). Mengenal JQuery. Diunduh dari

http://jagocoding.com/tutorial/16/Mengenal_jQuery_Apa_itu_jQue

ry pada tanggal 21 November 2013.

penggunaan jquery

Education