| Autor |
Nachricht |
c.c.baxter
Threadersteller
Dabei seit: 30.01.2009
Ort: Frankfurt
Alter: -
Geschlecht: 
|
Verfasst Mi 24.03.2010 17:03
Titel Stu Nicholls Fotogalerie – wer weiß Rat? |
  |
|
Hallo,
auf cssplay habe ich diese Fotogalerie gefunden:
http://www.cssplay.co.uk/menu/photo_not_so_simple
Sie ist vom Aufbau genau das, was ich gesucht habe. Ich würde sie gerne, etwas modifiziert, auf meiner persönlichen website verwenden (natürlich mit Quellenangabe).
Was aber extrem stört, ist dass beim Überfahren der Thumbnails, sobald man von einem Bild zum nächsten geht und , sich immer wieder das Startbild einblendet. Das Ganze wird dadurch extrem unruhig.
Hat jemand einen Tipp wie sich das korrigieren läßt?
Vielen Dank!
(Ich hoffe der Code wird richtig dargestellt)
| Code: | <style type="text/css">
#gallery {width:728px; height:380px; padding:10px; border:1px solid #333; background: #888; position:relative; margin-bottom:20px;}
#gallery b.default {position:absolute; left:10px; top:10px; width:548px; height:380px; text-align:center;}
#gallery b.default img {display:block; margin:0 auto 10px auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}
#gallery b.default span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}
#gallery ul {list-style:none; padding:0; margin:0; width:180px; position:relative; float:right;}
#gallery ul li {display:inline; width:52px; height:52px; float:left; margin:0 0 5px 5px;}
#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; border:1px solid #000; border-color:#eee #555 #333 #ddd;}
#gallery ul li a span {display:none;}
#gallery ul li a img {display:block; width:50px; height:50px; border:0;}
#gallery ul li a:hover {white-space:normal; border-color:#555 #ddd #eee #333; background:#777;}
#gallery ul li a:hover b {position:absolute; left:-548px; top:0; width:548px; height:380px; text-align:center; background:#888; z-index:20;}
#gallery ul li a:hover span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}
#gallery ul li a:hover img {margin:0 auto 10px auto; width:auto; height:auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}
#gallery ul li a:active, #gallery ul li a:focus {white-space:normal; border-color:#555 #ddd #eee #333; background:#777;}
#gallery ul li a:active b, #gallery ul li a:focus b {position:absolute; left:-548px; top:0; width:548px; height:380px; text-align:center; background:#888; z-index:10;}
#gallery ul li a:active span, #gallery ul li a:focus span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}
#gallery ul li a:active img, #gallery ul li a:focus img{margin:0 auto 10px auto; width:auto; height:auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}
</style>
<div id="gallery">
<b class="default" ><img src="trees/painting.jpg" title="" alt="" /><span>This is the default image with some descriptive text</span></b>
<ul>
<li><a href="#nogo"><b><img src="trees/t1.jpg" title="" alt="" /><span>This is where the descriptive text goes</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t2.jpg" title="" alt="" /><span>More descriptive text here</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t3.jpg" title="" alt="" /><span>Descriptive text can be placed below the image</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t4.jpg" title="" alt="" /><span>You can style the descriptive text as you like</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t5.jpg" title="" alt="" /><span>Place the descriptive text in a span tag</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t6.jpg" title="" alt="" /><span>Photograph descriptive text here</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t7.jpg" title="" alt="" /><span>Here is where you put the descriptive text</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t8.jpg" title="" alt="" /><span>Add the desriptive text below the photograph</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t9.jpg" title="" alt="" /><span>The descriptive text can be as long as you like. If it extends too far then it will wrap onto a second line</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t10.jpg" title="" alt="" /><span>Short descriptive text</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t11.jpg" title="" alt="" /><span>Descriptive text</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/p1.jpg" title="" alt="" /><span>Describe the photograph here</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t13.jpg" title="" alt="" /><span>The description goes here</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t14.jpg" title="" alt="" /><span>Descriptive text</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t15.jpg" title="" alt="" /><span>Description</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t16.jpg" title="" alt="" /><span>Descriptive text</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t17.jpg" title="" alt="" /><span>Descriptive text</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t18.jpg" title="" alt="" /><span>Descriptive text</span></b></a></li>
</ul>
</div> |
|
|
| |
  |
 |
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Mi 24.03.2010 17:09
Titel
|
|
|
|
ich denke mal das funktioniert nur mit javascript.
|
|
| |
 |
|
|
Anzeige
|
|
|
buchstabensuppe
Dabei seit: 14.09.2004
Ort: Wuppertal
Alter: 40
Geschlecht:
|
Verfasst Mi 24.03.2010 17:10
Titel
|
|
|
|
Ganz ehrlich, das würde ich mit nem netten jQuery Script eben nachbauen. Ich denke das geht schneller als im fremden Code rumzugraben...
|
|
| |
|
|
buchstabensuppe
Dabei seit: 14.09.2004
Ort: Wuppertal
Alter: 40
Geschlecht:
|
Verfasst Mi 24.03.2010 17:11
Titel
|
|
|
| choise hat geschrieben: | | ich denke mal das funktioniert nur mit javascript. |
Sicher? Die Bilder werden in der Liste doch verkleinert und beim mouseover ändert er/sie das bg-image links. Oder sehe ich das falsch nach dem ersten drüberfliegen?
|
|
| |
|
|
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Mi 24.03.2010 17:14
Titel
|
|
|
nein er ändert nur die positionierung beim hover.
rein mit css kannst du ja nicht das bg image ändern.
// oder gehe ich da von was falschem aus? dachte ich zumindest
Zuletzt bearbeitet von choise am Mi 24.03.2010 17:17, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Noti
Dabei seit: 15.07.2008
Ort: Wien
Alter: 36
Geschlecht:
|
Verfasst Mi 24.03.2010 17:23
Titel
|
|
|
du könntest auch einfach die Thumbnails ohne abstand voneinander positionieren.
Dann is der cursor beim "weiterblättern" immer über einem thumbnail und das bild springt nicht auf default zurück.
|
|
| |
|
|
buchstabensuppe
Dabei seit: 14.09.2004
Ort: Wuppertal
Alter: 40
Geschlecht:
|
Verfasst Mi 24.03.2010 17:24
Titel
|
|
|
|
Hast Recht, Denkfehler meinerseits. Dann haben die das Script aber gut versteckt...
|
|
| |
|
|
c.c.baxter
Threadersteller
Dabei seit: 30.01.2009
Ort: Frankfurt
Alter: -
Geschlecht:
|
Verfasst Mi 24.03.2010 17:32
Titel
|
|
|
Vielen Dank für die Antworten.
Ich bin nicht der Profi, deshalb war ich froh eine geeignete Galerie als Vorlage gefunden zu haben.
Außerdem lassen sich hier schnell Bild und zugehöriger Text austauschen.
Hallo Noti,
ich glaube Dein Vorschlag den Abstand zwischen den Bildern herauszunehmen könnte klappen.
Wäre es aber dann nicht auch möglich, die Bilder jeweils mit Rand zu versehen und dann direkt aneinanderstoßen zu lassen?
Gruß
Johannes
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Vorlage für Fotogalerie
Simple Fotogalerie
Online Fotogalerie
Suche Online Fotogalerie
[WordPress] Fotogalerie PlugIn
[Photoshop CS] Fehler bei Web-Fotogalerie
|
|
Willkommen auf dem Portal für Mediengestalter
