JQuery Penggunaan dan Macam-macam Slideshow

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 frameworkframework tersebut bisa jauh lebih baik dengan mengurangi
”syntactic fluff” dan menambahkan kontrol khusus untuk tindakantindakan 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
id=lastname

.class

$(".intro")

Semua
elemen
mempunyai class="intro"

mempunyai
yang

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
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
<h1><h2>...

:animated

elemen

<tr>

yang

header

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
tersembunyi



yang

s1,s2,s3

$("th,td,.intro")

Semua elemen yang
dengan th, td, .intro

cocok

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()

the change event of selected
elements

click()

the click event of selected
elements

dblclick()

the dblclick event of selected
elements

delegate()

handlers to current, or future,
specified child elements of the
matching elements

die()

Remove all event handlers
added with the live() function

eror()

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

Returns whether

ped()

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

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()

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

keydown()

the keydown event of selected
elements

keypress()

the keypress event of selected
elements

keyup()

the keyup event of selected
elements

live()

handlers to current, or future,
matching elements

load()

the load event of selected
elements

mousedown()

the mouse down event of
selected elements

mouseenter()

the mouse enter event of
selected elements

mouseleave()

the mouse leave event of
selected elements

mousemove()

the mouse move event of
selected elements

mouseout()

the mouse out event of
selected elements

mouseover()

the mouse over event of
selected elements

mouseup()

the mouse up event of
selected elements

one()

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()

the resize event of selected
elements

scroll()

the scroll event of selected
elements

select()

the select event of selected
elements

submit()

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

unbind()

Remove an added event
handler from selected
elements

undelegate()

Remove an event handler to
selected elements, now or in
the future

unload()

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
animate()

Description
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

fadeIn()

Gradually changes the opacity,
for selected elements, from
hidden to visible

fadeOut()

for selected elements, from
visible to hidden

fadeTo()

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

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.

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.mindprojects.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 ().;

03.

onmouseout="_tipoff()">}); });

01.


02.

s)" onmouseout="_tipoff()">$('.MYCLASS').jqzoom(); $ ('MyCla
ss.') Jqzoom ().;

03.

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.
01.


02.

s)" onmouseout="_tipoff()">var options = { Pilihan var = {

03.


04.

lens:true, Lensa: benar,

05.

preloadImages: true, preloadImage
s: benar,

06.

alwaysOn:false, AlwaysOn: palsu,

07.

zoomWidth: 300, zoomWidth: 300,

08.

on(this)" onmouseout="_tipoff()">zoomHeight: 250, zoomHeight: 250,


09.

xOffset:90, xOffset: 90,

10.

on(this)" onmouseout="_tipoff()">yOffset:30, yOffset: 30,

11.

on(this)" onmouseout="_tipoff()">position:'left' Posisi: 'kiri'</s
pan>

12.

on(this)" onmouseout="_tipoff()">//...MORE OPTIONS / / ... OPSI LE
BIH

13.

}; };

14.

$('.MYCLASS').jqzoom(options); $
('MyClass.') Jqzoom (pilihan);.

15.


01.


02.

s)" onmouseout="_tipoff()">var options = { Pilihan var = {

03.

zoomType: 'standard', zoomType: '
standar',

04.

e-src-text" style="direction: ltr; textalign: left">lens:true, Lensa: benar,

05.

-src-text" style="direction: ltr; text-

align: left">preloadImages: true, preloadImage
s: benar,
06.

e-src-text" style="direction: ltr; textalign: left">alwaysOn:false, AlwaysOn: palsu,

07.

-src-text" style="direction: ltr; textalign: left">zoomWidth: 300, zoomWidth: 300,

08.

e-src-text" style="direction: ltr; textalign: left">zoomHeight: 250, zoomHeight: 250,


09.

e-src-text" style="direction: ltr; textalign: left">xOffset:90, xOffset: 90,

10.

e-src-text" style="direction: ltr; textalign: left">yOffset:30, yOffset: 30,

11.

e-src-text" style="direction: ltr; textalign: left">position:'left' Posisi: 'kiri'</s
pan>

12.

e-src-text" style="direction: ltr; text-

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

s)" onmouseout="_tipoff()">}; };

14.

s)" onmouseout="_tipoff()">$('.MYCLASS').jqzoom(options); $
('MyClass.') Jqzoom (pilihan);.

15.


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 jarijari 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 DHTMLIE5 +, 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 0atas 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

mengurangi

show_panels

senar

boolean

penundaan antara transisi slideshow
otomatis dalam milidetik.

'Ayunan'

metode pelonggaran digunakan
dalam foto dan animasi
thumbnail. setiap metode kustom
pelonggaran dapat digunakan.

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.
metode animasi yang digunakan

panel_animation

senar

'Memudar'

untuk panel transisi
gambar. Pilihannya adalah
'memudar', 'crossfade', 'slide'

opsi

panel_scale

jenis

senar

nilai
default

deskripsi

'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.

'Drag'

Metode panning digunakan. 'Drag' =
pengguna mengklik dan menyeret
gambar ke dalam panci, 'track' =
gambar secara otomatis panci
berdasarkan posisi mouse

pan_style

start_frame

senar

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.

benar

flag untuk beralih play / pause
button dan kemampuan untuk start /
stop slideshow

enable_slideshow

boolean

bendera untuk secara otomatis
autoplay

filmstrip_position

boolean

senar

palsu

'Bawah'

memulai slideshow ketika beban
galeri
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,01,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://pengenalanjquery.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-jqueryjavascript-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-webstatis.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.

JQuery Penggunaan dan Macam-macam Slideshow

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (12)

Destacado

Destacado (7)

Similar a JQuery Penggunaan dan Macam-macam Slideshow

Similar a JQuery Penggunaan dan Macam-macam Slideshow (20)

Más de Fajar Satrio

Más de Fajar Satrio (18)

Último

Último (20)

JQuery Penggunaan dan Macam-macam Slideshow