Jelikož současný stav zvětšování fotek v profilech uživatelů a náhledů na Megaupload.cz neodpovídal mým představám, využil jsem toho, že jsem nemocný a mám trochu víc času a nálady. Zároveň jsem se rozhodl podělit o nabyté vědomosti :). Mé řešení samozřejmě počítá s tím, že někteří uživatelé (lehce přes 1 %) mají vypnutý javascript.
Konec okecávání a jdeme na to:
Tak tedy, máme nějaký obrázek, který cheme zvětšovat. Nastavíme mu nějaké id (v mém případě obrazek) a atributu onclick nastavíme funkce, které si ukážeme vzápětí.
<a onclick="ZobrazFotku(event, 'obrazek.jpg');return false" id='obrazek' href='obrazek.jpg'> <img src='/nahled/obrazek.jpg' alt='Náhled obrázku' /> </a>
Dále je třeba vytvořit nějaký skrytý div, který se odkryje až na pokyn javascriptu a ve kterém se zobrazí fotka.
<div id='velky-obrazek'>
<a href='#' onclick="Schovat('velky-obrazek')" title='Zavřít'>Zavřít</a><br /><br />
<img src='' id='velkyobrazek' alt='klikni pro zmenšení fotky' onclick="Schovat('velky-obrazek')" style='cursor: pointer' />
</div>
Skryjeme jej CSS stylem:
#velky-obrazek {
display: none;
border: 1px solid #000000;
background-color: #eeeeee;
padding: 5px;
position: absolute;
text-align: right;
}
A nakonec samotný javascript:
/* tato funkce slouží pro samotné zobrazení fotky */
function ZobrazFotku(ev, adresa)
{
/* nastavíme proměnné */
var fotka=document.getElementById('velky-obrazek');
var fotka1=document.getElementById('velkyobrazek');
/* zjistíme, kde přesně uživatel kliknul na obrázek (chcete-li, aby se velký obrázek zobrazil přes celou stránku, tuto podmínku vynechte) */
if(document.getElementById)
{
if (document.all && !window.opera) {
x = event.clientX + document.body.scrollLeft;
y = event.clientY + document.body.scrollTop + 30;
}
else {
x = ev.pageX;
y = ev.pageY;
}
if (document.all && !window.opera) {
fotka.style.pixelLeft = x;
fotka.style.pixelTop = y;
}
else {
fotka.style.left = x + 'px';
fotka.style.top = y + 'px';
}
}
/* odkryjeme skrytý div a u obrázku nastavíme atributu src adresu obrázku */
fotka.style.display = 'block';
fotka1.src = 'http://nejakaadresa.cz/images/' + adresa;
}
/* a nakonec funkce pro skrytí velkého obrázku */
function Schovat(div){
document.getElementById(div).style.display='none';
}
A jak to bude výsledně vypadat? Omrkněte profily s fotkami na Profil.vsevjednom.cz nebo nahrajte nějaký obrázek na Megaupload.cz. V odkrytém divu lze obrázek nahradit v podstatě čímkoliv:
To je vše. Hodně štěstí ;).