Schatten bei Thumbnails einer Galerie

Oscar · August 2011

Gerne würde ich die Thumbnails-Vorschau der diversen Galerien (spez. FancyBox) von RapidAlbum mit Schatten aufpeppen.

Hab schon dies und das versucht, leider kein Erfolg. Wer weiss mir einen entsprechenden Code? Wird wohl CSS sein, damit man dies gut einbringen kann.
Könnte mir auch vorstellen, dass man das Template selbst entsprechend abändert. Es gibt dort einen Bereich HTML-Thumbnails.

Ränder und Rahmen werden ja oft vom Theme bereitgestellt.

marian · August 2011

on 1314011007:

Ränder und Rahmen werden ja oft vom Theme bereitgestellt.

Kann sein aber du könntest alles "über Bord werfen" wenn du in das benutzerdefinierte CSS Feld etwas schreiben würdest.
Also fangen wir an:
aus deinem Screenshot verstehe ich dass du diesen HTML Code für Thumbnail benutzt (aber auch wenn nicht, verstehst du gleich wie es gemeint ist):

[div class="thumbnail-wrap" style="width:{thumbnailTotalWidth}px; height:{thumbnailTotalHeight}px;"]
    [div class="thumbnail-frame" style="width:{thumbnailTotalWidth}px;"]
        [a  rel="group" class="fancybox" title="{photoCaption}" caption="{photoCaption}{htmlPhotoCaption2}{htmlPhotoCaption3}"]
            [img  alt=""/]
        [/a]
        [p class="thumbnail-caption"]{thumbnailCaption}[/p]
    [/div]
[/div]

In dem oberen Code, "sitzt" das Bild (img etc, etc) in einem Link (a href etc, etc), richtig? Und dieser Link "sitzt" in einem Bereich mit der Klasse thumbnail-frame (div class etc, etc). Richtig?

Dann erstell CSS Code für die Bilder die in dieser Klasse sich befinden:
1. Zuerst die Klasse und dann die Bilder aus dieser Klasse benennen:

.thumbnail-frame img {

}

2. Dann die "box":

.thumbnail-frame img {
    box-shadow: 3px 3px 4px #7e621b;
}

Was die ersten 3px, was die nächsten 3px, was die 4px (die Hex-Farbe weisst du) sind wirst du rausfinden wenn du nach box-shadow und CSS suchst:
http://css-tricks.com/snippets/css/css-box-shadow/
https://developer.mozilla.org/En/CSS/Box-shadow
http://css.flepstudio.org/en/css3/box-shadow.html
http://fredericiana.com/2009/06/12/shadow-boxing-with-moz-box-shadow/
http://www.peterkroener.de/schoenes-neues-css-box-shadow/
etc.
Aber du kannst natürlich auch selber ausprobieren, dann verstehst du schneller

3. Jetzt gehen wir weiter. Was RW und den WebKit gleich "verstanden" hat, heisst es nicht dass andere Browser auch das verstehen, so dass die obere Angabe nochmal (mehrere male) vergeben werden muss:

.thumbnail-frame img {
    /* fuer Firefox ab 3.5 */
    -moz-box-shadow: 3px 3px 4px #7e621b;
    /* fuer Chrome */
    -webkit-box-shadow: 3px 3px 4px #7e621b;
    box-shadow: 3px 3px 4px #7e621b;
    /* fuer IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#7e621b');
    /* fuer IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#7e621b')";
}

Ist das was du haben wolltest?

Edit: "Runde Ecken" in den Bildern könntest du auch erstellen (allerdings für bestimmte Browser doch nicht):

.thumbnail-frame img {
    /* fuer Firefox ab 3.5 */
    -moz-box-shadow: 3px 3px 4px #7e621b;
    /* fuer Chrome */
    -webkit-box-shadow: 3px 3px 4px #7e621b;
    box-shadow: 3px 3px 4px #7e621b;

    border-radius:25px;
    -moz-border-radius:25px;
    -webkit-border-radius:25px;

    /* fuer IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#7e621b');
    /* fuer IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#7e621b')";
}

Oscar · August 2011

Hallo marian

Vielen Dank
Dachte zuerst: Das ist mir viel zu schwierig, bis ich das alles angepasst habe.
Dann habe ich einfach deine Codes eingegeben; und siehe da, alle Thumbnails hatten ihren Schatten. Super!
Jetzt noch die Feinarbeit, und alles ist wie gewünscht.

Vielen Dank!

Anscheinend bist du wieder im Land, der Süden musste dich weggeben ;-)

Vielen Danke und Grüsse

Oscar · August 2011

So gefällts mir

[div class="thumbnail-wrap" style="width:{thumbnailTotalWidth}px; height:{thumbnailTotalHeight}px;"]
    [div class="thumbnail-frame" style="width:{thumbnailTotalWidth}px;"]
        [a  rel="group" class="fancybox" title="{photoCaption}" caption="{photoCaption}{htmlPhotoCaption2}{htmlPhotoCaption3}"]
            [img  alt=""/]
        [/a]
        [p class="thumbnail-caption"]{thumbnailCaption}[/p]
    [/div]
[/div] 
.thumbnail-frame img {

}
.thumbnail-frame img {
    box-shadow: 6px 6px 6px grey;
}

marian · August 2011

on 1314037377:

So gefällts mir

.thumbnail-frame img {

}
.thumbnail-frame img {
    box-shadow: 6px 6px 6px grey;
}

Also ich nehme an dass du den Code in benutzerdefinierten CSS Feld eingegeben hast, ja? Aber das schrieb ich schon:

Kann sein aber du könntest alles

marian · August 2011

on 1314036911:

Anscheinend bist du wieder im Land, der Süden musste dich weggeben

Leider hat man "hier" noch Verpflichtungen

marian · August 2011

on 1314036911:

Dachte zuerst: Das ist mir viel zu schwierig, bis ich das alles angepasst habe.
Dann habe ich einfach deine Codes eingegeben; und siehe da, alle Thumbnails hatten ihren Schatten. Super!

Eigentlich wäre DOCH gut wenn du mal mit meiner Antwort dich ausseinandersetzen würdest weil so würdest du rausfinden was du für andere Templates brauchst.
Also wenn du den HTML-Code der Thumbnails dir anschaust dann findest du bei dem Template Index-Table doch ein anderen Code. Der unterscheidet sich dass der Bereich da die Klasse thumbnail-index-frame hat und nicht thumbnail-frame. Es hiesse dann dass hier deine graue 6px Schatten-Code müsste so sein:

.thumbnail-index-frame img {
    /* fuer Firefox ab 3.5 */
    -moz-box-shadow: 6px 6px 6px grey;
    /* fuer Chrome */
    -webkit-box-shadow: 6px 6px 6px grey;
    box-shadow: 6px 6px 6px grey;
    /* fuer IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='grey');
    /* fuer IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='grey')";
}

ABSCHLIESSEND, um den Code bei ALLEN Templates zu funktionieren, müssen die Bilder aus BEIDEN Bereichklassen angemeldet sein. Dein Code würde DANN so aussehen:

.thumbnail-frame img, .thumbnail-index-frame img {
    /* fuer Firefox ab 3.5 */
    -moz-box-shadow: 6px 6px 6px grey;
    /* fuer Chrome */
    -webkit-box-shadow: 6px 6px 6px grey;
    box-shadow: 6px 6px 6px grey;
    /* fuer IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='grey');
    /* fuer IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='grey')";
}

Willst du auch runde Ecken, dann:

.thumbnail-frame img, .thumbnail-index-frame img {
    /* fuer Firefox ab 3.5 */
    -moz-box-shadow: 6px 6px 6px grey;
    /* fuer Chrome */
    -webkit-box-shadow: 6px 6px 6px grey;
    box-shadow: 6px 6px 6px grey;

    border-radius:25px;
    -moz-border-radius:25px;
    -webkit-border-radius:25px;

    /* fuer IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='grey');
    /* fuer IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='grey')";
}

Oscar · August 2011

Hallo marian

Den leeren Code hatte ich mal weggenommen, gestern, weil ich auch dachte, der könne doch nicht leer sein und trotzdem wichtig. Dann war aber der Schatten auch weg!

Edit:
Hab heute den div-Code weggenommen, da er ja unnötig ist, weil der ja html-Code ist und im Template vorhanden und zurück blieb nur der Code im Bild unten. Jetzt konnte ich den leeren Code ebenfalls wegnehmen und der Schatten blieb.
Bleibt doch recht wenig Code zurück und schon ist der Schatten da.

Dieser Code funktioniert auch in Chrome und in Firefox!

Selbstverständlich setze ich mich mit deinen Antworten auseinander, nur nicht alles aufs mal.
Muss zuerst versuchen, all das zu verstehen. bin schon froh, wenns überhaupt funktioniert!

Oscar · August 2011

Hab mein letztes Posting verändert, weil ich zwischenzeitlich was gemerkt habe ;-)

marian · August 2011

on 1314086291:

Bleibt doch recht wenig Code zurück und schon ist der Schatten da.

Dieser Code funktioniert auch in Chrome und in Firefox!

Schau mal hier wozu die -moz und -webkit Angaben doch zu machen sind:
http://www.css-cafe.de/art_css3_vendor.php
http://www.peterkroener.de/wozu-css-praefixe-wie-moz-und-webkit-da-sind/

Nicht jeder User benutzt die letzte Version eines Browsers benutzt (siehe die immer wider die IE6-Fragen).

Hier http://css3please.com/ eine Seite wo du einige browserspezifische CSS Angaben ausprobieren kannst (Rotation, Spalten, etc ;-)

).

Oscar · August 2011

Hab nun den zusätzlichen Code

.thumbnail-frame img {
    box-shadow: 6px 6px 6px grey;
}

.thumbnail-frame img, .thumbnail-index-frame img {
    /* fuer Firefox ab 3.5 */
    -moz-box-shadow: 6px 6px 6px grey;
    /* fuer Chrome */
    -webkit-box-shadow: 6px 6px 6px grey;
    box-shadow: 6px 6px 6px grey;
    /* fuer IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='grey');
    /* fuer IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='grey')";
}

auf der Seite in CSS eingebracht. Es funktioniert immer noch alles. Super!
Den Effekt kann ich aber nicht nachvollziehen, weil ich es nicht nachvollziehen kann.
Werde es mit den diversen Hilfsprogrammen für alle Browser nachtesten.
Jedenfalls vielen Dank, marian, finds schon gut, dass einige sehen können, dass es Schatten hat.

"urmeli" · August 2011

@marian: Du bist wieder einmal Spitze...

---

@Oscar:

on 1314129697:

Den Effekt kann ich aber nicht nachvollziehen, weil ich es nicht nachvollziehen kann.

Bist du Politiker...? :-)

Oscar · August 2011

Nein, da ist mir aber wirklich etwas Passendes rausgerutscht ;-)

Realmac Software

Schatten bei Thumbnails einer Galerie

Comments

Leave a Comment