Memperbesar Gambar Posting Dengan Klik

Bingung mau kasih judul apa, maksud dari judul di posting ini adalah membuat gambar kecil di posting ketika di klik menjadi besar contohnya bisa dilihat gambar dibawah ini atau mau lihat contoh langsungnya Disini Lokasi Peta.



Cara kerjanya: ketika cursor (mouse) diarahkan ke gambar tersebut maka akan keluar "panah" di pojok kiri atas gambar tersebut, jika di klik panah ini maka akan keluar gambar yang lebih besar di tengah halaman.

Okey, Cukup segitu pengetahuannya ya sekarang kita menuju TKP, Serius banget :)
Langkah Pertama : CopPas kode dibawah ini.

<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.js' type='text/javascript'/>
<link href='http://www.wallheaven.com/fullsize/fullsize.css' media='screen' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>
//<![CDATA[
(function($){

$.fn.fullsize = function(options) {

var defaults = {
shadow: true,
zoomInSpeed: 200,
zoomOutSpeed: 200,
fadeInSpeed: 250,
fadeOutSpeed: 250,
iconOffset: 8,
forceTitleBar: false,
extraTrigger: false,
parentSteps: 0,
destroy: false
};
var opts = $.extend(defaults, options);

// Remove all Fullsize Icons on destroy request
if(opts.destroy == true){
$("div.fullsize-icon").remove();
}

// If ESC key pressed, close Fullsize
$(document).keydown(function(event){
if(event.keyCode == 27){
$("div.fullsize-wrapper, div.fullsize-sh-wrap").fadeOut(opts.fadeOutSpeed, function(){
$(this).remove();
});
}
});

return this.each(function(){

// Remove all Fullsize bound events
if(opts.destroy == true){
$(this).unbind();
} else {

// Check to make sure there is a 'longdesc' attribute before we add Fullsize to the Element.
if($(this).attr("longdesc")) {

// Declare the current Image as a variable, and gather some of it's properties.
var org_image = $(this);
var img_title = org_image.attr("title");
var img_src = org_image.attr("longdesc");

// Setup the Fullsize Icon
var icon = $("<div></div>").addClass("fullsize-icon").css({"display":"none"});

// Move up Parents until the spcified limit has been met, then find the additional specified Selector
var addTrigger;
if(opts.extraTrigger){
var theParent = org_image;
for (var i=0; i <= opts.parentSteps; i++){
theParent = theParent.parent();
}
addTrigger = theParent.find(opts.extraTrigger);
}

org_image.add(addTrigger).hover(function(){

// If the Original Image is contained inside of an Element that has a 'overflow' set to 'hidden',
// and the Original Image has a negitive 'margin-top', this will make the Offest values be set to the
// Element with the 'overflow:hidden' property, rather than the Original Image itself.
// Otherwise the Fullsize icon would not show up in the correct position.
var margin_top = org_image.css("marginTop").slice(0,-2);
var margin_bottom = org_image.css("marginLeft").slice(0,-2);
var margin_left = org_image.css("marginLeft").slice(0,-2);
var margin_right = org_image.css("marginLeft").slice(0,-2);
if (margin_top < 0 || margin_bottom < 0 || margin_left < 0 || margin_right < 0) {
var parent_ele = $(org_image);
var parentEls = $(org_image).parents();
$(parentEls).each(function(){
if(this.tagName == "BODY") {
return false;
} else if($(this).css("overflow") == "hidden") {
parent_ele = $(this);
return false;
}
});
var offset = parent_ele.offset();
var parent_border_top = parseInt(parent_ele.css("border-top-width"));
var parent_border_left = parseInt(parent_ele.css("border-left-width"));
} else {
var offset = org_image.offset();
var parent_border_top = parseInt(org_image.css("border-top-width"));
var parent_border_left = parseInt(org_image.css("border-left-width"));
}
if (!parent_border_top){ parent_border_top = 0; }
if (!parent_border_left){ parent_border_left = 0; }

var displayFlag = false;
$("div.fullsize-icon").each(function(){
if(parseInt($(this).css("top")) == (offset.top + opts.iconOffset + parent_border_top) && parseInt($(this).css("left")) == (offset.left + opts.iconOffset + parent_border_left)){
displayFlag = true;
curIcon = $(this);
}
});
if(displayFlag == false){
$(icon).css({"top":offset.top + opts.iconOffset + parent_border_top, "left":offset.left + opts.iconOffset + parent_border_left});
$("body").prepend(icon);
}
$(icon).show();
}, function(){
$(icon).hide();
});
$(icon).hover(function(){
$(this).show();
}, function(){
$(this).hide();
});

$(icon).click(function(){

// If a Fullsize Popup is currently active, we will remove it before creating a new one.
$("div.fullsize-wrapper, div.fullsize-sh-wrap").remove();

// Gather window & scroll positions.
var win_w = $(window).width();
var win_h = $(window).height();
var scrolltop = $(window).scrollTop();
var scrollleft = $(window).scrollLeft();

// Setup the Loading DIV
var loading_left = ((win_w / 2) + scrollleft) - 25;
var loading_top = ((win_h / 2) + scrolltop) - 25;
var full_loading = $("<div></div>").addClass('fullsize-loading').css({"margin-left":loading_left, "margin-top":loading_top});
var full_loading_inner = $("<div></div>").addClass('fullsize-loading-inner');
$(full_loading).prepend(full_loading_inner);
$("body").prepend(full_loading);

// Setup the Fullsize Image
var full_img = new Image();
$(full_img).load(function(){
$(this).hide();

// Determine how to position the Fullsize Image into the center of the page.
var new_offset = org_image.offset();
img_w = this.width;
img_h = this.height;

// If the Image is bigger than the window, shrink it to fit in the window.
aspect = img_w / img_h;
if ((img_w + 30) > win_w) {
img_w = win_w - 30;
img_h = img_w / aspect;
}
if ((img_h + 30) > win_h) {
img_h = win_h - 30;
img_w = img_h * aspect;
}

var img_left = Math.round(((win_w - img_w) / 2) + scrollleft);
var img_top = Math.round(((win_h - img_h) / 2) + scrolltop);
if(img_left < 0) {
img_left = 0;
}
if(img_top < 0) {
img_top = 0;
}

$(this).css({"height": org_image.height() + "px", "width":org_image.width() + "px"});
$("div.fullsize-loading").remove();
var full_wrap = $("<div></div>").addClass("fullsize-wrapper").css({"display":"none", "margin-top":new_offset.top, "margin-left":new_offset.left});
$(full_wrap).prepend(this);

// If there is a 'Title' attribute on the Original Image, display the Title bar.
if(img_title != "" || opts.forceTitleBar == true) {
var full_close = $("<a></a>").addClass("fullsize-close");
var full_title = $("<div></div>").addClass("fullsize-title").css({"max-width":img_w});
var full_title_text = $("<div></div>").addClass("fullsize-title-text").text(img_title);
$(full_title).prepend(full_close);
$(full_title).prepend(full_title_text);
$(full_wrap).prepend(full_title);
$("body").prepend(full_wrap);
if(img_top != 0) {
img_top = img_top - 12;
}
} else {
$(this).addClass("fullsize-close");
$("body").prepend(full_wrap);
}

// Setup Shadows
if (opts.shadow == true) {
if ($.browser.safari) {
$(full_wrap).css({"-webkit-box-shadow":"0 2px 16px #000", "box-shadow":"0 2px 16px #000"});
} else {
var full_sh_wrap = $("<div></div>").addClass("fullsize-sh-wrap").css({"display":"none", "width": org_image.width(), "margin-top":new_offset.top, "margin-left":new_offset.left});
var full_sh_top = $("<div></div>").addClass("fullsize-sh-top");
var full_sh_top_left = $("<div></div>").addClass("fullsize-sh-top-l");
var full_sh_top_middle = $("<div></div>").addClass("fullsize-sh-top-m");
var full_sh_top_right = $("<div></div>").addClass("fullsize-sh-top-r");
$(full_sh_top).append(full_sh_top_left).append(full_sh_top_right).append(full_sh_top_middle);
$(full_sh_wrap).prepend(full_sh_top);
var full_sh_body = $("<div></div>").addClass("fullsize-sh-body");
var full_sh_body_r = $("<div></div>").addClass("fullsize-sh-body-r");
$(full_sh_body).append(full_sh_body_r);
$(full_sh_wrap).append(full_sh_body);
var full_sh_bottom = $("<div></div>").addClass("fullsize-sh-bottom");
var full_sh_bottom_left = $("<div></div>").addClass("fullsize-sh-bottom-l");
var full_sh_bottom_middle = $("<div></div>").addClass("fullsize-sh-bottom-m");
var full_sh_bottom_right = $("<div></div>").addClass("fullsize-sh-bottom-r");
$(full_sh_bottom).append(full_sh_bottom_left).append(full_sh_bottom_right).append(full_sh_bottom_middle);
$(full_sh_wrap).append(full_sh_bottom);
$("body").prepend(full_sh_wrap);

// Setup shadow Animations
$(full_sh_body).animate({
height: parseInt(full_wrap.height()) + img_h - 22
}, {queue:false, duration:opts.zoomInSpeed});
$(full_sh_wrap).fadeIn(opts.fadeInSpeed).animate({
height: parseInt(full_wrap.height()) + img_h + 22,
width: img_w + 22,
marginTop: img_top - 9,
marginLeft: img_left - 11
}, {queue:false, duration:opts.zoomInSpeed});
}
}

// Setup Animations
$(this).fadeIn(opts.fadeInSpeed).animate({
height: img_h,
width: img_w
}, {queue:false, duration:opts.zoomInSpeed});
$(full_wrap).fadeIn(opts.fadeInSpeed).animate({
width: img_w,
marginTop: img_top,
marginLeft: img_left
}, {queue:false, duration:opts.zoomInSpeed});

$(".fullsize-close").click(function(){
closeFullsize(full_img, full_wrap, org_image, $(this));
});

}).attr("src",img_src).addClass("fullsize-image");


});

// This function is purposely pulled out of the Image Load function.
// By doing so the Fullsize Image will now find the exact loacation of the Original Image
// when you click the Close button. This way the Fullsize Image will always go back to it's
// original position, even if you resize the window, and the Original Image changes it's position.
function closeFullsize(full_img, full_wrap, org_image, ele) {
var offsets = org_image.offset();
$(full_img).fadeOut(opts.fadeOutSpeed).animate({
height: org_image.height(),
width: org_image.width()
}, {queue:false, duration:opts.zoomOutSpeed});

if (opts.shadow == true) {
$("div.fullsize-sh-wrap").remove();
}

$(full_wrap).fadeOut(opts.fadeOutSpeed).animate({
width: org_image.width(),
marginTop: offsets.top,
marginLeft: offsets.left
}, {queue:false, duration:opts.zoomOutSpeed, complete: function(){ele.remove();}});

}


}
}
});
}
})(jQuery);

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){
jQuery("img").fullsize([]);
});
//]]>
</script>

Kemudian paste kode tersebut dan letakkan diantara kode: </b:skin> {posisi kode}</head>Lalu jangan lupa simpan template.

Langkah Kedua: klik tab pengaturan, lalu klik format kemudian isikan pada tempalte posting:
<img alt="keterangan gambar" longdesc="link_ke_gambar_besar" src="link_ke_gambar_kecil" />

Contohnya Link Gambar yang sudah di Upload Pindahkan ke kode di atas dengan mengganti ukuran gambar.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLT5JG2g89GHMV6eav0BHDT4qoIXO-XM_aQl1LNMDy3u-k1wCbdC5Aeh-a8-dBIA2dCoYd_EnwRo8FFKjbPCClZz6_kfcklJhh7ozSot7-KEqbojHzYv0aOE5-wZaZMekjCiNCsicUQGjQ/s320/contoh%2Bgambar%2Bbesar.jpg" />
Ganti yang berwarna biru dengan S800 agar kelihan besar.

Cari Artikel Lainnya Disini

Custom Search

Bagi yang ingin belajar PHP / HTML / MySQL dengan sangat mudah sambil langsung praktek dalam waktu yang singkat,di tuntun dengan tutorial video yang di rancang khusus dan mudah di mengerti, Witto Mengajak anda belajar DISINI.