Ho implementato una soluzione di didascalia per shadowbox che utilizza il tag inline 'rev'.Come personalizzare il sottotitolo shadowbox.js?
In shadowbox.js Aggiungi ...
...get("sb-caption").innerHTML=obj.link.rev||"";...
...<div id="sb-caption"></div>...
Nel shadowbox.css aggiungere quanto segue alla fine del file ...
#sb-info,#sb-info-inner{height:56px;line-height:20px;}
#sb-caption {clear:both;font-size:90%;height:auto;line-height:12px;color:#fff;}
Nella pagina markup aggiungere l'attributo rev (sì, è un attributo valido come rel!) al link ... il testo della didascalia va in l'attributo rev ...
<a href="myimage.jpg" rel="shadowbox" title="My Image" rev="Your caption goes here...">My Image</a>
Ecco i t ... buon divertimento!
Explained di più qui: http://shadowbox.1309102.n2.nabble.com/Captions-td2643307.html
Questa è stata una cosa molto facile da implementare.
Tuttavia, ho creato il mio 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;}
Questo tutto ha funzionato meravigliosamente così, però, ho notato un problema.
Quando un'immagine non ha un giro, il div # sb-didascalia appare in ogni caso, come un blocco bianco semi-trasparente, 20x70 pixel in termini di dimensioni (lo stesso che l'imbottitura) ho capito che il mio set-padding su è la causa del problema.
Mi chiedo se qualcuno può aiutarmi con un work-around. Qualcosa che dice a shadowbox di NON DISPLAY # sb-caption, se il rev = "" NON è SPECIFICATO.
Qualcuno può venire con una soluzione per questo.
Qualcosa lungo queste linee forse ??
<script type="text/javascript">
Shadowbox.init({
});
var Shadowbox = window.parent.Shadowbox;
if (getElementById('sb-caption').innerHTML == '')
getElementById('sb-caption').style.display = 'none';
</script>
... Ma questo non funziona.