ColorBoard-Titeltext auf Hover ausblenden, als Bildtitel mit voller Größe anzeigen

Question

Ich verwende colorbox auf einer Site, konnte aber nicht feststellen, wie der Titeltext beim Überfahren einer Miniatur deaktiviert wird. Ich möchte den Text behalten, der als Bildunterschrift verwendet werden soll, wenn Sie das Bild in voller Größe sehen. Verstecken Sie es einfach im Miniaturbild-Status.

Ich habe einige js Lösungen gesehen, um sie komplett abzuschalten, was ich nicht will. Ich vermasselte auch mit der Colorbox js selbst und war in der Lage, den Text für das Bild in voller Größe zu deaktivieren, aber das ist das Gegenteil von dem, was ich will. Meine Fähigkeiten sind HTML und CSS ... Ich habe mit qtip experimentiert, aber das ist ein wenig über mir jetzt.

Mein HTML ist im Grunde diese:

<li class="imgTitle"><a class="group1" href="images/bigPhoto.png" title="This tooltip is showing all the formatting tags like <br /> that I need to style my big photo caption <br />No one wants to see this HTML code while hovering over a thumbnail<br />Can I turn it off until you actually click the image<img src="images/thumbnailPhoto.png" /></a> </li> 

Jede mögliche Hilfe würde geschätzt - danke!

Answer 1

Versuchen Sie es mit etwas (versteckt) anderes Element als das title Attribut, dann als eine entsprechende Einstellung Ihrer colorbox, stellen Sie die title Option auf eine angezeigte Kopie dieses Elements, zum Beispiel:

HTML:

<li class="imgTitle"> 
    <a class="group1" href="images/bigPhoto.png"> 
    <span class="caption" style="display: none;"> 
     I'm a caption that's not in a title attribute anymore 
    </span> 
    <img src="images/thumbnailPhoto.png" /> 
    </a> 
</li> 

JS könnte so etwas wie dieses:

$(".group1").colorbox({ 
    title: function() { 
    return $(this).find("span.caption").clone().show(); 
    }, 
    // other settings/options here 
}); 

Hier ist a fiddle ähnlich wie oben. Ich fügte den .clone() Teil hinzu, weil, als ich etwas Ähnliches in einer Galerie implementierte, verschwanden sie, nachdem ich einmal durch alle Bilder geklickt hatte.