Yeni tasarımım da content yani içeriğin yer alacağı bölüm genişliği paddingler vs. düşüldüğünde 440px civarında olması gerekiyor. Eski tasarımda ise aşağıdaki resimden de hatırlayacağınız gibi sayfa 100% kullanıldığı için sorun olmuyordu.

Ancak yeni tasarımı bozan bir durum olduğu için jQuery ile şöyle bir şey yapmaya karar verdim.

Sayfada belirlenmiş (440px) değerden geniş olan <img> etiketlerini resize edelim. Bunu yaptım, gayet kolay oldu ancak istendiğinde (tıkladığında) resimin büyük halini de görmek isteyecektir kullanıcı, aksi durumda bazı resimler küçük gösterildiğinde anlamsız şekilde duracaktır sayfada.
Bunun için jQuery ile resize işini yaptıktan sonra çok bilinen ve kullanıclan thickbox isimli jQuery pluginini kullandım.
Ancak thickbox yazısına tıklayınca eriştiğiniz sayfada da göreceğiniz gibi aşağıdaki şekilde bir tanımlama istemektedir.

Benim sitemde ise resim dosyaları etrafında <a> olmayan birer <img> etiketidir. Genelde ekran görüntüsü vermek için eklerim. Yani bu yukarıda ki gereksinime uyan bir yapı zaten yok. Yazıları tek tek düzenlemek olacak iş değil! Onun yerine aşağıdaki jQuery kod ile tüm işlerimi hallettim. Bu yazıda aşağıda ki resim dosyasına tıkladığınızda thickbox ile açılacaktır ancak resmi eklerken thickbox için ekstra bir şey yapmadım. Bu durumun eskiden kalan yazılar için doğru olduğunu yenisi için çok doğru bir tercih olmayacağını belirtmek isterim zira büyük boyutlu resim dosyası görüntülenmek istenmeden önce yüklenmiş oluyor.

var maxContentPictureWidth = 440;
$.fn.zoomIn = function() {
    var orgWidth = $(this).width();
    if (orgWidth <= maxContentPictureWidth) { return; }
    var orgHeight = $(this).height();
    var times = maxContentPictureWidth / orgWidth;
    $(this).width(orgWidth * times);
    $(this).height(orgHeight * times);
    $(this).css("cursor", "pointer").css("cursor", "hand"); //browsers!!
    var wrapperAnchor = document.createElement("a");
    $(wrapperAnchor).attr("href", $(this).attr("src"))
           .attr("title", "preview")
    .addClass("thickbox")
    .attr("id", "created" + Math.floor((Math.random()*100)).toString() );   //flagged as created at runtime!!
    $(this).wrap(wrapperAnchor);
}
$(function() {
    $("#content img").each(function() {
        $(this).zoomIn();
    });
    tb_init("a.thickbox[id^='created']");    

});

Tabiki bu kodların çalışabilmesi için jQuery ve thickbox javascript dosyalarını sayfanıza dahil etmeniz gerekmektedir.

---