Membuat Slideshow Gallery gambar dengan PHP dan JQuery


Aplikasi ini adalah gabungan dari 2 aplikasi yaitu aplikasi jQuery untuk slideshow (amazon_scroller.js) dan aplikasi untuk zoom image (jquery.bigPicture.js).  aplikasi ini bertujuan untuk membantu teman-teman dalam menampilkan gambar dalam bentuk slideshow. dan ketika suatu gambar di klik dalam slideshow tadi, maka aplikasi jQuery Zoom akan memperbesar gambar dalam ukuran gambar yang asli.

Sedangkan data gallerynya di ambil dari sebuah database “test” dan nama tabelnya “tools_gallery

Tabel “tools_gallery”

Script Include JQuery

<!—untuk zoom image–>
http://./js/jquery.js
http://./js/jquery.bigPicture.js
http://./js/jquer.bigPicture-min.js
http://./js/jquery.bigPicture-pack.js
http://./js/jquery.easing.js
<link rel=”stylesheet” type=”text/css” href=”css/core.css”/>
<link rel=”stylesheet” type=”text/css” href=”css/skin.css”/>

<!–untuk slideshow–>
<link href=”css/amazon_scroller.css” rel=”stylesheet” type=”text/css”></link>
http://js/amazon_scroller.js

Menyisipkan Syntax Javascript

$(‘a.info’).bigPicture({
‘enableInfo’: true,
‘infoPosition’: ‘bottom’
});

Menampilkan gambar

Download

http://www.4shared.com/file/kI8ABhIV/slideshow-gallery.html

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan anda semua…amin

Depok, 26-01-2011

noname

Advertisements

37 Responses

  1. sebelumnya saya cuma mau bilang terimakasih pa sama bapak agus karena banyak ilmu yang saya dapat dari page bapa ini…

    termikasih pa.. maju terus keep posting pa 🙂

    Like

  2. menarik mas

    Like

  3. bagaimana cara buatnya gan? terimakasih

    Like

  4. untuk costumize letak panahnya, misal width dari frame gambar kita disesuaikan (misal 600px atau 900px, atau lebih) itu apa yang dirubah gan, agar posisi gambar arrow itu sesuai. terima kasih

    Like

  5. kalo boleh saya mw minta no.x mz,..
    inbox emailku

    Like

  6. iyaa gann itu taruhnya di menu apa..? maaf nuwbi heheee

    Like

  7. Ass. w. w. pak terima kasih atas artikelnya, bgm cara mengganti slide shownya dengan bentuk lain seperti text transparatn, fade dsb trims atas jawabannya

    Like

  8. makasih kang ngebantu nih kebetulan lagi bikin website
    http://www.kotacilegon.com

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: