Daha önce Colorbox, Multibox ve Lightbox uygulamalarını anlatmıştım. Bu üç uygulamanında kendine özel bir resim ve video gösterme yapısı var. Colorbox uygulaması Jquery, Multibox uygulaması Mootols, Lightbox uygulaması ise Prototype ile çalışıyor. İçlerinde en verimli çalışanı şuan için Colorbox diyebilirim.
Enes İlhan benden yine bu uygulamalara benzer Fullsize resim gösterme uygulamasının blogger alt yapısında nasıl çalıştığının anlatımını yapmamı istedi. Bir süredir elimin altında bulunan çalışmaların bitmesini beklemek zorunda kaldım. Nihayet fırsat buldum ve Fullsize uygulamasını Blogger için test ettim ve sizler için anlatımını aşağıda yaptım.
Fullsize uygulama ile resimlerinizi hoş bir efekt ile açılır pencerede görüntüleyebilirsiniz. Demo sayfasının en altında bulunan resimlerin üzerine geldiğinizde beliren kutuya tıkladığınızda ne demek istediğimi anlayacaksınız.
1. Yerleşim - Html Düzenle bölümünden Widgetları Şablonlarını Genişlet diyoruz.
2. Html şablonunda
]]></b:skin> kodunu aratıyoruz ve hemen üstüne aşağıdaki css kodunu ekliyoruz..fullsize-icon {
position: absolute;
margin: 0;
padding: 0;
width: 30px;
height: 30px;
background: transparent url(http://i36.tinypic.com/2s17rmh.png) no-repeat left top;
z-index: 950;
cursor: url(http://sites.google.com/site/teknomobi/Home/fullsize.cur), auto;
}
.fullsize-loading, .fullsize-wrapper {
position: absolute;
margin: 0;
padding: 0;
z-index: 999;
}
.fullsize-loading {
height: 51px;
width: 51px;
background: transparent url(http://i37.tinypic.com/30cpu6v.png) no-repeat left top;
}
.fullsize-loading-inner {
height: 100%;
width: 100%;
background: transparent url(http://i34.tinypic.com/2poazx3.gif) no-repeat center center;
}
.fullsize-image {
display: block;
}
.fullsize-title {
position: relative;
width: 100%;
margin: 0;
padding: 5px 0;
min-height: 14px;
color: #fff;
font-weight: bold;
font-size: 11px;
font-family: "Lucida Grande", sans-serif;
text-shadow: 0 0 1px #000;
background: transparent url(http://i36.tinypic.com/23uopqr.png) repeat-x left top;
}
.fullsize-title-text {
text-align: center;
margin: 0 auto;
width: 100%;
}
a.fullsize-close {
position: absolute;
display: block;
margin: -15px 0 0 6px;
width: 16px;
height: 16px;
text-decoration: none;
z-index: 1000;
background: transparent url(http://i38.tinypic.com/5xo5r9.png) no-repeat left top;
}
/* Safari 3.0 and Chrome rules here */
@media screen and (-webkit-min-device-pixel-ratio:0) {
a.fullsize-close {
margin-top: -14px;
}
}
a.fullsize-close:hover {
background-position: right top;
}
.fullsize-close {
cursor: pointer;
}
/* Shadows */
.fullsize-sh-wrap {
position: absolute;
z-index: 980;
}
.fullsize-sh-top, .fullsize-sh-body, .fullsize-sh-bottom {
width: 100%;
}
.fullsize-sh-top-l, .fullsize-sh-top-m, .fullsize-sh-top-r, .fullsize-sh-bottom-l, .fullsize-sh-bottom-m, .fullsize-sh-bottom-r {
background-position: left top;
background-repeat: none;
background-color: transparent;
height: 20px;
}
.fullsize-sh-top-l {
float: left;
width: 22px;
background-image: url(http://i33.tinypic.com/57jvl.png);
}
.fullsize-sh-top-m {
margin: 0 22px;
background-image: url(http://i35.tinypic.com/del5wm.png);
background-repeat: repeat-x;
}
.fullsize-sh-top-r {
float: right;
width: 22px;
background-image: url(http://i35.tinypic.com/16hqefo.png);
}
.fullsize-sh-bottom-l {
float: left;
width: 22px;
height: 24px;
background-image: url(http://i33.tinypic.com/2qamnx0.png);
}
.fullsize-sh-bottom-m {
margin: 0 22px;
height: 24px;
background-image: url(http://i38.tinypic.com/rbfpxl.png);
background-repeat: repeat-x;
background-position: left bottom;
}
.fullsize-sh-bottom-r {
float: right;
width: 22px;
height: 24px;
background-image: url(http://i37.tinypic.com/24etjmb.png);
}
.fullsize-sh-body {
background-image: url(http://i36.tinypic.com/2yjvbdj.png);
background-repeat: repeat-y;
}
.fullsize-sh-body-r {
float: right;
height: 100%;
width: 11px;
background-image: url(http://i36.tinypic.com/j8ku28.png);
background-repeat: repeat-y;
}3. Yine Html şablonunda
</head> kodunun hemen üstüne aşağıdaki kodları yerleştiriyoruz.<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/teknomobi/Home/jquery.fullsize.minified.txt' type='text/javascript'/>
<script type='text/javascript'>jQuery(document).ready(function(){jQuery("img").fullsize([]);});
</script>Artık şablondaki düzenlemelerimiz tamamlandı. Şablonu kaydediyoruz.
4. Yazılarımıza resim ekleyeceğimizde kullanacağımız kod aşağıdaki gibidir.
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="Resim Linki" longdesc="Resim linki" tooltip="linkalert-tip" width="320" height="240" title='Shakira' />
</div> Burada width değeri resmin küçük halindeki genişliğini, heigth değeri yüksekliğini, center değeri yerleşimini gösteriyor. Bunları kendinize göre değiştirebilirsiniz. Ayrıca resimleri kendi blogunuzda barındırıyorsanız. Normal bir şekilde remi yükleyip oluşan koddan resmin bağlantı adresini alıp o kodları silerek yerine yukarıda verdiğim kod öbeğini kullanabilirsiniz.
Buradan gerekli dosyaları indirerek kendi sites.google hesabınızda barındırabilirsiniz. Css kodlarında bulunan fullsize.cur dosyasını kendi sitesgoogle hesabınıza yükleyip bağlantı linkini değiştirin. Ayrıca jquery.fullsize.minified.txt dosyasını da aynı şekilde sitesgoogle hesabınıza yükleyin ve bağlantı linkini değiştirin. Fullsize uygulamasının kendi jquery uygulamasını host sorunu yaşamamanız için sitesgoogleda barındırabileceğiniz hale getirdim. Normal Jquery uygulamasını ise direk olarak google api üzerinden çektiğinden hız konusunda sorun yaşamazsınız. İleriki zamanlarda sorun yaşamamak için kendi hostunuzda barınmasında yarar var.
