Nextgen Galeriye Klavye Kontrolü Eklemek

WordPress’in hali hazırda bir galeri sistemi var. Ancak çoğu zaman aklımdakileri yapmak için tatmin edici olmuyor ve imdadıma nextgen gallery yetişiyor. Özelliklerini bu yazıda sayıpta boşuna yazıyı uzatmak gibi bir niyetim yok. Dileyenler buradan bakabilirler.

Bizim yapmak istediğimiz şey ise; Facebook benzeri klavye yön tuşları ile resimler arasında gezinti yapabilmek. Bunu için de LancelHoff isimli arkadaşımız güzel bir çalışma yapmış. Türkçe’ye çevirip yayınlamak istedim icon smile Nextgen Galeriye Klavye Kontrolü Eklemek Facebook’un popüler olduğu şu günlerde sanırım kimse böyle bir galeri sistemi yapmayı düşünmemiş icon smile Nextgen Galeriye Klavye Kontrolü Eklemek

Başlangıç olarak HighSlide dosyamızı indiriyoruz. İkinci adım olarak /wp-content/plugins/ klasörü içine HighSlide dosyasını atıyoruz.

Aşağıdaki CSS kodunu highslide.css olarak kayıt edip, az önce yüklediğimiz dosyanın içine atıyoruz.

.highslide{
cursor:url(http://siteniz.com/wp-content/plugins/highslide/graphics/zoomin.cur), pointer;
outline:none;
}
.highslide-caption{
display:none;
border:2px solid white;
border-top:none;
font-size:10pt;
padding:5px;
background-color:white;
}
.highslide-loading{
display:block;
padding:2px;
border:#000;
background-color:#fff;
/*bu alanda yükleniyor resminin yüksekliğini ve genişliğini ayarlayabilirsiniz. Yazı yazmasını isterseniz highslide.js dosyasından düzenleme yapınız.*/
width:16px;
height:16px;
background-image: url(http://siteniz.com/wp-content/plugins/highslide/graphics/loader.gif);
background-repeat:no-repeat;
background-position:2px 2px;
}
.highslide-move{
cursor:move;
}
.highslide-overlay{
display:none;
}
.controlbar{background:url(http://siteniz.com/wp-content/plugins/highslide/graphics/controlbar4.gif);
width:167px;
height:34px;
}
.controlbar a{
display:block;
float:left;
height:27px;
}
.controlbar a:hover{
background-image:url(http://siteniz.com/wp-content/plugins/highslide/graphics/controlbar4-hover.gif);
}
.controlbar .previoushs{
width:50px;
}
.controlbar .nexths{
width:40px;
background-position:-50px 0;
}
.controlbar .highslide-move{
width:40px;
background-position:-90px 0;
}
.controlbar .closehs{
width:36px;
background-position:-130px 0;
}
/*BU SATIRLARDA DEĞİŞİKLİK YAPMAYINIZ*/
.highslide-display-block{
display:block;
}
.highslide-display-none{
display:none;
}

* siteniz.com yazan yerleri kendi site adresiniz ile değiştirmeyi unutmayınız !

CSS dosyamız ile işimiz bittiyse hemen temamızın footer.php dosyasına geçiyoruz. etiketinden hemen önce alttaki kodu ekliyoruz.

    <!– Start Highslide Mod –>
    <script type="text/javascript" src="http://siteniz.com/wp-content/plugins/highslide/highslide.js"></script>
    <script type="text/javascript">
    hs.registerOverlay(
    {
    thumbnailId: null,
    overlayId: 'controlbar',
    position: 'top right',
    hideOnMouseOut: true
    }
    );
    hs.graphicsDir = 'http://siteniz.com/wp-content/plugins/highslide/graphics/';
    hs.outlineType = 'rounded-white';
    hs.captionEval = 'this.thumb.title';
    hs.showCredits = false;
    </script>

    <div id="controlbar" class="highslide-overlay controlbar">
    <a href="#" class="previoushs" onclick="return hs.previous(this)" title="<?php _e('Previous (left arrow key)'); ?>"></a>
    <a href="#" class="nexths" onclick="return hs.next(this)" title="<?php _e('Next (right arrow key)'); ?>"></a>
    <a href="#" class="highslide-move" onclick="return false" title="<?php _e('Click and drag to move'); ?>"></a>
    <a href="#" class="closehs" onclick="return hs.close(this)" title="<?php _e('Close'); ?>"></a>
    </div>
    <!– End Highslide Mod –>

* siteniz.com yazan yerleri kendi site adresiniz ile değiştirmeyi unutmayınız !

İşlem büyük ölçüde tamamlandı. Son bir adım olarak yönetim panelinize girip (/wp-admin/) > Galeri > Ayarlar (Options) > Efektler (Effects) altından HighSlide efektini seçip Update (Güncelle) diyordunuz. Hepsi bu kadar icon smile Nextgen Galeriye Klavye Kontrolü Eklemek

Demo için ise http://www.alperyasinaltinel.com/galeri/fotograf adresini ziyaret edebilirsiniz.