header ilmugrafis
Home Tutorials Fonts IG Store Contact
 
ilmu grafis » jQUERY

Membuat Slideshow Foto Auto dengan jQuery

Publish: 24 Desember 2014 | Author & Copyright: Johan | Status: Tutorial jQuery

Sewaktu membaca inbox di gmail ternyata ada seorang yang menanyakan kepada saya bagaimana cara untuk membuat Automatic Animasi Slideshow atau Slide Foto Auto dengan menggunakan jQuery. Biasanya fitur ini dipakai untuk membuat animasi pada headline berita pada sebuah halaman utama website. Sehingga berita akan tampil bergantian sesuai dengan pengaturan waktu (timer) yang anda inginkan.

Download dulu bahan - bahan (support file) pembuatan animasi Slideshow foto otomatis autoplay :
download
Download Now

Isi Support Files :
A. jquery-1.8.0.min
B. head.css
C. headline.js
D. headnews.html
E. bahan foto slideshow

Tanpa bertele - tele dan panjang lebar maka berikut ini tutorial cara membuat animasi Slideshow Foto Otomatis yang akan saya jelaskan secara singkat jelas dan padat.

1. Langkah pertama adalah bersabar & fokus... hehehe...
ok, mari kita pelajari kode yang ada di dalam headnews.html. (Klik kanan "headnews.html" lalu pilih open with notepad / dreamweaver ) untuk mengetahui kode di dalamnya.

step 1

coba perhatikan kodenya :

<link rel="stylesheet" type="text/css" href="head.css">
<script src="jquery-1.8.0.min.js"></script>
<script src="headline.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// untuk permulaan, tampilkan content nomor 1 '#slideAwal'
bukaContent($('#slideAwal'),'div1');
});
</script>

Script diatas fungsinya untuk menghubungkan ketiga bahan : jquery-1.8.0.min + head.css + headline.js

Sedangkan kode diantara <script type="text/javascript"> ... </script> adalah untuk memanggil fungsi jquery. Bingung? ok silahkan anda baca lagi apa itu jQuery di Tentang jQuery

2. Sekarang masuk ke tahap input / memanggil gambar, perhatikan kode berikut ini :

Kode ini terletak diantara tag <body> ... </body>

<div id="divTrigger">
<a href="javascript:;" onClick="bukaContent(this,'div1')" id="slideAwal">1</a>
<a href="javascript:;" onClick="bukaContent(this,'div2')">2</a>
<a href="javascript:;" onClick="bukaContent(this,'div3')">3</a>
<a href="javascript:;" onClick="bukaContent(this,'div4')">4</a>
</div>

<div id="divContent">
<div id="div1">
<span class="title">Slide 1</span>
<img src="images/1-slide.jpg" align="left" />
Slide show pertama! wow!
</div>
<div id="div2">
<span class="title">Slide 2</span>
<img src="images/2-slide.jpg" align="left" />
Slide show kedua! awesome!
</div>
<div id="div3">
<span class="title">Slide 3</span>
<img src="images/3-slide.jpg" align="left" />
Slide show ketiga! cute!
</div>
<div id="div4">
<span class="title">Slide 4</span>
<img src="images/4-slide.jpg" align="left" />
Slide show keempat, Finish! hehehe ayo - ayo jangan bengong aja gan! Kembali fokus...!
</div>
</div>

Anda tinggal mengganti input dari Title (judul foto slideshow), img src (ini untuk menghubungkan image / foto yang akan kita slideshow), dan teks (berfungsi sebagai deskripsi / tambahan keterangan)

Mudah bukan, nantinya anda tinggal mengutak - atik inputnya

3. Untuk merubah ukuran border maka kita bisa mengutak - atiknya di head.css, jadi buka head.css di aplikasi notepad atau dreamweaver
step 2
Sesuaikan dengan ukuran gambar. Disini gambar saya resolusinya adalah 700 x 350
slideshow
Jadi usahakan ukurannya tidak lebih kecil gambar slideshow kita.

Hasilnya Lihat Disini :
live demo icon

Animasi Foto Slide Automatis dengan jQuery Slideshow telah saya tes di browser mozilla firefox, google chrome, android browser, opera browser maupun opera mini dan semuanya berjalan baik dan lancar (all work). Terima kasih, semoga bermanfaat

Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)
 
author

Info dan Kontak Penulis

Johan Felisitas
Tentang Penulis : Lahir di Surabaya 1986, Menyukai komputer grafis terutama program photoshop dan coreldraw. Saat ini bekerja sebagai designer grafis di salah satu perusahaan swasta di Surabaya.
Motto : Berikan yang terbaik, untuk mendapatkan yang terbaik!

Penulis dapat dihubungi via:
Twitter: @johanfelisitas
Google+ :
Facebook : facebook.com/tomuramaster
Email : johan.felisitas[at]gmail[dot]com


Rekomendasi ilmugrafis

PHP 1
Pemrograman PHP
Video Tutorial Cara Membuat dan Memprogram Website Dinamis dengan PHP

DREAMWEAVER WEBDESIGN
Desain Website Dreamweaver
CD Tutorial ini berisi tips dan trik desain website dengan Dreamweaver dan Photoshop

webmaster collection
Desain Website Dreamweaver 2
Dalam CD Tutorial ini diajarkan cara membuat website secara lebih detail dari seri sebelumnya



[adv.] Supported by
dumetschool kursus desain grafis
DumetSchool.com

 PHOTOSHOP
Photoshop Dasar
Photoshop Teks Effect
Photoshop Photo Efek
Photoshop Alternatif
Photoshop Plugins

CORELDRAW
CorelDRAW Dasar
CorelDRAW Logo
CorelDRAW Bebas
CorelDRAW Tools

BLENDER 3D
Blender Dasar

FOTOGRAFI
Lightroom

VECTOR
Adobe Illustrator

ANIMASI
Flash
Swishmax

3D MODELING
3dsMAX
AutoCAD
Cinema 4D

VIDEO EDITING
Adobe Premiere
After Effect
Pinnacle

WEB DESIGN
Dreamweaver
jQuery

PUBLISHING
InDesign
Ms. Paint

FREEWARE
Gimp
Inkscape

ARTS
News
Artikel
Gallery
Jasa Desain
Donasi

FRIENDS
Photoshop Desain
Hog Pictures

Link to us


bantuan information

ilmugrafis launcher
Privacy policy
Peta Situs | Term of Use web edukasi - ilmugrafis.com Indonesia
Copyright © 2017 ilmuGrafis. All Rights Reserved. | RSS | Subscribe
Hak Cipta Dilindungi Undang - Undang & Dmca
eXTReMe Tracker