Make Display Image like On Google Image Search use Photowall jQuery Plugin

Tutorial jQuery plugin saat ini akan sangat cocok sekali bagi blogger yang konten blognya di dominasi oleh gambar. Koben sekarang akan berbagi informasi cara membuat a photo displaying using jquery plugin. Project karya master Jeremy JC Paul ini diberi nama PhotoWall.js Mungkin di antara sobat sudah pernah melihat plugin jQuery display for image yang lebih dahsyat dari ini! Tapi kenapa AA Koben pilihkan yg ini, because eh karena hasil jadi dari PhotoWall mirip dengan kepunyaan google search imageIngat sekali lagi, fitur ini diperuntukan untuk blogger yg mana blognya memang sebagian besar menampilkan image content! Tetapi bagi blogger yg suka dengan gaya, silahkan ajah pasang :))

.photowall {
position: relative;
width: 1270px;
height: 100%;
margin: 0 auto;
}
.pw-slide {
position: relative;
float: left;
margin: 5px;
cursor: pointer;
}
.pw-slide .pw-image {
max-height: 200px;
}
.pw-slide .pw-image-desc {
display: none;
}
.pw-previewer {
position: relative;
float: left;
width: 1258px;
margin: 0 5px;
padding: 50px 0;
color: #EEE;
background: #333;
}
.pw-previewer.hide {
display: none;
}
.pw-previewer .pw-previewer-close {
position: absolute;
right: 23px;
top: 10px;
font-size: 40px;
font-family: Verdana, Arial, sans-serif;
color: #000;
}
.pw-previewer .pw-previewer-close:hover {
cursor: pointer;
color: #555;
}
.pw-previewer .pw-image {
float: left;
max-width: 500px;
margin: 0 0 0 100px;
}
.pw-previewer > div {
float: right;
width: 400px;
margin: 25px 200px 0 0;
}

Itu kode css basic, silahkan rubah nominal yg ada dan tambahkan variabel lainnya sesuai dengan kebutuhan masing-masing.

Markup HTML
Cari pada template kalian kode berikut<div class='post' id='post'>Pokoknya yg mirip² dengan itu! Sisipkan ke dalamnya dengan tag<div class='photowall'>Tutuplah tag tersebut dengan tag </div> scroll ke bawah tepat di atas tag penutup <div class='post' id='post'> Kurang lebih penampakan sbb

<div class='post' id='post'>
<div class='photowall'>

<div class='title'>
    <a expr:name='data: post.id'/>
    <b:if cond='data: post.title'>
        <b:if cond='data: post.url'>
       <h1 id='PostTitle'><data: post.title/></h1>
        <b:else/>
<h1><data: post.title/></h1>
        </b:if>
    </b:if>
. . .
. . .
. . .
</div>
</div>

Tagging tersebut fungsinya adalah agar markup-HTML (cara penulisan syntax) pada postingan lebih irit kode :p Pemakaian di area postingan dengan syntax berikut<div class="pw-slide">
<img class="pw-image" src="http://LINK-IMAGE-HERE" />
<div class="pw-image-desc">
<h1>The TITLE</h1>
<p>Blah Bleh Bloh Here</p>
</div>
</div>Hostingkan jQuery Photowall biar mempercepat akses loading!

/*!
* jQuery photoWall.js v0.1.0
* http://jeremyjcpaul.com
* https://github.com/jeremyjcpaul/photowall
*
* Copyright 2013 Jeremy JC Paul
* Released under the MIT license.
* https://github.com/jeremyjcpaul/photowall/blob/master/MIT-LICENSE.txt
*
* Date: 04/06/2013
*/
;(function($){var pluginName='photoWall';var $pwCurrentSlide=0;var $pwCurrentPreviewer=0;function Plugin(element,options){var el=element;var $el=$(element);options=$.extend({},$.fn[pluginName].defaults,options);function init(){hook('beforeInit');$(window).load(function(){$(".pw-previewer").remove();$(".pw-slide").attr("class","pw-slide");var $offset=0;$(".pw-slide").each(function(){$(this).addClass("offset-"+$(this).offset().top);if($offset!=0){var $newOffset=$(this).offset().top;if($offset!=$newOffset){$(this).prev().addClass("pw-slide-group-last");$(this).addClass("pw-slide-group-first").before("<div class='pw-previewer pw-preview-"+$offset+" hide'>HERE</div>");$offset=$newOffset;}}else
{$offset=$(this).offset().top;}});$el.append("<div class='pw-previewer pw-preview-"+$offset+" hide'>HERE</div>");$el.children(".pw-slide:first").addClass("pw-slide-group-first");$el.children(".pw-slide: last").addClass("pw-slide-group-last");hook('afterInit');});$(".pw-slide").click(function(){$pwCurrentSlide=$(this);$(".pw-previewer").addClass("hide").stop().slideUp(options.speed);$previewer=$pwCurrentSlide.nextAll(".pw-previewer:first");$pwCurrentPreviewer=$previewer;$previewer.empty();$previewer.append("<span class='pw-previewer-close'>x</span>");$(".pw-previewer-close").click(function(){$pwCurrentSlide=0;$pwCurrentPreviewer.empty();$pwCurrentPreviewer=0;$(".pw-previewer").addClass("hide").stop().slideUp(options.speed);});$(this).children("img").clone().appendTo($previewer);$(this).children(".pw-image-desc").contents().clone().appendTo($previewer);$previewer.children("h1, p").wrapAll("<div />");$previewer.slideDown(options.speed,function(){$('html,body').animate({scrollTop:$previewer.children("img").offset().top-100},options.speed);}).removeClass("hide");});$(document).keydown(function(e){switch(e.which){case 27:close();break;case 37: prev();break;case 39:next();break;default:return;}e.preventDefault();});}function option(key,val){if(val){options[key]=val;}else{return options[key];}}function select(val){$(".pw-slide:eq("+val.toString()+")").click();}function selectById(id){$(".pw-slide#"+id.toString()).click();}function selectFirst(){$(".pw-slide:first").click();}function selectLast(){$(".pw-slide: last").click();}function close(){hook('beforeClose');$pwCurrentSlide=0;$pwCurrentPreviewer.empty();$pwCurrentPreviewer=0;$(".pw-previewer").addClass("hide").stop().slideUp(options.speed);hook('afterClose');}function next(){hook('beforeNext');hook('beforeNextPrev');if($pwCurrentSlide.next().hasClass("pw-previewer")){if($pwCurrentSlide.nextAll(".pw-slide:first").length==0)$(".pw-slide:first").click();else
$pwCurrentSlide.nextAll(".pw-slide-group-first:first").click();}else
{$newContent=$pwCurrentSlide.nextAll(".pw-slide:first");$pwCurrentSlide=$newContent;$pwCurrentPreviewer.empty();$pwCurrentPreviewer.append("<span class='pw-previewer-close'>x</span>");$(".pw-previewer-close").click(function(){$pwCurrentSlide=0;$pwCurrentPreviewer.empty();$pwCurrentPreviewer=0;$(".pw-previewer").addClass("hide").stop().slideUp(options.speed);});$newContent.children().clone().appendTo($pwCurrentPreviewer);}$('html,body').animate({scrollTop:$pwCurrentPreviewer.children("img").offset().top-100},options.speed);hook('afterNext');hook('afterNextPrev');}function prev(){hook('beforePrev');hook('beforeNextPrev');if($pwCurrentSlide.prev().hasClass("pw-previewer")){$pwCurrentSlide.prevAll(".pw-slide-group-last:first").click();}else
{if($pwCurrentSlide.prevAll(".pw-slide:first").length==0){$(".pw-slide: last").click();$newContent=$(".pw-slide:last");}else
{$newContent=$pwCurrentSlide.prevAll(".pw-slide:first");}$pwCurrentSlide=$newContent;$pwCurrentPreviewer.empty();$pwCurrentPreviewer.append("<span class='pw-previewer-close'>x</span>");$(".pw-previewer-close").click(function(){$pwCurrentSlide=0;$pwCurrentPreviewer.empty();$pwCurrentPreviewer=0;$(".pw-previewer").addClass("hide").stop().slideUp(options.speed);});$newContent.children().clone().appendTo($pwCurrentPreviewer);}$('html,body').animate({scrollTop:$pwCurrentPreviewer.children("img").offset().top-100},options.speed);hook('afterPrev');hook('afterNextPrev');}function destroy(){$el.each(function(){var el=this;var $el=$(this);$(".pw-slide").unbind().attr("class","pw-slide");$(".pw-previewer").remove();hook('onDestroy');$el.removeData('plugin_'+pluginName);});}function hook(hookName){if(options[hookName]!==undefined){options[hookName].call(el);}}init();return{option:option,select:select,selectById:selectById,selectFirst:selectFirst,selectLast:selectLast,close:close,next:next,prev: prev,destroy: destroy};}$.fn[pluginName]=function(options){if(typeof arguments[0]==='string'){var methodName=arguments[0];var args=Array.prototype.slice.call(arguments,1);var returnVal;this.each(function(){if($.data(this,'plugin_'+pluginName)&&typeof $.data(this,'plugin_'+pluginName)[methodName]==='function'){returnVal=$.data(this,'plugin_'+pluginName)[methodName].apply(this,args);}else{throw new Error('Method '+methodName+' does not exist on jQuery.'+pluginName);}});if(returnVal!==undefined){return returnVal;}else{return this;}}else if(typeof options==="object"||!options){return this.each(function(){if(!$.data(this,'plugin_'+pluginName)){$.data(this,'plugin_'+pluginName,new Plugin(this,options));}});}};$.fn[pluginName].defaults={speed:500,beforeInit:function(){},afterInit:function(){},beforeNextPrev:function(){},afterNextPrev:function(){},beforeNext:function(){},afterNext:function(){},beforePrev:function(){},afterPrev:function(){},beforeClose:function(){},afterClose:function(){},onDestroy:function(){}};})(jQuery);

Kemudian cari tag penutup body </body> sisipkan script pemanggil berikut tepat diatasnya<script>
jQuery(document).ready(function(){
jQuery(".photowall").photoWall();
});
</script>SAVE.
Semoga berhasil.
Demo and resource: jeremyjcpaul.com/photo-wall-demo.php - github.com/jeremyjcpaul/photowall
Default Demo on Single Page
Happy jQuery \m/