Jquery Image Efek Kubus Berputar

Jquery Image Efek Kubus Berputar – ada banyak cara untuk membuat efek pada gambar di postingan blog, misalnya seperti pada Jquery gambar efek zoom bergeser dan membuat efek zoom pada gambar. Jika pada contoh kedua gambar tersebut adalah membuat efek gambar menjadi membesar, maka pada pada efek gambar yang akan saya bahas ini bukan efek zoom lagi melainkan efek pada gambar menggunakan JQuery memungkinkan Anda untuk menyajikan urutan gambar dalam tampilan tiga dimensi dan dapat berputar untuk menampilan gambar dalam rentang waktu yang sudah ditentukan. Untuk melihat seperti apa gambar tersebut? Silahkan lihat, klik pada demo dibawah ini:

Fungsi Jquery image efek kubus berputar dengan mudah dapat ditambahkan ke postingan blog dengan pengaturan standar yang sesuai. Ini kemudian menampilkan gambar yang terkandung dalam divisi yang ditargetkan dalam siklus setiap dua detik. Sebuah rotasi acak memilih setiap kali untuk pindah ke gambar berikutnya. Highlight dan bayangan yang digunakan untuk meningkatkan efek 3D. Gambar dengan efek yang siap terpampang manis dan dapat membuat slideshow gambar yang indah dengan script jquery. Kubus sepenuhnya disesuaikan dan interaktif efek 3D foto slideshow serta sederhana dan mudah untuk mengkonfigurasikannya. Untuk memasangnya kedalam blog anda, berikut tutorial lengkapnya tentang Jquery Image Efek Kubus Berputar:

1. Login ke akun Blogger anda.
2. Kemudian pada Dashboard blog anda klik Template > Edit Html > Lanjutkan > centang Expand Template Widget.
3. Cari kode <head> gunakan CTRL+F untuk mempermudah pencarian.
4. Jika sudah ketemu, Copy kode berikut ini kemudian letakan tepat dibawah kode <head>.

5. Simpan Template.

Oke, sampai tahap sini sudah selesai dan gambar siap digunakan kedalam postingan atau bagian blog lainnya. Cara selanjutnya sekarang adalah memunculkan gambar tersebut supaya menjadi 3 dimensi saat diposting, caranya masukan kode script dibawah ini pada kolom posting mode HTML:

<div id="defaultCube" style="height: 300px; width: 500px;">

<img alt="Jquery Image Efek Kubus Berputar" src="URL GAMBAR 1" />

<img alt="Jquery Image Efek Kubus Berputar" src="URL GAMBAR 2" />

<img alt="Jquery Image Efek Kubus Berputar" src="URL GAMBAR 3" />

<img alt="Jquery Image Efek Kubus Berputar" src="URL GAMBAR 4" />

<img alt="Jquery Image Efek Kubus Berputar" src="URL GAMBAR 5" />

</div>

<div align="center" id="dumdiv" style="color: #dadada; font-size: 10px;" valign="top">

<a href="http://mas-andes.blogspot.com/" id="dum" style="color: #dadada; color: #dadada; font-size: 10px; text-decoration: none;">Jquery</a></div>

<script src="http://faceblog-evolutions.googlecode.com/files/scriptjquery.js" type="text/javascript"></script>

<script type="text/javascript">

var sds = document.getElementById("dum");

    if(sds == null){

        alert("You are using a free package.\n You are not allowed to remove the tag.\n");

    }

    var sdss = document.getElementById("dumdiv");

    if(sdss == null){

        alert("You are using a free package.\n You are not allowed to remove the tag.\n");

    }

if(sds!=null){

$('#defaultCube').imagecube({

direction: 'random', // Direction of rotation: random|up|down|left|right

randomSelection: ['up', 'down', 'left', 'right'], // If direction is random, select one of these

speed: 2000 // Time taken (milliseconds) to transition

});

}

$(function(){

var alt = 0;

$("#left").live(function(){

alt%2 == 0?

$("#flipMe")

.css("background-color", "#000")

.animate({height:200+"px", width: 0+"px",marginLeft: 250+"px"},590)

.css("background-color", "#555")

.animate({height:200+"px", width: 500+"px",marginLeft:0+"px"},820):

$("#flipMe")

.css("background-color", "#555")

.animate({height:200+"px", width: 0+"px", marginLeft: 250+"px"},590)

.css("background-color", "#000")

.animate({height:200+"px", width: 500+"px",marginLeft: 0+"px"},820);

alt++;

})

$("#top").live(function(){

alt%2 == 0?

$("#flipMe")

.css("background-color", "#000")

.animate({width:500+"px", height: 0+"px", marginTop: 100+"px"},590)

.css("background-color", "#555")

.animate({width:500+"px", height: 200+"px", marginTop: 0+"px"},820):

$("#flipMe")

.css("background-color", "#555")

.animate({width:500+"px", height: 0+"px", marginTop: 100+"px"},590)

.css("background-color", "#000")

.animate({width:500+"px", height: 200+"px", marginTop: 0+"px"},820);

alt++;

})

$("#right").live(function(){

alt%2 == 0?

$("#flipMe")

.css("background-color", "#000")

.animate({height:200+"px", width: 0+"px",marginLeft: 250+"px", marginRight: 250+"px"},590)

.css("background-color", "#555")

.animate({height:200+"px", width: 500+"px",marginLeft:0+"px",marginRight: 0+"px"},820):

$("#flipMe")

.css("background-color", "#555")

.animate({height:200+"px", width: 0+"px", marginLeft: 250+"px",marginRight: 250+"px"},590)

.css("background-color", "#000")

.animate({height:200+"px", width: 500+"px",marginLeft: 0+"px", marginRight: 0+"px"},820);

alt++;

})

$("#bottom").live(function(){

alt%2 == 0?

$("#flipMe")

.css("background-color", "#000")

.animate({height:200+"px", width: 0+"px",marginLeft: 250+"px", marginRight: 250+"px"},590)

.css("background-color", "#555")

.animate({height:200+"px", width: 500+"px",marginLeft:0+"px",marginRight: 0+"px"},820):

$("#flipMe")

.css("background-color", "#555")

.animate({height:200+"px", width: 0+"px", marginLeft: 250+"px",marginRight: 250+"px"},590)

.css("background-color", "#000")

.animate({height:200+"px", width: 500+"px",marginLeft: 0+"px", marginRight: 0+"px"},820);

alt++;

})

});

</script>

Keterangan:

Ganti tulisan yang berwarna merah dengan URL Gambar milik anda.

6. Selesai dan lihat hasilnya.

Kode script di atas bisa di letakkan dimana saja terserah keinginan anda, jika anda ingin menaruh gambar tersebut pada sidebar blog maka caranya:

1. Login kemudian klik Tata Letak > Tambah Widget > pilih Javascript/HTML, kemudian paste kode script yang diatas tersebut kedalam kolom HTML yang tersedia.

2. Langkah terakhir, Save dan selesai lihat hasilnya.

Langkah yang sangat mudah dan tidak memakan banyak waktu, maka hasil dari Jquery Image Efek Kubus Berputar sudah melengkapi blog anda dengan sempurna.

ScreenShot

Iklan

Jquery Image Efek Kubus Berputar

0 Response to "Jquery Image Efek Kubus Berputar"

Posting Komentar