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

Menampilkan Gallery Photo dengan JQuery


Jika di web anda ada sebuah halaman untuk menampilkan gallery photo, tidak ada salahkanya  anda mencoba JQuery untuk menambahkan efek saat gambar di tampilkan. Untuk lebih jelasnya silahkan download file-file web nya.

DOWNLOAD

http://www.4shared.com/file/245732341/cde060e3/gallery.html

DEMO

http://labhouse.co.cc/index.php?page=gallery

CARA PENGGUNAAN

  1. Saya Asumsikan anda sudah menginstall software XAMPP untuk menjalankan file-file PHP nya.
  2. Jika sudah mendownlod, kemudian extrak file zip nya di folder misalnya C:\xampp\htdocs\gallery.
  3. Untuk menjalankannya buka browser dan masukan alamat http://localhost/gallery/
  4. Klik salah satu gambar.
  5. Selesai

PENJELASAN

Jika anda membuka file “index.php” dalam folder “gallery” ada beberapa langkah yang bisa dilakukan yaitu :

Include file-file javascript

<script src=”jquery.js”></script>

<script src=”jquery.bigPicture-pack.js”></script>

<script src=”jquer.bigPicture-min.js”></script>

<script src=”jquery.bigPicture.js”></script>

Include file-file CSS

<link rel=”stylesheet” type=”text/css” href=”css/core.css”/>

<link rel=”stylesheet” type=”text/css” href=”css/skin.css”/>

Cantumkan link gambar yang akan di tampilkan

<a href=”photo/1.jpg” name=”desc-01″ title=”Gambar1 “><img src=”photo/thumbs/t1.jpg”/></a>

Tambahkan fungsi javascript.

<script language=”javascript”>

$(‘a.info’).bigPicture({

‘enableInfo’: true,

‘infoPosition’: ‘top’

});

</script>

Sekian tutorial dari saya, semoga bermanfaat untuk anda : )

Depok, 20-03-2010

noname

%d bloggers like this: