Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag04.08.2009 um 11:05 (UTC)    
Titel: [noch offen] Galerie: Suche nach html Schnipslen zur Überarb

Hallo zusammen,

ich habe meine Galerien aus einer Vorgabe in den Tutorials erstellt ohne html Kenntnisse zu besitzen.

Im "try and error"- Verfahren bin ich zu dem Ergebnis gekommen, daß Ihr z.B. hier begutachten könnt:

http://terra-li-ma.de.tl/Galerie-_-Echsen.htm

Der selbstgeschriebene html code dazu:

Code:
</head>
<DIV ALIGN=CENTER>
<body bgColor=#ffffc0 style="text-align: center">
</a>
<br>
<font face="Arial" color=black size=6>
Echsen                   
</font>
<br>
<br>

<br>
<font face="Arial" color=black size=6>
Iguana                   
</font>
<br>

<font face="Arial" color=black size=5>
 Linnaeus, 1758
</font>
<br>
<br>
<br>
<font face="Arial" color=black size=4>
<DIV ALIGN=Left>
iguana (Linnaeus 1758), Mittel-, Sd0061006d00650072ika
</font>
 <div align="center">
   <table border="0" width="480" id="table9">
      <tr>
         <td align="center">
<table id="table10">
<tr><td>1,0 adult  <br> Sonnenplatz </td> </tr>
<tr>
<td><a href="http://img.webme.com/pic/t/terra-li-ma/leger.ast.1.jpg">
<img src="http://img.webme.com/pic/t/terra-li-ma/leger.ast.1.vs.jpg" width=80 height=53 alt=""></a></td>
</tr>
</table>
         </td>
         <td align="center">
<table id="table24">
<tr><td>1,0 adult  <br> Sonnenplatz </td> </tr>
<tr>

<td><a href="http://img.webme.com/pic/t/terra-li-ma/leger.ast.2.jpg">
<img src="http://img.webme.com/pic/t/terra-li-ma/leger.ast.2.vs.jpg" width=80 height=53 alt=""></a></td>
</tr>
</table>
         </td>
         <td align="center">
<table id="table24">
<tr><td>1,0 adult + <br> Mitbewohner </td> </tr>
<tr>

<td><a href="http://img.webme.com/pic/t/terra-li-ma/leger.aga.jpg">
<img src="http://img.webme.com/pic/t/terra-li-ma/leger.aga.vs.jpg" width=80 height=53 alt=""></a></td>
</tr>
</table>
         </td>
      </tr>
   </table>
</div>
<p>
 </body>
</html>

</head>
<DIV ALIGN=CENTER>
<body bgColor=#ffffc0 style="text-align: center">
</a>
<br>
<br>
<font face="Arial" color=black size=6>
Gecko                   
</font>
<br>

<font face="Arial" color=black size=5>
 Linnaeus, 1758
</font>
<br>
<br>
<br>
<font face="Arial" color=black size=4>
<DIV ALIGN=Left>
gecko, (Linnaeus, 1758), Nord-, Ostindien, Sd006f007300740061sien, Neuguinnea
</font>
 <div align="center">
   <table border="0" width="480" id="table9">
      <tr>
         <td align="center">
<table id="table10">
<tr><td>1,0  <br> adult </td> </tr>
<tr>
<td><a href="http://img.webme.com/pic/t/terra-li-ma/tokeh.2.jpg">
<img src="http://img.webme.com/pic/t/terra-li-ma/tokeh.2.vs.jpg" width=80 height=53 alt=""></a></td>
</tr>
</table>
         </td>
         <td align="center">
<table id="table24">
<tr><td>0,1  <br> adult </td> </tr>
<tr>

<td><a href="http://img.webme.com/pic/t/terra-li-ma/tokeh.jpg">
<img src="http://img.webme.com/pic/t/terra-li-ma/tokeh.vs.jpg" width=80 height=53 alt=""></a></td>

</tr>
</table>
         </td>
      </tr>
   </table>
</div>
<p>
 </body>
</html>


Mit der optik bin ich zufrieden, nur die Handhabung finde ich inzwischen eher lästig.

Beim klick auf die Vorschau wird weitergeleitet auf das Bild, wer zur Übersicht zurück möchte, muss den "zurück" Button im Browser verwenden und (bei größeren Galerien wie "Spinnen") suchen wo er zuvor war.

Ich hoffe jemand kann mir einen Tip geben, wie ich in meinen vorhandenen Code die Möglichkeit einbauen kann von einem Bild zum nächsten über ein "weiter" bzw "nächstes" oder "voriges BIld" zu navigieren...

Sollte es auch noch möglich sein, dass sich ein Fenster vor der HP öffnet welches das angeklickte Bild darstellt (wie in der Baukasten Galerie möglich) wäre ich wieder vollkommen happy mit meinen Galerien.

Vielen dank schon mal für Eure Vorschläge,

Grüße, marcus


Zuletzt bearbeitet von terra-li-ma am 04.08.2009, 20:55, insgesamt einmal bearbeitet
Beitrag04.08.2009 um 15:35 (UTC)    
Titel: Code Galerie

Hallo,

Wenn du möchtest, dass sich ein Bild in einem Fenster öffnet, ohne eine neue Seite anzuwählen, funktioniert folgender Code.

Zitat:
<script type="text/javascript" src="http://img.webme.com/designs/globals/jquery.js"></script>
<script type="text/javascript" src="http://img.webme.com/designs/globals/thickbox.js">
</script>
<link media="screen" href="http://img.webme.com/designs/globals/thickbox.css" type="text/css" rel="stylesheet" />

<p align="center">
<table cellspacing="5" border="0" style="width: 600px">
<tbody>
<tr>
<td style="text-align: center"><a class="thickbox" href="Originalbild 1 URL"><font face="Arial" color="#000000" size="3"><img alt="" border="0" src="Vorschaubild 1 URL" /></font></a></td>
<td style="text-align: center"><a class="thickbox" href="Originalbild 2 URL"><font face="Arial" color="#000000" size="3"><img alt="" border="0" src="Vorschaubild 2 URL" /></font></a></td>
<td style="text-align: center"><a class="thickbox" href="Originalbild 3 URL"><font face="Arial" color="#000000" size="3"><img alt="" border="0" src="Vorschaubild 3 URL" /></font></a></td>
</tr>
</tbody>
</table>
</p>


Ich habe hier drei Bilder in eine unsichtbare Tabelle nebeneinander gepackt. Wenn man mit der Maus auf das kleine Vorschaubild klickt, erscheint eine vergrößerte Version davon.
Der Code ist recht nützlich. Das einzige, was stört ist, dass man von jedem Bild das Original und ein kleines Vorschaubild benötigt.
Du kannst auch mehr oder weniger Bilder nebeneinander setzen. Dazu musst du nur mehr/weniger Tabellenspalten einrichten.

Spalte 1
Spalte 2
Spalte 3


P.S. Das Thema deiner Seite ist sehr interessant.


Hoffe, ich konnte dir ein wenig helfen
Gruß

FK




Beitrag04.08.2009 um 17:19 (UTC)    
Titel:

Hallo nochmal,

danke Florian, für Deine Antwort.

Ausprobiert habe ich Deinen Code noch nicht, ich vermute es wird bei dem Code nötig sein die komplette Galerie neu zu schreiben!?

Vorschaubilder sind kein Problem, die habe ich bereits erstellt, hochgeladen und eingebunden.
Ohne verkleinerte Bilder für die Übersicht war die Ladezeit einfach zu lang bei größeren Seiten meiner Galerien wie z.B. hier:

http://terra-li-ma.de.tl/Spinnen-B_G.htm

Falls es möglich ist die gewünschten Veränderungen in meinen bestehenden html Code einzufügen, würde ich es gerne vermeiden meine Galerien komplett neu schreiben zu müssen...
...sollte es notwendig sein werde ich mir die Mühe aber machen.

Danke noch für das Kompliment, die Tierchen machen viel Freude!
Ich habe kurz auf Deiner Seite vorbeigeschaut, bin begeistert und neuguerig. Über Dein GB lasse ich Dich wissen wenn ich mehr Zeit zum lesen hatte!

Grüße, marcus
Beitrag04.08.2009 um 19:52 (UTC)    
Titel:

Hallo,

Das mit dem Code ist gar nicht so schwer. Ich habe lediglich das Javascript an den Anfang gesetzt und dann deine Grafiken gegen das Thickbox-Script ausgetauscht. Deine Galerie hat sich dadurch optisch nicht verändert. Den fertigen Code findest du anbei:

Zitat:


<script type="text/javascript" src="http://img.webme.com/designs/globals/jquery.js"></script>
<script type="text/javascript" src="http://img.webme.com/designs/globals/thickbox.js">
</script>
<link media="screen" href="http://img.webme.com/designs/globals/thickbox.css" type="text/css" rel="stylesheet" />


<div align="center"><br />
<font face="Arial" color="#000000" size="6">Echsen </font><br />
<br />
<br />

<font face="Arial" color="#000000" size="6">Iguana </font><br />
<font face="Arial" color="#000000" size="5">Linnaeus, 1758 </font><br />
<br />
<br />

<font face="Arial" color="#000000" size="4">
<div align="left">iguana (Linnaeus 1758), Mittel-, Sd0061006d00650072ika<br />
&nbsp;</div>
</font>

<div align="center">
<table id="table9" width="480" border="0">
<tbody>
<tr>
<td align="center">
<table id="table10">
<tbody>
<tr>
<td>1,0 adult <br />
Sonnenplatz</td>
</tr>
<tr>
<td style="text-align: center"><a class="thickbox" href="http://img.webme.com/pic/t/terra-li-ma/leger.ast.1.jpg"><font face="Arial" color="#000000" size="3"><img alt="" border="0" src="http://img.webme.com/pic/t/terra-li-ma/leger.ast.1.vs.jpg" /></font></a></td>
</tr>
</tbody>
</table>
</td>

<td align="center">
<table id="table24">
<tbody>
<tr>
<td>1,0 adult <br />
Sonnenplatz</td>
</tr>
<tr>
<td style="text-align: center"><a class="thickbox" href="http://img.webme.com/pic/t/terra-li-ma/leger.ast.2.jpg"><font face="Arial" color="#000000" size="3"><img alt="" border="0" src="http://img.webme.com/pic/t/terra-li-ma/leger.ast.2.vs.jpg" /></font></a></td>
</tr>
</tbody>
</table>
</td>

<td align="center">
<table id="table24">
<tbody>
<tr>
<td>1,0 adult + <br />
Mitbewohner</td>
</tr>
<tr>
<td style="text-align: center"><a class="thickbox" href="http://img.webme.com/pic/t/terra-li-ma/leger.aga.jpg"><font face="Arial" color="#000000" size="3"><img alt="" border="0" src="http://img.webme.com/pic/t/terra-li-ma/leger.aga.vs.jpg" /></font></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>

<p>&nbsp;</p>
<div align="center"><br />
<br />
<font face="Arial" color="#000000" size="6">Gecko </font><br />
<font face="Arial" color="#000000" size="5">Linnaeus, 1758 </font><br />
<br />
<br />

<font face="Arial" color="#000000" size="4">
<div align="left">gecko, (Linnaeus, 1758), Nord-, Ostindien, Sd006f007300740061sien, Neuguinnea</div>
</font><br />
<br />

<div align="center">
<table id="table9" width="480" border="0">
<tbody>
<tr>
<td align="center">
<table id="table10">
<tbody>
<tr>
<td>1,0 <br />
adult</td>
</tr>
<tr>
<td style="text-align: center"><a class="thickbox" href="http://img.webme.com/pic/t/terra-li-ma/tokeh.2.jpg"><font face="Arial" color="#000000" size="3"><img alt="" border="0" src="http://img.webme.com/pic/t/terra-li-ma/tokeh.2.vs.jpg" /></font></a></td>
</tr>
</tbody>
</table>
</td>

<td align="center">
<table id="table24">
<tbody>
<tr>
<td>0,1 <br />
adult</td>
</tr>
<tr>
<td style="text-align: center"><a class="thickbox" href="http://img.webme.com/pic/t/terra-li-ma/tokeh.jpg"><font face="Arial" color="#000000" size="3"><img alt="" border="0" src="http://img.webme.com/pic/t/terra-li-ma/tokeh.vs.jpg" /></font></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<p>&nbsp;</p>
</div>
</div>




Gruß

FK




Beitrag05.08.2009 um 05:56 (UTC)    
Titel: Wow! ;-)

Guten morgen Florian,

vielen dank, ich habe den Code gerade eingefügt und es funktioniert perfekt!!!

Mit dem neuen Code kann ich meine anderen Galerien wunderbar anpassen, so erkenne ich auch an welchen Stellen ich die Änderungen einfügen muss... Wink

Sollte ich Dir mal in irgendeiner Form behilflich sein können (Infos zu Exoten oder Bilder...) lass es mich wissen!

Falls jemandem noch etwas zum Thema Navigation "voriges", "nächstes Bild" einfällt freue ich mich über Ratschläge, das Hauptproblem ist aber gelöst.

Grüße, marcus
Beitrag05.08.2009 um 06:28 (UTC)    
Titel:

Sehr gut , danke für die Rückmeldung Very Happy
Und danke an die Helfer hier .
______________
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de