|
| Clematis |
target="_blank" (unten grün markiert zu sehen).
Man kann den Effekt selbstverständlich auch unter den anderen Vorlagen nutzen. Hier ist es zwar nicht so nötig, kann aber dennoch hilfreich sein, um Bilder, die im Original nicht groß sind, etwas größer anzuzeigen. Das Target-Blank-Kommando braucht man bei den normalen Vorlagen nicht. Es schadet aber auch nicht, weil es da gar nicht beachtet wird.
Container-ID
Damit die Kommandos auf die gewünschten Bilder angewendet werden können, muss man die Container in denen sie stehen, eindeutig benennen, damit man speziell dafür Kommandos schreiben kann und sie nur für Bilder innerhalb so benannter Bereiche gelten. Richtet man in verschiedenen Posts unterschiedliche Ausgangsgrößen und Scaliergrößen ein, dann muss man die Container unbedingt unterschiedlich benennen; denn auf der Startseite oder einer Labelansicht käme sonst die Anzeige durcheinander, wenn dort diese unterschiedlichen Posts angezeigt werden und verschiedene Kommandos für gleiche Bereiche in ihnen per Style kommandiert sind.
Bei Bildern ohne Bildunterschrift schreibt man den Namen in den vorhandenen Div-Container. Das
class="separator", das dort üblicherweise eingetragen ist, kann man löschen.
<div id="galerie" style="clear: both; text-align: center;"><a href="BILDADRESSE" target="_blank" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="BILDADRESSE" /></a></div>
Bei Bildern mit Bildunterschrift, stellt man einen Div-Container, der da sonst nicht stehen würde, extra um die Bildtabelle.
<div id="galerie2" style="align: center; clear: both;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiaKOqlOloeiz0_rhemN28awWhN3EfW_9kauL3ta64X13KHqWtYxhIistbqDuSFjhzdHvlemu0AiWb71N_1eUwSq-FxB2sw8jKPYL5Yp_ty005A825Ll9TwgYylOD9BRsJ9mK-HsqH1HUp/s1600/ich_32-003.jpg" target="_blank" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiaKOqlOloeiz0_rhemN28awWhN3EfW_9kauL3ta64X13KHqWtYxhIistbqDuSFjhzdHvlemu0AiWb71N_1eUwSq-FxB2sw8jKPYL5Yp_ty005A825Ll9TwgYylOD9BRsJ9mK-HsqH1HUp/s1600/ich_32-003.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Bildunterschrift</td></tr>
</tbody></table>
</div>
Stehen mehrere Bilder nebeneinander, braucht es nur einen Container, der um die Gruppe gestellt wurde.
Größen einstellen
Notiert habe ich folgend Style-Codes, die ich in den Dynamischen Ansichten benutzt habe, siehe: http://media.utez.de/2013/10/bildergalerie.html
Dort musste ich in Verbindung mit dem Style, den ich für die Bild-Tabellen eingestellt habe, bei den Bildern mit Bildunterschrift die Werte für Ausgangsgröße kleiner und für Skalierung größer einstellen, als bei den Bildern ohne Bildunterschrift. Die Beispielbilder im hiesigen Post sind hingegen anders gestylt und ich konnte für beide Bildarten die gleichen Werte einstellen. Hier im Post habe ich für die Beispielbilder zudem eine deutlich höhere Ausgangsgröße genutzt, weil sie als Einzelbilder größer sein sollten, als innerhalb einer Galerie.
Ausgangsgröße einstellen
Um Bilder kontrolliert größer skalieren zu können, müssen sie zuvor auf eine eindeutige Größe eingestellt sein. Dazu kann man den Bildmenübalken nutzen und da die gewünschte Ausgangsgröße einstellen. Das Hochskalieren von der Größe "Klein" ausgehend führt jedoch zu einer schlechten Bildqualität. Die besten Ergebnisse erzielt man, wenn man auf "Originalgröße" stellt und per CSS die Anzeigegröße beschränkt. Beim Hochskalieren gibt es dann keine Qualitätsverluste. Sind Bilder im Original kleiner als in der hochskalierten Version, dann lässt die Qualität natürlich auch dann zu wünschen übrig, ist aber immer noch besser, als wenn man nicht "Originalgröße" eingestellt hätte.
<style>
/* Ausgangsgröße und Style der Bilder von galerie und galerie2 eingestellt */
#galerie img {
width: 70px;
height: auto;
padding: 10px;
border: 1px solid #2B256F;
border-radius: 5px;
background: white;
}
#galerie2 img {
width: 50px;
height: auto;
}
#galerie2 table {
padding: 5px;
border: 1px solid #2B256F;
border-radius: 5px;
}
</style>
Skaliergröße einstellen
<style>
/* Skaliergröße und Style der Bilder von galerie und galerie2 eingestellt *
#galerie img:hover {
padding: 5px;
border: 1px solid #2B256F;
border-radius: 5px;
background: white;
z-index: 9999;
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
transform: scale(2.5);
}
#galerie2 table:hover {
padding: 5px;
border: 1px solid #2B256F;
border-radius: 5px;
background: white;
z-index: 9999;
-webkit-transform: scale(3.0);
-moz-transform: scale(3.0);
-ms-transform: scale(3.0);
-o-transform: scale(3.0);
transform: scale(3.0);
}
</style>
Gleiche ID nur bei gleichem Style/CSS
Nutzt man innerhalb eines Blogs in verschiedenen Posts unterschiedliche Größen und Styles für Bilder, dann darf man den Bereichen auf keinen Fall den immer gleichen ID-Namen geben, auch nicht, wenn man für den Bereich nicht per "CSS hinzufügen" kommandiert hat, sondern per Style im Post selbst. Denn die Kommandos wirken nicht nur im einzeln geöffneten Post, sondern auch in Ansichten mit mehreren Posts, wie der Startseite oder Labelansichten. Es könnten deshalb für einen ID-Namen gleichzeitig unterschiedliche Kommandos wirken.
Ute Ziemes, sg.utez.de, 10.10.2013
0 Kommentare:
Kommentar veröffentlichen