YOOeffects Joomla! eklentisi, herhangi bir şablon içerisine lightbox, yansıma ve spot efektleri vererek görünümü zenginleştirir. Lightbox özelliğiyle Quicktime, Windows Media Player, Flash, Flash video ve dış bağlantı olmak üzere birçok web ve medya formatlarını destekleyerek sitenize profesyonel bir özellik kazandırabilirsiniz.
Eklentiyi şuradan indirdikten sonra site yönetim panelinizden sırasıyla Eklentiler > Kur / Kaldır adımlarını takip ederek, indirmiş olduğunuz uygulama ekini kurun. Ardından tekrar Eklentiler > Uygulama Eki Yöneticisi > YOOeffects satırınında bulunan 
ikonuna tıklayarak 
konumuna gelmesini sağlayın.
Kurulum bitti. Şimdi bu uygulama ekiyle neler yapabileceğimize bir bakalım:
Spotlight özelliği nedir, nasıl kullanılır?
Spotlight, iki resim arasındaki keskin geçişi yumuşatır ve bir sönümleme etkisi yaratır. Böylece mouseover diye adlandırdığımız, fare ile resmin üzerine geldiğimizde renk, şekil, hareket değiştiren flash ya da css uygulamasını spotlight efekti ile kolay yoldan halledebiliyoruz.
Önemli: iki resim arasındaki geçişin sağlanabilmesi için her iki resim de aynı klasörde olmalı ve geçiş resminin sonunda _spotlight son eki eklenmelidir.
Bunun dışında yapmanız gereken sadece div veya span tagına spotlight sınıfı eklemek. Şöyle ki;
Örnek div:
<div class="spotlight" style="background: url('/../images/logo.png');" width="240" height="180"></div>
Örnek span:
<span class="spotlight" style="background: url('/../images/logo.png'); display: block;" width="240" height="180"></span>
YOOspotlight efektinin nasıl uygulandığına ilişkin video, konunun sonunda mevcut. İzleyebilirsiniz.
Lightbox özelliği nedir, nasıl kullanılır?
YOOlightbox, resim, video ve dış bağlantıları sayfadan kopmadan, açılan ögenin boyutlarına göre efektle genişleyen, kalan alanları karartarak sadece açılan görüntüye odaklanmanızı sağlayan işlevsel bir javascript uygulamasıdır. İşte görsel bir durumu yazıya dökmeye çalışırsak böyle anlaşılmaz bir hâl alır.
Lightbox efektini kullanabilmeniz için bağlantıya "shadowbox" özniteliği eklemeniz yeterli. Şöyle ki;
<a href="/image.jpg" rel="shadowbox" title="my caption">image #1</a>
Eğer bu niteliği boyutlandırmak istiyorsanız, yukarıdaki kodu şu şekilde geliştirin:
<a href="/image.jpg" rel="shadowbox;width=300;height=200" title="my caption">image #1</a>
Ola ki birden fazla görüntüyü tek lightbox gösteri alanında sergilemek istiyorsanız, kodu şu şekilde değiştiriyoruz:
<a href="/image-1.jpg" rel="shadowbox[a]">image #1</a> <a href="/image-2.jpg" rel="shadowbox[a]">image #2</a>
Unutmayın, shadowbox özniteliğine bir grup adı vermelisiniz. Yukarıda [a] iken siz bunu [b] yapabiliyorsunuz. Dikkat edilmesi gereken yer, atadığınız gruba mensup görüntülerin hangisi olduğunu belirtme zorunluluğunuzdur...
Reflection özelliği nedir, nasıl kullanılır?
YOOreflection, modern tarayıcılarda (bu asla ie6 değil) görüntülere yansıma efekti eklemenizi sağlar. Böylece görüntülere yansıma efekti vermeniz için zaman harcamanıza gerek kalmaz. Mootols kütüphanesinin içerdiği reflection.js, yansımaları sizin yerinize oluşturur.
Reflection efektini kullanabilmeniz için bağlantıya "reflect" özniteliği eklemeniz yeterli. Şöyle ki;
<img class="reflection" title="my caption" src="/image.jpg" width="240" height="180" />
Pekiiii lightbox efektiyle Flash Video'ları (.flv) nasıl çağırırım?
YOOeffects, aynı zamanda flash videoları da destekler. Bunun için aşağıdaki adımları uygulayın:
- Şuraya tıklayarak JW Flv player'ı indirin.
- .zip klasöründen dosyaları çıkarın.
- player.swf dosyasını plugins/system/yoo_effects/lightbox klasörüne kopyalayın.
- adını flvplayer.swf olarak değiştirin.
İşlem tamam. Bir flash video eklemek için yukarıda anlattığım lightbox görüntüleyici kodlarıyla aynı zamanda flv video da yayınlayabileceksiniz.
Görüntülü anlatımlar:
Video: Spotlight efekti kurulum ve kullanım dersi
Video: Lightbox efekti kurulum ve kullanım dersi
Video: Reflection efekti kurulum ve kullanım dersi
Yorumlar
Yusuf 06-11-2009 16:22 #1
Takıldığınız noktalarda da sormaktan çekinmeyin. Mümkün olduğu kadar hızlı yardımcı olmaya gayret gösteririm.
Selamlar.
kaan:ozer 06-11-2009 17:00 #2
plugins/system/yoo_effects.php dosyasının 13. satırında bulunan şu satırı bulun:
Kod:
$mainframe->registerEvent( 'onAfterDispatch', 'plgSystemYOOeffects' );şununla değiştirin:
Kod:
if(isset($_GET['no_html']) && $_GET['no_html'] == 1) { // Don't run plugin. Added for jReviews compatibility } else { $mainframe->registerEvent( 'onAfterDispatch', 'plgSystemYOOeffects' ); }yine 54. satırda bulunan şu kodu bulun:
Kod:
// add javascript and css $document =& JFactory::getDocument(); if ($javascript) $document->addCustomTag($javascript); if ($lightbox) $document->addStyleSheet($plugin_base . 'lightbox/shadowbox.css'); }şununla değiştirin
Kod:
// add javascript and css $format = $_GET['format']; if ( !$format=='feed' ) { $document =& JFactory::getDocument(); if ($javascript) $document->addCustomTag($javascript); if ($lightbox) $document->addStyleSheet($plugin_base . 'lightbox/shadowbox.css'); } }Dosyayı kaydedin ve yükleyin.
Artık yoo_effects uygulama ekini kullanırken bu hata ile karşılaşmayacaksınız.
kaan:ozer 30-03-2010 12:18 #3
Hbakl 18-04-2011 12:32 #4
RSS beslemesi, bu iletideki yorumlar için