jQuery Greybox on Blogspot

Masih teringat tidak dengan artikel ini Popup Gaya With jQuery dan Beben si bloglang anu ganteng kalem tea juga pernah minta tolong disini help!!! Sampai detik ini masalahnya belom ketemo sob :-s malah ini blog nambah aneh lagi masalahnya...beugh !@#$%^&*()_ Beberapa trik seperti popup, hover jQuery sekarang gak berjalan dengan perfect. Setiap ke halaman postingan dan pada keadaan home memang berbeda, tapi yak itu tadi sob bedanya ini blog edan pada keadaan home normal trik berjalan. Pada keadaan full posting trik mendet alias berantakan :)) Sudahlah sob, itu masalah si bloglang, biarin saja maunya gimana ini blog edan :))

Masih seputar trik berbau-bau popup, kali ini serupa tapi lain caranya sob.

D E M O

Image yg akan ditampilkan telah dibatasi dengan metode frame, sehingga tidak akan melebihi lebar dan tinggi yg sudah ditetapkan. Sobat nanti hanya tinggal membubuhkan atribut class='greybox' pada setiap penulisan syntax. Contoh:<a class="greybox" href="http://your-link" title="your title">YOUR TITLE</a>Mudahkan sob :)

Kode CSS

#GB_overlay {
background: #000;
opacity: 0.7;
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 100%;
cursor: pointer;
margin: auto;
}
* html #GB_overlay { background: #000 url(http://www.blogger.com/img/blank.gif) }
#GB_window {
top: 40px;
left: 0;
position: fixed;
background: #EEE3B5;
border: 5px solid #777;
overflow: auto;
width: 100%;
height: 400px;
z-index: 150;
}
#GB_frame {
border: 0;
overflow: auto;
width: 100%;
height: 400px;
}
#GB_caption {
font: 12px bold helvetica, verdana, sans-serif;
color: #fff;
background: #666;
text-align: left;
border-bottom: 5px solid #777;
margin: 0;
padding: 2px 0 3px 5px;
}
#GB_window img {
position: absolute;
top: 2px;
right: 3px;
cursor: pointer;
}

jQuery Script

<script type='text/javascript'>
//<![CDATA[
/* Greybox Redux
* Required: http://jquery.com/
* Written by: John Resig
* Based on code by: 4mir Salihefendic (http://amix.dk)
* License: LGPL (read more in LGPL.txt)
*/
var GB_DONE = false;
var GB_HEIGHT = 400;
var GB_WIDTH = 400;

function GB_show(caption, url, height, width) {
GB_HEIGHT = height || 400;
GB_WIDTH = width || 400;
if (!GB_DONE) {
$(document.body).append("<div id='GB_overlay'></div><div id='GB_window'><div id='GB_caption'></div>" + "<img src='http://www.blogger.com/img/close.png' alt='Close'/></div>");
$("#GB_window img").click(GB_hide);
$("#GB_overlay").click(GB_hide);
$(window).resize(GB_position);
GB_DONE = true;
}
$("#GB_frame").remove();
$("#GB_window").append("<iframe id='GB_frame' src='" + url + "'></iframe>");
$("#GB_caption").html(caption);
$("#GB_overlay").show();
GB_position();
if (GB_ANIMATION) $("#GB_window").slideDown("slow");
else $("#GB_window").show();
}

function GB_hide() {
$("#GB_window,#GB_overlay").hide();
}

function GB_position() {
var de = document.documentElement;
var w = self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
$("#GB_window").css({
width: GB_WIDTH + "px",
height: GB_HEIGHT + "px",
left: ((w - GB_WIDTH) / 2) + "px"
});
$("#GB_frame").css("height", GB_HEIGHT - 32 + "px");
} //]]>
</script>

Untuk script ini letakan dibawah kode jQuery inti<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>Bisa juga dicoba letakan setelah kode ]]></b:skin>Lalu scroll kebagian bawah template, temukan tag penutup </body> dan masukin script jQuery pemanggil dibawah ini

<script type='text/javascript'>
    //<![CDATA[
    var GB_ANIMATION = true;
    $(document).ready(function() {
        $("a.greybox").click(function() {
            var t = this.title || this.innerHTML || this.href;
            GB_show(t, this.href, 615, 900);
            return false;
        });
    }); //]]>
</script>

Godluck and happy blogging \m/