PDA

Orijinalini görmek için tıklayınız : Focus Eklentisi Arıyorum



psyhcosis
21-03-2012, 19:54
Merhaba

sitesindeki (http://www.elegantthemes.com/demo/?theme=MyResume) portfoliodaki gibi eklenti arıyorum, bildiğiniz, kullandığınız, önerebileceğiniz eklenti varmı?

Akar
21-03-2012, 20:53
Birçok resim galerisi uygulamasında bu özellik mevcut. Siz nasıl bir alanda kullanacaksınız bunu; mesela istediğiniz herhangi bir içerikteki resimlerden dilediğiniz kadarında mı kullanmak istiyorsunuz yoksa sadece belirli bir alanda yayınlayacağınız resimlerde mi? Bir de tam olarak istediğiniz özellik nedir? Mesela üzerinde gelinen resmin büyğünün açılmasını mevcut yazım düzenleyiciniz ya da jce yazım düzenleyiciyi kullanarak yapabilirsiniz.

Şems
21-03-2012, 21:26
Tema stil dosyasına yapılmış bir ekleme kullanılarak halletmiş tema yapımcısı. (css dosyası) Daha sonra da eklerken <a class"cssdeki kısım" /> ile de ekleme yapmış. Kaynak görünteleyip faydalanabilirsiniz.

css'e eklediği kısım şu



.gallery-item
{
width: 75px; height: 75px; position: relative; float: left; margin: 0px 13px 17px 0px; display: block;
}
.gallery-item img
{
position: absolute; top: 0; left: 0; padding: 8px; background-color: #f6f6f6; border: 1px dashed #b2b2b2; -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2); -webkit-border-radius: 10px; -moz-border-radius: 10px;
}
.gallery-item:hover img { -webkit-box-shadow: none; -moz-box-shadow: none; }
.features-hover { display: none; position: absolute; padding: 8px; background: #fff; -webkit-border-radius: 8px; -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.25); -moz-border-radius: 8px; -moz-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.25); z-index: 5; }
.clear {clear: both;}


Daha sonra da konuyu açarken html editöre geçip class eklemiş.


<a class="gallery-item" href="resimlinki.com-600x500.jpg" rel="resimlinki.com-388x222.jpg"><img src="resimlinki.com-59x59.jpg" alt="" /></a>

3 ayrı boyut vermiş resime tıklandığında genişlesin falan diye.

Kolay gelsin.

psyhcosis
22-03-2012, 09:59
Akar hocam ben bunun aynısını referanslar için kullanılmak üzere yapmak istiyorum. Jce joomla için değilmiydi ? Wordpress için de mi var?
Şems hocam kodlar çalışıyor bi eksikle üzerine gelince büyük resim açılmıyor. Ek olarak kaynağı görüntüle dediğimde css kısmını göremedim. Siz nasıl buldunuz?

Cevaplarınız için teşekkür ederim.

Şems
23-03-2012, 17:19
Ctrl + u kombinasyonuyla görebilirsiniz. Yahut o kısımı imleçle seçip sağ tıkla ögeyi denetle yada seçim kodunu gör tarzı bir menü var onu seçerseniz görebilirsiniz. Wordpress'in özelliği olarak var bu joomla'ya dair bir fikrim yok (:

Çağrı
23-03-2012, 21:27
sadece css değil jquery de gerekli bunun için.. :)

Tema yapınızı bilmediğim için kesin birşey söyleyemiceğim ama temanıza bunu entegre edebilirsiniz. Orta seviye kod bilginiz varsa eğer.. Bİr örnek : JQuery Zoom Hover (http://demo.superdit.com/jquery/zoom_hover/)

Kaynak Kodu : Hover Image Zoom With JQuery (http://superdit.com/2011/06/11/hover-image-zoom-with-jquery/)

#container id'li div altındaki img class'ı ile div arasında resimlere bu efekti verir.. Jquery kodları ile oynayarak kendi temanıza entegre edebilirsiniz. Ha birde <img> taglarını <div class="img"> arasına almanız gerek... Yani çıktısı şu şekilde olmalı.



<div id="container">
<div class="img"> <a href="#"><img src="img/1.jpg"/></div>
<div class="img"> <a href="#"><img src="img/2.jpg"/> </div>
<div class="img"> <a href="#"><img src="img/3.jpg"/> </div>
<div class="img"> <a href="#"><img src="img/4.jpg"/> </div>
</div>


resim adreslerini zaten wp'nin hali hazırdaki tema fonksiyonları (http://codex.wordpress.org/Template_Tags)nı kullanarak çağırabilirsiniz.

Şems
23-03-2012, 21:31
Dalgınlık :| jQuery'i dahil etmemişim. Çağrı hocam gayet net açıklamış, teşekkürler..