2012-10-15 13 views
5

Mam zaimplementowane rozwiązanie podpisów dla shadowbox, które używa wbudowanego znacznika "rev".Jak dostosować podpis dotyczący shadowbox.js?

W shadowbox.js dodać ...

...get("sb-caption").innerHTML=obj.link.rev||"";... 
...<div id="sb-caption"></div>... 

W shadowbox.css dodać następujące dole pliku ...

#sb-info,#sb-info-inner{height:56px;line-height:20px;} 
#sb-caption {clear:both;font-size:90%;height:auto;line-height:12px;color:#fff;} 

na stronie znaczników dodać atrybut rev (tak, jest to ważny atrybut rel jak!) do łącza ... tekst podpis idzie do atrybutu rev ​​...

<a href="myimage.jpg" rel="shadowbox" title="My Image" rev="Your caption goes here...">My Image</a> 

to ja t ... ciesz się!

wyjaśnione tutaj: http://shadowbox.1309102.n2.nabble.com/Captions-td2643307.html

To była bardzo łatwa rzecz do wykonania.

jednak tworzę własne CSS ...

#sb-caption{text-align:right;line-height:22px;color:#333;position:absolute;bottom:35px;right:35px;background:rgba(255,255,255,0.3);text-shadow: 1px 1px 1px #fff;display:block; padding:10px 20px 10px 50px;z-index:10;} 

To wszystko działa wspaniale jako dobrze, jednak mam zauważony problem.

Gdy obraz nie ma rev, div # sb-podpis pojawi się tak, jak półprzezroczystym białym bloku, 20x70 pikseli na rozmiar (tak samo jak padding) Rozumiem, że moja wyściółka SEt- jest przyczyną problemu.

Zastanawiam się, czy ktoś może mi pomóc w obejściu. Coś, co mówi shadowbox, aby NIE WYŚWIETLA # sb-caption, jeśli rev = "" NIE JEST OKREŚLONE.

Czy ktoś może wymyślić coś takiego.

Coś wzdłuż tych linii może?

<script type="text/javascript"> 
    Shadowbox.init({ 
    }); 
    var Shadowbox = window.parent.Shadowbox; 
    if (getElementById('sb-caption').innerHTML == '') 
    getElementById('sb-caption').style.display = 'none'; 
</script> 

... Ale to nie działa.

Odpowiedz

1

byłeś blisko, ale możesz obsłużyć to bezpośrednio w pliku shadowbox.js (jeśli mimo wszystko to zmieniasz). Włóż ten

ad("sb-caption").style.display = (ad("sb-caption").innerHTML == "") ? 'none' : 'block' ; 

zaraz po

ad("sb-caption").innerHTML=aJ.link.rev||""; 

i gotowe. Myślę, że to oczywiste, co robi: Za każdym razem, gdy otwierasz Shadowbox, sprawdzasz zawartość w elemencie id = "sb-caption". Jeśli nie ma zawartości, ustaw jej wyświetlanie na none, w przeciwnym razie zablokuj.