Mitra Bewara Sunda: JQuery Gambar

Yang ini sangat praktis membuatnya. Jquery simple image zoomer hanya menggunakan jQuery-1.3.2.js atau jQuery lain yang fungsinya setara dengan jQuery-1.3.2.js. Jika misalnya ada yang selama ini seudah menggunakan jQuery-1.3.2.js, jQuery-1.3.2.min.js atau bahkan mungkin jQuery-1.4.2.js hingga jQuery-1.7.2.js, maka tinggal tambahkan saja simple-image-zoomer.js kemudian gunakan untuk menampilkan gambar/image di halaman posting.

Sekalipun sebenarnya tanpa bantuan kode CSS simple image zoomer sudah bisa bekerja secara maksimal, namun kita akan coba seddikit menambahkan kode CSS yang digabungkan dengan css3 agar image terlihat lebih cantik.

D E M O

D E M O

D E M O

Javascript Simple Image Zoomer

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="https://mitrabaraya.googlecode.com/svn/mitrabaraya-simple-zoomer.pack.js" type="text/javascript"></script>

xHTML Simple Image Zoomer

<img class="mBjdbadag" src="https://sites.google.com/site/mitrabarayasunda/image/duamojang_001.jpg" width="150" height="225" />

<img class="mBjdbadag" src="https://sites.google.com/site/mitrabarayasunda/image/duamojang_002.jpg" style="width:200px;height:auto;" />   

<img class="mBjdbadag" data-mBjdbadagto="700"    src="https://sites.google.com/site/mitrabarayasunda/image/duamojang_003.jpg" width="150" height="130" />

Cara menggunakan Simple Image Zoomer

Login ke blogger.
Halaman Dasbor (Dasboard).
Klik Rancangan (Design).
Klik Edit HTML.
Lakukan pengamanan terhadap template atau Backup Template. Panduanya bisa dibaca di Special Tutorials yang ada di menu sebelah kiri.
Cari kode <head>. Gunakan Ctrl + F untuk memudahkan pencarian kode. Jika menginginkan panduan cara cepat cari kode html dalam template buka Special Tutorials yang terletak di menu vertikal sebelah kiri.
Copy dan pastekan javascript di bawah kode <head>.
Jika ingin menggunakan tambahan kode CSS agar image terlihat seperti dalam DEMO, Cari kode ]]></b:skin>.
Copy dan pastekan kode CSS di atas kode ]]></b:skin>.
Klik Simpan Template (Save Template).
Gunakan xHTML untuk melakukan posting.
Buka halaman posting untuk melihat hasilnya.

Kode CSS Simple Image Zoomer

.mBjdbadag{
        border:2px solid #eee;
        margin:6px;
        background:#aaa;
        border-radius:10px;
        padding:10px;
        box-shadow:0 0 8px #000;
}

Keterangan/Catatan

Gunakan image dengan ukuran width dan/atau height lebih dari 300px agar efek zoom lebih terlihat.
Width dan height yang disertakan pada kode html posting sebaiknya berukuran di bawah 250px agar tidak terlalu memenuhi halaman posting.
Ukuran width dan height pada kode HTML menggunakan perbandingan sesuai dengan image sesungguhnya. Jika image berukuran width=800, height=400 maka pada kode html bisa menggunakan ukuran width=200 dan height=100
Jika dalam kode html ditambahkan tag style (seperti contoh kode ke-3), maka bisa dituliskan width="..px; height:auto;
Besaran zoom bisa diatur dengan menambahkan kode data-mBjdbadagto="700". Nilai 700 dalam satuan pixel (width).
Kode CSS hanya dimaksudkan untuk memperindah image bebas untuk digunakan ataupun tidak.

Deskripsi gambar ti slider ieu aya di palebah katuhu gambar. Deskripsi boga fungsi kanggo nepikeun informasi sakaligus memuat link anu patali jeung gambar/image anu dipidangkeun. Teks deskripsi gambar kedah didamel seminimal manawi (seperlunya wae) margi tanagi tande rohang anu saleresna alit pisan. Anjeun tiasa ngasupkeun link kanggo deskripsi/penjelasan anu langkung rinci .

KETERANGAN/CATETAN:

Gancangna slider tiasa diatur kalawan ngalakukeun parobahan dina javascript (intervalObject --> countDown, 400: beuki ageung beuki lils/laun).
Anjeun tiasa ngaturna oge di var totalSec.
Kanggo midamel na pigawe pengamanan template leuwih tiheula.
Sanggeus rengse ngamankeun template teruskeun kalawan nunda KODE CSS di luhur KODE ]]></b:skin>
Simpen JQuery.1.3.2.min.js jeung javascript di handapeun KODE <head> cing ngaruntuy.
xHTML digunakeun dibagian body atawa di jero posting.

Supados proses pembuatan mapan lancar,kanggo anu dina keneh babak diajar mangga buka Special Tutorials di menu sebelah kiri.

Lamun DEMO-1 gagal dibuka mangga cobian DEMO-2:

D E M O - 1 D E M O - 2

KODE CSS - JQUERY IMAGE SLIDER WITH DESCRIPTION :

#featurelistarea{ /*box utamana/palingluar */
        padding: 10px 10px 14px 10px;
        margin:5px; 
        height:285px; 
        width:690px;  /*bisa oge diganti ku with:auto; */ 
}
#featuremainpic{  /* box gambar */
        position:relative; 
        float: left; 
        width:348px; 
        height:288px; 
        border: 1px solid black; 
        overflow: hidden;
}
.featurepic{  /*image*/
        display:none;
        background:#996600;
        width:320px;
        height:260px;
        border:4px solid #660000;
        border-radius:15px;  /* border corners */
        padding:8px;
        margin:2px;
}
#featurepic0{  /*opening image*/
        display:block;
        height: 260px;  /*penting: sesuai lebar iamge */
} 
#featurelistheader{
        width:339px;  /*box judul katuhu luhur: h1 */ 
        height:38px;
}
#featurelistheader h1{
        margin: 0px; 
        background: url(https://sites.google.com/site/mitrabewara/bg/mbbeureumHideungV32H7.gif);
        font-family:Verdana  /*Comic Sans MS*/; 
        font-size:16px;
        font-weight:700;
        height:34px; 
        padding:5px 10px 0 10px;
}
#featurelistheader a{  /* header link */ 
        text-decoration:none;
        border-bottom:1px dotted #999;
        color:#999900;
}
#featurelistheader a:hover{  /*header link hover */
        color:white;
        background:black;
        padding:2px 6px;
} 
#featurelistbox{
        position:relative; 
        float:left;  
} 
#featurelist{  /* boks teks */
        position:relative; 
        border:1px solid #666; 
        border-top:none; 
        border-left:none;
        height: 251px;
        line-height:16px;
        z-index:4000;
}
#feature4{
        position:relative; 
        width :333px;  
        border-top:1px dotted yellow; 
        padding: 10px 0px 0px 6px;
}
.feature{  /* boks teks kecil (teks/gambar) */
        position:relative; 
        width: 333px; 
        border-top:1px dotted yellow; 
        padding: 4px 0px 4px 6px; 
        cursor:pointer;
}
.feature a{
        font-size:11px;
        font-family:Arial;
        font-weight:bold;
        color:red;
        text-decoration:none;
} 
.featureon{
        background-color:#000; 
        opacity:0.8;
        filter:alpha(opacity=80); 
}
.featureon:hover{
        background-color:#000; 
        opacity:1.0;
        filter:alpha(opacity=100);
} 
#featurelist{ margin:0px; font-size:10px; font-family:Arial; background: #003366; line-height:14px;}
#featurelist a{padding-left:13px; font-weight:bold; color:green;text-decoration:none;}
#featurelist a:link{color:orange; }
#featurelist a:active{color:#00CCFF;}
#featurelist a:visited{color:#fff;}
#featurelist a:hover{color:#66FFFF;}
#featurelist .Title{padding-left:7px;text-transform:uppercase;text-decoration:none;}
#featurelist .Title:link{color:#999;}
#featurelist .Title:active{color:yellow;}
#featurelist .Title:visited{color:#fff;}
#featurelist .Title:hover{color: #fff;}
#featurelist .SubTitle{font-size:11px;padding-left:7px;font-weight:normal;text-transform:none; text-decoration:none;}
#featurelist .SubTitle:link{ color:#999;}
#featurelist .SubTitle:active{ color:yellow;}
#featurelist .SubTitle:visited{ color:#666;}
#featurelist .SubTitle:hover{ color:#fff;}
#featurelist .RedBullet img{padding:0 10px 0 40px;}
#featurelist .RedBullet{text-decoration:none; padding-left:8px;}
#featurelist .RedLink:link{color:#cc0000;font-weight: bold; font-size: 12px;}
#featurelist .RedLink:active{color:#fff;}
#featurelist .RedLink:visited{color:#666;}
#featurelist .RedLink:hover{color:yellow; text-decoration:underline;}

JQUERY.1.3.2.MIN.JS :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

JAVASCRIPT - JQUERY IMAGE SLIDER WITH DESCRIPTION :

<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function () {
    intervalObject = setInterval(countDown, 400);
    jQuery("#featurelist .feature").each(
    function (IntIndex) {
        jQuery(this).hover(featureOn, featureOff);
        function featureOn() {
            jQuery('.feature').removeClass("featureon");
            jQuery(this).addClass("featureon");
            jQuery('.featurepic').hide();
            jQuery('#featurepic' + IntIndex).fadeIn("fast");
            pause();
        }
        function featureOff() {
            play();
        }
    });
});
var totalSec = 10;
var intervalObject;
var isPlaying = true;
function featurePlay() {}
function play() {
    if (isPlaying == false) {
        isPlaying = true;
        intervalObject = setInterval(countDown, 400);
    }
}
/* Control of the play/pause */
function pause() {
    if (isPlaying == true) {
        isPlaying = false;
        clearInterval(intervalObject);
        totalSec = 10;
    }
}
function countDown() {
    if (totalSec < 0) {
        totalSec = 10;
        var currentDiv = jQuery('#featurelist .featureon').attr('id');
        var count = currentDiv.charAt(7);
        count++;
        if (count > 3) {
            count = 0;
        } else {}
        jQuery('.feature').removeClass("featureon");
        jQuery('#feature' + count).addClass("featureon");
        jQuery('.featurepic').hide();
  jQuery('#featurepic' + count).fadeIn("fast");
    }
 else {
        totalSec--;
    }
}
//]]>
</script>

XHTML - JQUERY IMAGE SLIDER WITH DESCRIPTION :

<div id="featurelistarea" style="background: #3366CC;">
<div id="featuremainpic">
<a href="Link-Image1"><img src="Image1.jpg" id="featurepic0" class="featurepic"/></a>
<a href="Link-Image2"><img src="Image2.jpg" id="featurepic1" class="featurepic"/></a>
<a href="Link-Image3"><img src="Image3.jpg" id="featurepic2" class="featurepic"/></a>
<a href="Link-Image4"><img src="Image4.jpg" id="featurepic3" class="featurepic"/></a>
</div>
<div id="featurelistbox">
<div id="featurelistheader">
<h1><a href="Link-Judul/Nama Boks">Nama/Judul boks</a></h1>
</div>
<div id="featurelist">
<div id="feature0" class="feature featureon" ><a href='URL-1' class='Title' target="_blank" title='Teks Title-1'>Judul Deskripsi-1<br><span class="SubTitle">Tulis teks deskripsi-1 di sini !</span></a><span><a href="Link Ekstra-1">Teks Ekstra-1</a></span>
</div>
<div id="feature1" class="feature"><a href='URL-2' class='Title' target="_blank" title='Teks Title-2'>Judul Deskripsi-2<br><span class="SubTitle">Tulis teks deskripsi-2 di sini !</span></a><span><a href="Link Ekstra-2">Teks Ekstra-2</a></span>
</div>
<div id="feature2" class="feature"><a href='URL-3' class='Title' target="_blank" title='Teks Title-3'>Judul Deskripsi-3<br><span class="SubTitle">Tulis teks deskripsi-3 di sini !</span></a><span><a href="Link Ekstra-3">Teks Ekstra-3</a></span>
</div>
<div id="feature3" class="feature"><a href='URL-4' class='Title' target="_blank" title='Teks Title-4'>Judul Deskripsi-4<br><span class="SubTitle">Tulis teks deskripsi-4 di sini !</span></a><span><a href="Link Ekstra-4">Teks Ekstra-4</a></span>
</div>
<div id="feature4"><img src="https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/jquery/image-slider-w-description/images/CalendarAnima.gif" border="0"/><a class="RedLink" href="Link Bawah-1" target="_blank" >Nama Link Bawah-1</a><img src="http://www.mforum.ru/i/fm_user_5.png" border="0"/><a class="RedLink" href="Link Bawah-2" target="_self" >Nama Link Bawah-2</a>
</div>
</div>
</div>
<div class="clear"></div>
</div>

Mangga oge dibuka Tutorial sanesna anu metot pikabitaeun sarta patut di turutan ku anjeun sadayana. Akses ngaliwatan link handap ini:

Mitra Bewara Sunda

H O M E

My Blog

Kab/Kota di Sulawesi

Kab/Kota di Bali

Sumatera

Kab/Kota di Kalimantan

Selasa, 04 Maret 2014

jQuery Simple Image Zoomer

Senin, 17 Februari 2014

JQuery Gambar Slider with Description

KODE CSS - JQUERY IMAGE SLIDER WITH DESCRIPTION :

JQUERY.1.3.2.MIN.JS :

JAVASCRIPT - JQUERY IMAGE SLIDER WITH DESCRIPTION :

XHTML - JQUERY IMAGE SLIDER WITH DESCRIPTION :

Blogger - Blogspot

Bule Cantik Menunggu Lamaran

Earthquake Effects on No Right Click

Javascript