KyriosTheristis
Erfahrenes Mitglied
Guten Tag
Ich habe mir von CSSPlay eine dieser schönen Gallerien besorgt und ein wenig meinen wünschen angepasst. Klappt soweit auch alles ganz gut.
Mein Ziel ist es jetzt, dass wenn ich auf ein Bild in der Vorschau klicke, das grössere Bild erscheint und bei einem Klick dort drauf, eine Vollversion in einem Popup kommt anstatt dass es einfach wieder verschwindet.
Am liebsten hätte ich das in einer Lightbox, diese konnte ich auch schon einbinden, nur schaff ich es irgendwie nicht, das grössere Bild als Link zu verwenden.
Ich verstehe ehrlich gesagt den Code von der CSSPlay Gallery auch nicht hundertpro, da ich in CSS nur mit den Basics zurechtkomme, hoffe ihr könnt mir da einen Tip geben, denn einfach nen href einfügen bringt die Gallery ziemlich durcheinander :/
Vielen Dank und Grüsse
Santsches
Ah ja, eine Version meiner bisherigen (miss)erfolge findet ihr hier:
Gallery
Ich habe mir von CSSPlay eine dieser schönen Gallerien besorgt und ein wenig meinen wünschen angepasst. Klappt soweit auch alles ganz gut.
Mein Ziel ist es jetzt, dass wenn ich auf ein Bild in der Vorschau klicke, das grössere Bild erscheint und bei einem Klick dort drauf, eine Vollversion in einem Popup kommt anstatt dass es einfach wieder verschwindet.
Am liebsten hätte ich das in einer Lightbox, diese konnte ich auch schon einbinden, nur schaff ich es irgendwie nicht, das grössere Bild als Link zu verwenden.
Ich verstehe ehrlich gesagt den Code von der CSSPlay Gallery auch nicht hundertpro, da ich in CSS nur mit den Basics zurechtkomme, hoffe ihr könnt mir da einen Tip geben, denn einfach nen href einfügen bringt die Gallery ziemlich durcheinander :/
Vielen Dank und Grüsse
Santsches
Ah ja, eine Version meiner bisherigen (miss)erfolge findet ihr hier:
Gallery
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--include header.php-->
<?php include "header.php"; ?>
<div id="content">
<h1>Terragen .[gallery]</h1>
<!--Aufruf für die Lightbox, nur zum Testen der LB-->
<a href="http://www.tutorials.de/forum/images/terragengallery/journey.jpg" rel="lightbox">Just a Image</a>
<style type="text/css">
/* needed for IE to make :active state work first time */
/*a, a:visited {color:#000;}*/
/* common styling for all galleries */
a.gallery, a.gallery:visited {display:block; display:inline-block; color:#000; text-decoration:none; border:1px solid #fff; width:97px; height:60px; float:left; margin:5px; z-index:50;}
a.slidea {background:url(images/terragengallery/journey_small.jpg);}
a.slideb {background:url(london/thumb3.jpg);}
a.slidec {background:url(london/thumb4.jpg);}
a.slided {background:url(london/thumb5.jpg);}
a.slidee {background:url(london/thumb6.jpg);}
a.slidef {background:url(london/thumb7.jpg);}
a.slideg {background:url(london/thumb8.jpg);}
a.slidei {background:url(london/thumb10.jpg);}
a.slidej {background:url(london/thumb11.jpg);}
a.gallery em, a.gallery span {display:none;}
a.gallery:hover {border:1px solid #555;}
/* styling for TOP gallery */
#container_top {position:relative; width:545px; height:600px; background:#222;margin:1em auto;}
#container_top img {border:0;}
#container_top .thumbs {position:absolute; left:0; top:0;}
#container_top a.gallery:hover span {display:block; position:absolute; width:402px; height:50px; top:150px; left:0px; padding:5px; font-style:italic; color:#fff; z-index:100;}
#container_top a.gallery:hover span:first-line {font-style:normal; font-weight:bold; font-size:1.1em; color:#fff;}
#container_top a.gallery:active, #container_top a.gallery:focus {border:1px solid #ffff33;}
#container_top a.gallery:active em, #container_top a.gallery:focus em {display:block; position:absolute; width:545px; height:341px; top:200px; left:0px; padding:0px; color:#000; z-index:50;}
#container_top h1 {clear:both; margin:0; padding-top:250px; text-align:center; font-family: verdana, georgia, "times new roman", serif; font-size:3em; font-weight:normal; color:#fff;}
#container_top h1 em {font-size:0.6em; color:#000;}
</style>
<div id="container_top">
<div class="thumbs">
<a class="gallery slidea" href="#nogo"><em><img src="http://www.tutorials.de/forum/images/terragengallery/journey_prev.jpg" alt="Journey" title="Journey" /></em><span>Journey<br />Made with Terragen 0.9</span></a>
<a class="gallery slideb" href="#nogo"><em><img src="http://www.tutorials.de/forum/images/terragengallery/coldsunset_prev.jpg" alt="Cold Sunset" title="Cold Sunset" /></em><span>Cold Sunset<br />Made with Terragen 0.9</span></a>
<a class="gallery slidec" href="#nogo"><em><img src="http://www.tutorials.de/forum/images/terragengallery/silentwater_prev.jpg" alt="Tower Bridge" title="Tower Bridge" /></em><span>Tower Bridge<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slided" href="#nogo"><em><img src="london/pic5.jpg" alt="Tower of London" title="Tower of London" /></em><span>Tower of London<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidee" href="#nogo"><em><img src="london/pic6.jpg" alt="Houses of Parliament" title="Houses of Parliament" /></em><span>Houses of Parliament<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidef" href="#nogo"><em><img src="london/pic7.jpg" alt="St. Paul's Cathedral" title="St. Paul's Cathedral" /></em><span>St. Paul's Cathedral<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slideg" href="#nogo"><em><img src="london/pic8.jpg" alt="The London Eye" title="The London Eye" /></em><span>The London Eye<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slideh" href="#nogo"><em><img src="london/pic9.jpg" alt="Albert Hall" title="Albert Hall" /></em><span>Albert Hall<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidei" href="#nogo"><em><img src="london/pic10.jpg" alt="Wandsworth Common" title="Wandsworth Common" /></em><span>Wandsworth Common<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidej" href="#nogo"><em><img src="london/pic11.jpg" alt="London Taxi Cab" title="London Taxi Cab" /></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>
</div>
<h1>Terragen<br />Gallery</h1>
</div>
</div><!--ende von Div Content-->
<!--include nav3d-art Navigation-->
<?php include "nav3d-art.php"; ?>
<div id="spacer"></div>
</div><!--ende von id container-->
<!--include footer-->
<?php include "footer.php"; ?>
Zuletzt bearbeitet:
