LinkBack URL
About LinkBacks
Zitierenwenn bei dir php läuft versuch das mal
Hallo,
ich möchte gerne meine fotos und bilder so anzeigen lassen, das ein Bild immer groß in mitte ist und unten drunter die möglichkeit vor und zurück.
Alle anderen Bilder sollen kleiner in einer reihe sein.
Also praktisch eine Galerie bei der ich mit z.b. pfeiltasten das nächste oder letzte bild auswählen kann.
Ich hoffe mich versteht jemand??
edit: so wie es hier ist meine ich http://www.holidaycheck.de/detail-id...729-ch_ub.html
wenn bei dir php läuft versuch das mal
computer tun nur das was man ihnen sagt, meistens
Das ist ja eine ganz normale Galerie, sowas meinte ich ich nicht, trotzdem danke.
Mir ist das mit den Pfeilen sehr wichtig, schau dir doch mal den Link an, so ist es echt super.
das muss dynamisch laufen, oben abfragen die vor 4 und nach 4, unten anzeigen und pfeile immer 1 weiter, design und layout sind eigentlich egal.
computer tun nur das was man ihnen sagt, meistens
Jetzt verstehe ich nichts mehr, ich weiß das es für sowas mal ein scribz gab, aber leider finde ich es auch über google nicht mehr.
Hallo,
klasse, genau sowas meine ich. Das gefällt mir sehr gut, allerdings finde ich kein scribt oder einen Download um es bei mir einzubauen?? Ist das ganze kostenlos?
Das wird mit CSS realisiert. Bist Du mit CSS vertraut? Rechter Mausklick dann erkennst du den Code.
Ist kostenlos. Den Code übernimmst Du mit Verweis auf Stu´s Seite.
Grüße
Michael
Back to business!
Auch wenns schick aussieht finde ich diese reinen CSS-Lösungen eher suboptimal, weil sämtliche Bilder vorgeladen werden müssen. Das kann sich unter Umständen ganz schön summieren.Zitat von Mich@el
Alternativ könnte man die Thumbnails verlinken und die große Version beim Klick in ein Iframe laden.
Hallo,
vertraut würde ich leider nicht sagen *g*
Wärst du so nett mir den code rauszukopieren den ich brauche?
Schon satre´s nachvollziehbare Bedenken und Vorschlag bedacht?
Ansonsten, welches Beispiel gefällt Dir am besten?
Back to business!
Am besten gefällt mir das A Scrolling Photograph Gallery.
Vielen Dank für die gute Hilfe.
Na gut. Ist ne Menge. Das mußt Du zwischen die <head></head> Tags stecken:
Und das zwischen die <body></body> Tags. Mit deinen Bildern natürlich:PHP-Code:<style type="text/css">
#holder {position:relative; background:transparent url(pic1b.gif) 175px 54px no-repeat; margin-bottom:10px; z-index:1;}
#scrollbox {width:400px; height:80px; background:#f4f4f4; overflow:auto; border:1px solid #aaa; margin-left:175px;}
a.gallery, a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; margin:3px; float:left; font-size:11px;}
a.slidea {background:url(thumb2.jpg);}
a.slideb {background:url(thumb3.jpg);}
a.slidec {background:url(thumb4.jpg);}
a.slided {background:url(thumb5.jpg);}
a.slidee {background:url(thumb6.jpg);}
a.slidef {background:url(thumb7.jpg);}
a.slideg {background:url(thumb8.jpg);}
a.slideh {background:url(thumb9.jpg);}
a.slidei {background:url(thumb10.jpg);}
a.slidej {background:url(thumb11.jpg);}
a.gallery span {display:block; position:absolute; left:150px; top:-1px; width:1px; height:1px; overflow:hidden; background:#efedec; z-index:100; font-size:11px;}
a.gallery:hover {white-space:normal; border:1px solid #fff;}
a.gallery:hover img {border:1px solid #000; z-index:100;}
a.gallery:active img, a.gallery:focus img {border:1px solid #000; z-index:50;}
a.gallery:hover span {display:block; position:absolute; width:402px; height:280px; top:49px; left:170px; padding:5px; font-style:italic; color:#000; background:#fff; z-index:100; font-size:11px;}
* html a.gallery:hover span {left:155px;}
a.gallery:active {border:1px solid #eee;}
a.gallery:active span, a.gallery:focus span {display:block; position:absolute; width:402px; height:280px; top:49px; left:170px; padding:5px; font-style:italic; color:#000; background:#fff; z-index:50;}
* html a.gallery:active span {left:155px;}
#thumbs {width:840px; height:60px;}
#pad {height:320px; width:100px;}
</style>
<!--[if IE 7]>
<style type="text/css">
a.gallery span {display:block; position:absolute; width:402px; height:280px; top:49px; left:-99999px; padding:5px; font-style:italic; color:#000; background:#fff; z-index:100; font-size:11px;}
a.gallery span img {border:1px solid #000;}
a.gallery:hover {white-space:normal; border:1px solid #fff;}
a.gallery:hover img {border:1px solid #000; z-index:100;}
a.gallery:active img, a.gallery:focus img {border:1px solid #000; z-index:50;}
a.gallery:hover span {left:170px; z-index:100;}
a.gallery:hover span img {border:1px solid #000;}
a.gallery:active span, a.gallery:focus span {left:170px; z-index:50;}
</style>
<![endif]-->
</head>
GrüßePHP-Code:<div id="scrollbox">
<div id="thumbs">
<a class="gallery slidea" href="#nogo" title="Fishes"><span><img src="pic2.jpg" alt="Fishes" title="Fishes" /><br />pic2.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slideb" href="#nogo" title="Funnels"><span><img src="pic3.jpg" alt="Funnels" title="Funnels" /><br />pic3.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slidec" href="#nogo" title="Vases"><span><img src="pic4.jpg" alt="Vases" title="Vases" /><br />pic4.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slided" href="#nogo" title="Window"><span><img src="pic5.jpg" alt="Window" title="Window" /><br />pic5.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slidee" href="#nogo" title="Cascade"><span><img src="pic6.jpg" alt="Cascade" title="Cascade" /><br />pic6.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slidef" href="#nogo" title="Cascade"><span><img src="pic7.jpg" alt="Flowers" title="Flowers" /><br />pic7.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slideg" href="#nogo" title="Cascade"><span><img src="pic8.jpg" alt="Butterfly" title="Butterfly" /><br />pic8.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slideh" href="#nogo" title="Cascade"><span><img src="pic9.jpg" alt="Birds" title="Birds" /><br />pic9.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slidei" href="#nogo" title="Cascade"><span><img src="pic10.jpg" alt="Shells" title="Shells" /><br />pic10.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slidej" href="#nogo" title="Cascade"><span><img src="pic11.jpg" alt="Fishing" title="Fishing" /><br />pic11.jpg<br />Photographs courtesy of morgueFile.com</span></a>
</div>
</div>
Michael
Back to business!
vielen Dank, ich bekomme das einfach nicht untereinander, das große fenster öffnet sich überall aber nicht direkt unter der leiste.
Könntest du mal den code einfügen, so wie du es machen würdest?
hier mein quelltext:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<title>Homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="mm_health_nutr.css" type="text/css" />
<script language="JavaScript" type="text/javascript">
<!--
//--------------- LOCALIZEABLE GLOBALS---------------
var d=new Date();
monthname= new Array("January","February","March","April","May","June","July","August","September","October","November","December");
//Ensure correct for language. English is "January 1, 2004"
var TODAY = monthname[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
//--------------- END LOCALIZEABLE ---------------
//-->
</script>
<style type="text/css">
<!--
.Stil46 {font-family: Garamond; color: #006600; font-size: 18px; }
.Stil49 {font-family: Garamond; color: #006600; font-size: 18px; font-weight: bold; }
.Stil50 {color: #D5EDB3}
.Stil51 { color: #FF9900;
text-decoration: underline;
}
.Stil52 {font-size: 12px}
.Stil53 {color: #FF9900; font-family: Garamond; font-weight: bold; font-size: 12px; }
.Stil2 { color: #CC3300;
font-size: 36px;
font-family: Garamond;
font-weight: bold;
text-decoration: underline;
}
.Stil56 {color: #D5EDB3; font-weight: bold; }
.Stil1 {
color: #CC3300;
font-family: Garamond;
font-weight: bold;
font-size: 22px;
text-decoration: underline;
}
<body bgcolor="#F4FFE4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#D5EDB3">
<td height="51" colspan="3"><div align="center"><img src="tenneberg.jpg" alt="schlossbanner" width="850" height="200" /></div></td>
</tr>
<tr>
<td colspan="3" bgcolor="#5C743D"><img src="mm_spacer.gif" alt="" width="1" height="2" border="0" /></td>
</tr>
<tr>
<td colspan="3" bgcolor="#99CC66" background="mm_dashed_line.gif"><img src="mm_dashed_line.gif" alt="line decor" width="4" height="3" border="0" /></td>
</tr>
<tr bgcolor="#99CC66">
<td colspan="3" id="dateformat" height="20"> <script language="JavaScript" type="text/javascript">
document.write(TODAY); </script> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#99CC66" background="mm_dashed_line.gif"><img src="mm_dashed_line.gif" alt="line decor" width="4" height="3" border="0" /></td>
</tr>
<tr>
<td colspan="3" bgcolor="#5C743D"><img src="mm_spacer.gif" alt="" width="1" height="2" border="0" /></td>
</tr>
<tr>
<td width="187" valign="top" bgcolor="#5C743D">
<table border="0" cellspacing="0" cellpadding="0" width="165" id="navigation">
<tr>
<td width="165"> <br />
<br /></td>
</tr>
<tr>
<td width="165"><a href="start.html" class="navText">Startseite</a></td>
</tr>
<tr>
<td width="165"><a href="veranstaltungen.html" class="navText">Veranstaltungen</a></td>
</tr>
<tr>
<td width="165"><a href="rittermahl.html" class="navText">Ritteressen</a></td>
</tr>
<tr>
<td width="165"><a href="galerie.html" class="navText">Bildergalerie</a></td>
</tr>
<tr>
<td><a href="schlossgeschichte.html" class="navText">Schlossgeschichte</a></td>
</tr>
<tr>
<td><a href="gästebuch.html" class="navText">Gästebuch</a></td>
</tr>
<tr>
<td width="165"><a href="anfahrt.html" class="navText">Anfahrt</a></td>
</tr>
</table>
<br />
<br />
<div align="center" class="Stil52"><span class="Stil51"> <strong>Öffnungszeiten</strong></span> </div>
<p align="center" class="Stil53"> November - März </p>
<p align="center" class="Stil50">Montag und Dienstag Ruhetag </p>
<p align="center" class="Stil50">Mittwoch - Donnerstag 11 - 18 Uhr </p>
<p align="center" class="Stil50">Freitag - Samstag 11 - 23 Uhr </p>
<p align="center" class="Stil50">Sonntag 11- 20 Uhr </p>
<p align="center" class="Stil53"> April - Oktober</p>
<p align="center" class="Stil50">Montag ist Ruhetag </p>
<p align="center" class="Stil50">Dienstag - Mittwoch 11 - 18 Uhr </p>
<p align="center" class="Stil50">Donnerstag - Samstag 11 - 23 Uhr </p>
<p align="center" class="Stil50">Sonntag 11 - 20 Uhr </p>
<div align="center">
<script type="text/javascript" language="JavaScript" src="http://www.donnerwetter.de/wetter/net/boxregio.mv?typ=1&plz=99880&color_bg=#006600&color_hi=#5C743D&color_txt=&width="></script>
<noscript>
JavaScript ist deaktiviert - leider sehen Sie hier kein aktuelles Wetter. <a href="http://www.donnerwetter.de" target="_blank">www.Donnerwetter.de</a>
</noscript>
<br />
</div>
<br />
<br /> </td>
<td width="139"><img src="mm_spacer.gif" alt="" width="50" height="1" border="0" /></td>
<td width="526" valign="top"><img src="mm_spacer.gif" alt="" width="305" height="1" border="0" /><br />
<br />
<br />
<table border="0" cellspacing="0" cellpadding="0" width="526">
<tr>
<td width="526" class="pageName"><div align="center">
<table border="0" cellspacing="0" cellpadding="2" width="822">
<tr>
<td height="55" class="pageName Stil1"><div align="center">Bildergalerie</div></td>
</tr>
<tr>
<td class="pageName Stil1"><div align="center"></div></td>
</tr>
<tr>
<td class="pageName Stil1"><div align="center"></div></td>
</tr>
<tr bordercolor="#99CCFF">
<th width="266" scope="row"><div align="center"></div></th>
</tr>
<tr bordercolor="#99CCFF">
<th scope="row"><div align="center">
<p> </p>
<p> </p>
</div>
<div align="center"></div></th>
</tr>
<tr bordercolor="#99CCFF">
<th height="397" scope="row"><div align="center"></div></th>
</tr>
<tr bordercolor="#99CCFF">
<th height="311" scope="row"><div align="center"></div>
</th>
</tr>
<tr bordercolor="#99CCFF">
<th scope="row"><div align="center"></div></th>
</tr>
<tr bordercolor="#99CCFF">
<th height="354" scope="row"><div align="center"></div></th>
</tr>
<tr bordercolor="#99CCFF">
<th scope="row"><div align="center"></div></th>
</tr>
<tr bordercolor="#99CCFF">
<th scope="row"><div align="center"></div></th>
</tr>
<tr>
<td class="bodyText"> </td>
</tr>
</table>
</div></td>
</tr>
</table>
<br />
<br /> </td>
</tr>
<tr>
<td width="187"> </td>
<td width="139"> </td>
<td width="526"> </td>
</tr>
</table>
</body>
</html>
Sorry, aber mit dieser Einstellung kommst du nicht weiter.
Programme wie Dreamweaver sind praktisch und helfen den Workflow zu beschleunigen. HTML- und CSS-Kenntnisse musst du dir jedoch aneignen. Auch wenn es am Anfang hart und langwierig ist, verstehst du was im Quelltext überhaupt passiert und kannst diese Probleme selbst lösen.
SELFHTML ist dafür ein gute Anlaufstelle.
Bitte nicht missverstehen, hier im Forum wird gerne geholfen. Jedoch verlangst du von uns ohne Vorwissen ein Problem zu lösen, wobei der Lerneffekt bei dir gleich Null wäre. Und das ist nicht der Sinn der Sache.
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
