Bitte um "Coding-Hilfe" bei Fotogalerie-Einbau

Beitrag von **sidney** » 07.06.2010, 15:08

Hallo liebe Leute,

ich arbeite daran, eine neue Fotogalerie in meine Website zu integrieren.
Klappte bisher alles sehr gut, doch leider bin ich jetzt an einem Punkt angelangt, wo ich ohne HTML-Kenntnisse nicht weiter komme:

Die Bildbeschreibungen erscheinen in gekürzter Form unter den Thumbnails und in voller Länge auf den vergrößerten Bildern. Ich möchte es aber genau umgekehrt haben, daher habe ich den Code wie folgt geändert:

Original:
<a class="vlightbox" href="data/images/tha-phae-gate-01.jpg" title="Eingang zum Tha Phae Gate – hier befinden sich die meisten Angebote für Touristen."><img src="data/thumbnails/tha-phae-gate-01.jpg" alt="Eingang zum Tha Phae Gate – hier befinden sich die meisten Angebote für Touristen."/></a>

Geänderte Fassung:
<a class="vlightbox" href="data/images/tha-phae-gate-01.jpg" title="Eingang zum Tha Phae Gate."><img src="data/thumbnails/tha-phae-gate-01.jpg" alt="Eingang zum Tha Phae Gate – hier befinden sich die meisten Angebote für Touristen."/>Eingang zum Tha Phae Gate – hier befinden sich die meisten Angebote für Touristen.</a>

Das hat prima geklappt, und sieht jetzt genauso aus wie ich es haben will — bis auf ein Problem:
Wenn man nun mit der Maus über das Thumbnail fährt, dann bekommt leider nicht nur das Thumbnail mehr Kontrast (als Hinweis, dass es hier zum vergrößerten Original geht), sondern die Bildbeschreibungen leuchten als Link auf (...was natürlich nicht erwünscht ist).

Kann mir jemand sagen, mit welchem HTML-Befehl/an welcher Stelle ich die Bildunterschrift...
/>Eingang zum Tha Phae Gate – hier befinden sich die meisten Angebote für Touristen.</a>
...von der Verlinkung ausschließen kann.

Danke im voraus für den support.
sidney

von **Anzeige von ABAKUS** »

Hochwertiger Linkaufbau bei ABAKUS:

Google-konformer Linkaufbau
nachhaltiges Ranking
Linkbuilding Angebote zu fairen Preisen
internationale Backlinks

Wir bieten Beratung und Umsetzung.
Jetzt anfragen: 0511 / 300325-0

Beitrag von **nicolas** » 07.06.2010, 15:13

sidney hat geschrieben: Kann mir jemand sagen, mit welchem HTML-Befehl/an welcher Stelle ich die Bildunterschrift...
/>Eingang zum Tha Phae Gate – hier befinden sich die meisten Angebote für Touristen.</a>
...von der Verlinkung ausschließen kann.

/></a> Eingang zum Tha Phae Gate – hier befinden sich die meisten Angebote für Touristen.

Beitrag von **sidney** » 07.06.2010, 15:38

Damit wäre die Bildunterschrift dann gar nicht mehr im Kastenlayout des Thumbnails enthalten, und das möchte ich auch nicht.

Im Klartext:
es soll schon nach wie vor so aussehen:
Bild

allerdings soll nur das Foto und NICHT der Text als Link aufleuchten, wenn ich mit der Maus das Bild berühre.
Bild

Geht das überhaupt, oder ist das gar nicht umsetzbar?

von **Anzeige von ABAKUS** »

Beitrag von **nicolas** » 07.06.2010, 15:50

sidney hat geschrieben: Geht das überhaupt, oder ist das gar nicht umsetzbar?

Es funktioniert, aber es müssen auch noch Sachen im CSS geändert werden, am besten die Seite posten oder zumindest mehr vom Code inklusive CSS.

Beitrag von **sidney** » 07.06.2010, 16:26

Das wird schwierig, da noch nix konkret aufgebaut — geschweige denn gehostet — ist. Es handelt sich ja im Grunde nur um Testschnipsel, die mir helfen sollen herauszufinden, ob es sich bei dem Galerie-System um das handelt, was ich mir vorgestellt habe, oder ob es sich für mich als untauglich erweist.

Ich könnte Dir höchstens hier den Quelltext der GoLive Seite, auf der ich die eingebaute Galerieseite teste, einkopieren.

Wäre das hilfreich?

Beitrag von **nicolas** » 07.06.2010, 16:37

Der Quelltext wäre hilfreich.

Beitrag von **sidney** » 07.06.2010, 16:40

Okay, das wäre dann dieser hier:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1 ... tional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">

<head>
<title>testgalerie</title>
<meta name="keywords" content="Thailand-Galerie, Thailand Galerie, Thailand Photos, Thailand-Fotos, Thailand Fotos, Thailand-Bilder, Thailand Bilder, Nord-Thailand, Nordost-Thailand, Zentralthailand, Ost-Thailand, Süd-Thailand, Tempel und Mönche" />
<meta name="description" content="Die Galerie auf thailandblick.com bietet eine vielfältige Auswahl an Fotos aus allen Regionen Thailands, der Menschen und der thailändischen Kultur." />
<meta name="robots" content="index,follow" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="language" content="de" />
<meta name="author" content="SID & LEK" />
<meta name="copyright" content="www.thailandblick.com" />
<meta name="generator" content="Adobe GoLive" />
<link href="../css/basic.css" rel="stylesheet" type="text/css" media="all" />

<link rel="stylesheet" href="engine/css/vlightbox.css" type="text/css" />
<style type="text/css">#vlightbox a#vlb{display:none}</style>
<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="engine/js/jquery.min.js" type="text/javascript"></script>

</head>

<body>
<div id="container">
<div id="top">
</div>
<div id="navi">
<csobj occur="46" w="880" h="30" t="Component" csref="../../web-data/Komponenten/navi.html">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="thailand-geographie.html">Land</a></li>
<li><a href="thailaender-typisch.html">Menschen</a></li>
<li><a href="kultur-abstammung.html">Kultur</a></li>
<li><a href="tips.html">Tips</a></li>
<li><a href="../galerie-ordner/index.html">Galerie</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="https://thailandblick.blogspot.com/" target="_blank">Blog</a></li>
<li></li>
</ul>
</csobj></div>
<div id="suche_sitemap">
<form action="https://www.google.com/cse" id="cse-search-box" target="_blank">
<div>
<input type="hidden" name="cx" value="partner-pub-4741874156536829:ayxhx0-p69p" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Suche" />

</div>
</form>

<script type="text/javascript" src="https://www.google.com/coop/cse/brand?f ... "></script>
</div>
<div id="content">
<h1>Testgalerie "Chiang Mai":<br />
</h1>

<div id="vlightbox">
<a class="vlightbox" href="data/images/drei-koenige.jpg" title="»Three Kings Monument« in der Altstadt von Chiang Mai."><img src="data/thumbnails/drei-koenige.jpg" alt=""Three Kings Monument" in der Altstadt von Chiang Mai."/>Eingang zum Tha Phae Gate: hier befinden <font color="#f6f7f7">sich die meisten Angebote für Touristen.</font></a>
<a class="vlightbox" href="data/images/tha-phae-gate-01.jpg" title="Eingang zum Tha Phae Gate."><img src="data/thumbnails/tha-phae-gate-01.jpg" alt="Eingang zum Tha Phae Gate – hier befinden sich die meisten Angebote für Touristen."/>Eingang zum Tha Phae Gate – hier befinden sich die meisten Angebote für Touristen.</a>
<a class="vlightbox" href="data/images/tha-phae-gate-02.jpg" title="Innerhalb des Tha Phae Gates: Coffee-shops, Reisebüros, Hotels, Bars, Internet-shops, Restaurants, etc..."><img src="data/thumbnails/tha-phae-gate-02.jpg" alt="Innerhalb des Tha Phae Gates: Coffee-shops, Reisebüros, Hotels, Bars, Internet-shops, Restaurants, etc..."/></a>
<a class="vlightbox" href="data/images/markt-02.jpg" title="Abends am Wochenende in der Nähe des Tha Phae Gates: Marktstände, Garküchen, Straßenhändler, etc..."><img src="data/thumbnails/markt-02.jpg" alt="Abends am Wochenende in der Nähe des Tha Phae Gates: Marktstände, Garküchen, Straßenhändler, etc..."/></a>
<a class="vlightbox" href="data/images/orchideen-02.jpg" title=""Sai Nam Phung Orchid Farm" in der Nähe von Chiang Mai."><img src="data/thumbnails/orchideen-02.jpg" alt=""Sai Nam Phung Orchid Farm" in der Nähe von Chiang Mai."/></a>
<a class="vlightbox" href="data/images/chiang-mai-zoo-01.jpg" title="Chiang Mai Zoo – der größte Zoo Thailands."><img src="data/thumbnails/chiang-mai-zoo-01.jpg" alt="Chiang Mai Zoo – der größte Zoo Thailands."/></a>
<a class="vlightbox" href="data/images/chiang-mai-zoo-03.jpg" title="Brückenkonstruktion über einem Wildtiergehege im Chiang Mai Zoo."><img src="data/thumbnails/chiang-mai-zoo-03.jpg" alt="Brückenkonstruktion über einem Wildtiergehege im Chiang Mai Zoo."/></a>
<a class="vlightbox" href="data/images/bor-sang-03.jpg" title=""Bor Sang" das bekannte Dorf der bunten, handgemalten Papiersonnenschirme und Fächer liegt etwa 9 km östlich von Chiang Mai."><img src="data/thumbnails/bor-sang-03.jpg" alt=""Bor Sang" das bekannte Dorf der bunten, handgemalten Papiersonnenschirme und Fächer liegt etwa 9 km östlich von Chiang Mai."/></a>
<a class="vlightbox" href="data/images/hofbraeuhaus.jpg" title="Kein Scherz, keine Fotomontage – und seit über 20 Jahren im Geschäft!"><img src="data/thumbnails/hofbraeuhaus.jpg" alt="Kein Scherz, keine Fotomontage – und seit über 20 Jahren im Geschäft!"/></a>
<a class="vlightbox" href="data/images/nightmarket-02.jpg" title="Ein Mekka für Shopping-Maniacs: Der Nightmarket in Chiang Mai."><img src="data/thumbnails/nightmarket-02.jpg" alt="Ein Mekka für Shopping-Maniacs: Der Nightmarket in Chiang Mai."/></a>
<a class="vlightbox" href="data/images/wat-phra-thart-doi-suthep-a.jpg" title="Aufstieg zum Wat Phra Thart Doi Suthep, einem der wichtigsten und bekanntesten Tempel Thailands."><img src="data/thumbnails/wat-phra-thart-doi-suthep-a.jpg" alt="Aufstieg zum Wat Phra Thart Doi Suthep, einem der wichtigsten und bekanntesten Tempel Thailands."/></a>
<a class="vlightbox" href="data/images/wat-phra-thart-doi-suthep-b.jpg" title="Im Innenbereich des Wat Phra Thart Doi Suthep."><img src="data/thumbnails/wat-phra-thart-doi-suthep-b.jpg" alt="Im Innenbereich des Wat Phra Thart Doi Suthep."/></a><a id="vlb" href="https://visuallightbox.com">Online Photo Album Software by VisualLightBox.com v3.2m</a><script src="engine/js/visuallightbox.js" type="text/javascript"></script>
</div>

</div>
<div id="bottom">
<csobj occur="90" w="880" h="32" t="Component" csref="../../web-data/Komponenten/footer.html">
<p><a href="sitemap.html"><strong>Sitemap</strong></a> <img src="../Bilder-1/punkt-8x8-transparent.gif" alt="" width="8" height="8" border="0" />|<img src="../Bilder-1/punkt-8x8-transparent.gif" alt="" width="8" height="8" border="0" /> <a href="mailformular.html"><strong>Mailformular</strong></a> <img src="../Bilder-1/punkt-8x8-transparent.gif" alt="" width="8" height="8" border="0" />|<img src="../Bilder-1/punkt-8x8-transparent.gif" alt="" width="8" height="8" border="0" /> <a href="ueber-thailandblick.html"><strong>Über thailandblick.com</strong></a><strong> </strong><img src="../Bilder-1/punkt-8x8-transparent.gif" alt="" width="8" height="8" border="0" />|<img src="../Bilder-1/punkt-8x8-transparent.gif" alt="" width="8" height="8" border="0" /> <a href="impressum.html"><strong>Impressum</strong></a><strong> </strong><img src="../Bilder-1/punkt-12x8-transparent.gif" alt="" width="12" height="8" border="0" />|<img src="../Bilder-1/punkt-12x8-transparent.gif" alt="" width="12" height="8" border="0" /> © www.thailandblick.com</p>
</csobj></div>
</div>
</body>

</html>

Beitrag von **nicolas** » 07.06.2010, 16:46

Jetzt fehlr noch das CSS

Beitrag von **sidney** » 07.06.2010, 16:50

Sorry, hatte ich vergessen...

body { font-family: Verdana, Arial, Helvetica, sans-serif; background-image: url(../Bilder-1/bg-body.jpg); background-repeat: repeat; background-attachment: scroll; background-position: 0 0; margin: 0; }
#navi ul { width: 820px; margin: 0; padding: 0; }
#navi li { color: white; font-size: 12px; font-weight: bold; text-align: center; width: 80px; height: 22px; float: left; margin: 0; padding-top: 8px; border-left: 2px solid white; list-style-type: none; }
#bottom li { margin: 0; padding-right: 20px; padding-left: 20px; display: inline; }
p { }
h1 { color: #6c3; font-size: 20px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; line-height: 150%; text-align: left; margin-top: 18px; margin-bottom: 25px; }
td {}
a:link { color: #313131 }
a:visited { color: #313131 }
a:hover { color: #ff5000 ; text-decoration: underline; }
a:active { color: #ff5000 }
#bottom { color: #666; font-size: 10px; font-weight: bold; background-image: url(../Bilder-1/bg-footer.jpg); text-align: center; width: auto; height: 28px; clear: both; margin-right: 10px; margin-left: 10px; padding-top: 5px; padding-bottom: 15px; }
#bottom_2 { color: #313131; font-size: 10px; font-weight: normal; text-align: center; margin-right: 10px; margin-left: 10px; padding-top: 20px; width: 880px; clear: both; }
#bottom_3 { color: #313131; font-size: 10px; font-weight: normal; text-align: center; margin-right: 25px; margin-bottom: 0; margin-left: 355px; padding-bottom: 15px; width: 300px; clear: both; }
#bottom_werbung { color: #313131; font-size: 10px; font-weight: normal; text-align: center; width: auto; clear: both; margin-right: 10px; margin-left: 10px; padding-top: 25px; padding-bottom: 5px; }
#bottom a:link { color: #313131; font-weight: normal; text-decoration: none; padding: 2px; }
#bottom a:visited { color: #313131; font-weight: normal; text-decoration: none; padding: 2px; }
#bottom a:hover { color: white; font-weight: normal; text-decoration: none; }
#content { color: #313131; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 150%; text-align: left; width: 650px; margin-top: 50px; margin-right: 25px; margin-left: 25px; padding-right: 100px; padding-left: 100px; }
#content_breit { color: #313131; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 150%; text-align: left; margin-top: 65px; margin-right: 25px; margin-left: 25px; padding-right: 100px; padding-left: 100px; width: 620px; }
#content_news { color: #313131; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 150%; text-align: left; margin-top: 50px; margin-right: 25px; margin-left: 25px; padding-right: 100px; padding-left: 100px; width: 620px; }
#content_f { color: #313131; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 150%; text-align: left; width: 470px; float: left; margin-top: 21px; padding-right: 15px; padding-left: 15px; }
#content_f_home { color: #313131; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 150%; text-align: left; margin-top: 30px; width: 470px; float: left; padding-right: 15px; padding-left: 15px; }
#img_row { width: 880px; height: 150px; margin-top: 5px; margin-left: 20px; }
#subnavi { color: #666; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 150%; text-align: left; width: 170px; float: left; margin-top: 44px; margin-left: 10px; padding-left: 20px; border-right: 1px dotted silver; border-bottom: 1px dotted silver; }
#subnavi_ohne_navi { color: #666; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 190%; text-align: left; margin-top: 40px; width: 170px; float: left; margin-left: 10px; padding-left: 20px; border-right: 1px dotted silver; border-bottom: 1px dotted silver; }
#subnavi_ohne_navi_home { color: #666; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 190%; text-align: left; margin-top: 40px; margin-left: 10px; padding-left: 20px; width: 170px; float: left; border-right: 1px dotted silver; }
#subnavi_schmal { color: #666; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 190%; text-align: left; margin-top: 110px; margin-left: 30px; padding-left: 25px; width: 100px; float: left; border-right: 1px dotted silver; border-bottom: 1px dotted silver; }
#subnavi_tip { color: #666; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 170%; text-align: left; margin-top: 44px; margin-left: 10px; padding-left: 20px; width: 170px; float: left; border-right: 1px dotted silver; border-bottom: 1px dotted silver; }
#subnavibox_rechts { color: #666; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 200%; text-align: right; width: 140px; float: left; margin-top: 63px; padding-left: 10px; }
#subnavibox_links_home { color: #666; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 190%; text-align: left; width: 160px; float: left; margin-top: 40px; padding-right: 10px; padding-left: 10px; border-left: 1px dotted #c0c0c0; }
#subnavibox_links { color: #666; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 190%; text-align: left; margin-top: 55px; padding-left: 10px; width: 160px; float: left; padding-right: 10px; border-bottom: 1px dotted #c0c0c0; border-left: 1px dotted #c0c0c0; }
#subnavibox_mittig { color: #666; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 200%; text-align: center; width: 140px; float: left; margin-top: 63px; padding-left: 10px; }
#subnavi a:link { color: #666; text-decoration: none; }
#subnavi_tip a:link { color: #666; text-decoration: none; }
#subnavi a:visited { color: #666; text-decoration: none; }
#subnavi_tip a:visited { color: #666; text-decoration: none; }
#subnavi a:hover { color: #ff5000; background-color: white; text-decoration: underline; padding: 2px; }
#subnavi_tip a:hover { color: #ff5000; text-decoration: underline; background-color: white; padding: 2px; }
#navi { background-image: url(../Bilder-1/bg-navi.jpg); background-repeat: repeat-x; width: auto; height: 28px; margin-right: 10px; margin-left: 10px; }
#suche { background-repeat: repeat-x; width: 300px; height: 31px; margin: 35px 25px 1px; padding-left: 176px; }
#suche_home { background-repeat: repeat-x; text-align: left; padding-left: 176px; width: 300px; height: 31px; float: left; margin: 35px 25px 1px; }
#trivago_links { background-repeat: repeat-x; text-align: left; width: 290px; float: left; }
#trivago_rechts { background-repeat: repeat-x; text-align: left; width: 180px; float: left; }
#suche_sprache { background-repeat: repeat-x; text-align: left; width: 170px; height: 31px; float: left; margin: 35px 10px 1px; }
#suche_sitemap { background-repeat: repeat-x; margin: 35px 25px 1px; padding-left: 100px; width: 300px; height: 31px; }
#navi a:link { color: white; font-weight: bold; text-decoration: none; }
#navi a:visited { color: white; font-weight: bold; text-decoration: none; }
#navi a:hover { color: #454545; font-weight: bold; text-decoration: none; width: 110px; height: 30px; padding: 3px 1px 4px; }
#top { background-image: url(../Bilder-1/880x126-Kopf.jpg); width: 880px; height: 126px; margin-right: 10px; margin-left: 10px; }
#container { background-image: url(../Bilder-1/bg-container-900.jpg); background-repeat: repeat-y; width: 900px; margin-right: auto; margin-left: auto; }
p { }
.img { margin-left: 4px; }

Beitrag von **nicolas** » 07.06.2010, 16:57

Für das HTML nimmst du deine geänderte Fassung:

Code: Alles auswählen

<a class="vlightbox" href="data/images/tha-phae-gate-01.jpg" title="Eingang zum Tha Phae Gate."><img src="data/thumbnails/tha-phae-gate-01.jpg" alt="Eingang zum Tha Phae Gate – hier befinden sich die meisten Angebote für Touristen."/>Eingang zum Tha Phae Gate – hier befinden sich die meisten Angebote für Touristen.</a>

In dieser CSS :<link rel="stylesheet" href="engine/css/vlightbox.css" type="text/css" />
machst du folgende Änderung:

Code: Alles auswählen

#vlightbox a&#58;hover, #vlightbox a&#58;visited, #vlightbox a&#58;active&#123;
	text-decoration&#58;none;
	opacity&#58;1;
 color&#58; #313131;
&#125;

Beitrag von **sidney** » 07.06.2010, 17:36

Sorry, hat ein bisschen länger gedauert, da ich nicht so ganz geschickt beim Thema "coding" bin — doch jetzt bin ich richtig happy, denn es hat geklappt!!!

1.000.000 DANK FÜR DEINEN NETTEN SUPPORT...
...ohne den ich das definitiv nicht hinbekommen hätte.