Bildfolge in einer Galerie, die sich aus einer DB liest

Catdreams

Sorry, das hier manchmal die Worte zusammenhängen, meine Tastatur ist leicht im Eimer, die Spacetaste mag nimmer so!

ich habe mal eine ( für mich als Leie schwierig zu beschreibende ) Frage an euch!
Ich erstelle , man glaubt es kaum, fast ohne php Kenntnissen eine ziemlich große private Seite. Nun bin ich aber an meine Grenzen gestoßen und brauche eine Hilfestellung!

Ich habe eine Galerie gebastelt, ( bzw. eine auf css basirende Galerie aus dem Internet herunter geladen ). In der Galerie sindzuerst einmal kleine Vorschaubilder und dann halt bei berührung kommen an einer anderenStelle, die Originalbilder zumVorschein!

Die kleinen Bilder werden erstmal im Header im css Teil ausgelesen, die großen Bilder später in der Tabelle der Galerie.

Ich hatte zuerst an eine Schleife gedacht, mit der ich die ganze Zeit gearbeitet habe, aber das geht ja nicht, da sich ja dann immer das erste Bild 8 Mal inder Galerie zeigt ( die Galerie besteht immer aus 8 Bildern ) und dann darunter die nächste Galerie , in der das 2 Bild 8 Mal erscheint! ( Mal abgesehen davon, das sich die Vorschaubilder garnicht verändern, sondern immer gleich bleiben!

Ich hoffe, ihr versteht im Prinzip, wie ich das meine!

Meine Frage ist nun, mit welchen Befehl ich es hinbekomme, das in der Galerie 8 verschiedene Bilder erscheinen?

In der Datenbank steht halt nur bild (Originalbild) und halt bildklein (Vorschau). Ich haue jetzt einfach mal den Code hier rein, so wie ich ihn bisher habe! Leider ist die Datei ein wenig groß, aber ich kann das leider nicht so abspecken, da ihr ja genau sehen müßt, wie es aufgebaut ist! Ich habe in der Galerie jetzt erstmal nur die ersten 2 Bilder angepaßt zum testen, die anderen sind noch normale Bilder!

Ich hoffe, irgendjemand kann mir helfen! Ich kommesonst alleine nicht weiter!

Hier erstmal der erste phpcode ganz am anfang

Code

<?
$def = 2;
if(!$x)
$x=0;
if(!$y)
$y=$def;


$kategorie=mysql_real_escape_string($_GET['kategorie']); 
$res=$db_handler->sql_query("SELECT * FROM galerie WHERE kategorie='$kategorie' order by id LIMIT $x,$def"); 
$num=mysql_affected_rows();
 
$resXX=$db_handler->sql_query("select * FROM galerie WHERE kategorie='$kategorie' order by id");
$anz=mysql_num_rows($resXX);
 
for ($a=0;$a<$num;$a++)
{
$id=mysql_result($res,$a,"id");
$bild=mysql_result($res,$a,"bild");
$bildklein=mysql_result($res,$a,"bildklein");
$kategorie=mysql_result($res,$a,"kategorie");
{
?>

Alles anzeigen

Dann folgt der unwichtigere CSS Teil ( ist natürlich in Head eingebettet )

Code

<STYLE type=text/css>
A { COLOR: #080 }
A:visited { COLOR: #080 }
A.gallery { BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; DISPLAY: inline-block; Z-INDEX: 50; FLOAT: left; MARGIN: 4px; BORDER-LEFT: #000 1px solid; WIDTH: 75px; COLOR: #000; BORDER-BOTTOM: #000 1px solid; HEIGHT: 47px; TEXT-DECORATION: none }
A.gallery:visited { BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; DISPLAY: inline-block; Z-INDEX: 50; FLOAT: left; MARGIN: 4px; BORDER-LEFT: #000 1px solid; WIDTH: 75px; COLOR: #000; BORDER-BOTTOM: #000 1px solid; HEIGHT: 47px; TEXT-DECORATION: none }

In dem CSS Teil stehen jetzt aber die ersten Anfragen an die DB

Code

A.slidea { BACKGROUND: url(images/galerie/<? echo "$bildklein" ?>) }
A.slideb { BACKGROUND: url(images/galerie/<? echo "$bildklein" ?>) }
A.slidec { BACKGROUND: url(images/galerie/<? echo "$bildklein" ?>) }
A.slided { BACKGROUND: url(images/galerie/<? echo "$bildklein" ?>) }
A.slidee { BACKGROUND: url(images/galerie/<? echo "$bildklein" ?>) }
A.slidef { BACKGROUND: url(images/galerie/<? echo "$bildklein" ?>) }
A.slideg { BACKGROUND: url(images/galerie/<? echo "$bildklein" ?>) }
A.slideh { BACKGROUND: url(images/galerie/<? echo "$bildklein" ?>) }
A.slidei { BACKGROUND: url(images/galerie/<? echo "$bildklein" ?>) }
A.slidej { BACKGROUND: url(images/galerie/<? echo "$bildklein" ?>) }

Dann wieder unwichtiger Kram des CSS teils

Code

A.gallery EM { DISPLAY: none }
A.gallery SPAN { DISPLAY: none }
A.gallery:hover {
	BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BORDER-LEFT: #fff 1px solid; BORDER-BOTTOM: #fff 1px solid
}
#container_top {
	BORDER-RIGHT: #a49188 1px solid; BORDER-TOP: #a49188 1px solid; BACKGROUND: #C4E1A7; MARGIN: 1em auto; BORDER-LEFT: #a49188 1px solid; WIDTH: 425px; BORDER-BOTTOM: #a49188 1px solid; POSITION: relative; HEIGHT: 425px
}
#container_top IMG {
	BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
#container_top #thumbs {
	LEFT: 0px; POSITION: absolute; TOP: 0px
}
#container_top A.gallery:hover SPAN {
	PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 100; LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 402px; COLOR: #fff; PADDING-TOP: 5px; FONT-STYLE: italic; POSITION: absolute; TOP: 110px; HEIGHT: 50px
}
#container_top A.gallery:hover SPAN:first-line {
	FONT-WEIGHT: bold; FONT-SIZE: 1.1em; COLOR: #000; FONT-STYLE: normal
}
#container_top A.gallery:active {
	BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid
}
#container_top A.gallery:unknown {
	BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid
}
#container_top A.gallery:active EM {
	BORDER-RIGHT: #3d330f 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #3d330f 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #3d330f 1px solid; WIDTH: 402px; COLOR: #000; PADDING-TOP: 5px; BORDER-BOTTOM: #3d330f 1px solid; POSITION: absolute; TOP: 160px; HEIGHT: 250px
}
#container_top A.gallery:unknown EM {
	BORDER-RIGHT: #3d330f 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #3d330f 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #3d330f 1px solid; WIDTH: 402px; COLOR: #000; PADDING-TOP: 5px; BORDER-BOTTOM: #3d330f 1px solid; POSITION: absolute; TOP: 160px; HEIGHT: 250px
}
#container_top H1 {
	CLEAR: both; FONT-WEIGHT: normal; FONT-SIZE: 3em; MARGIN: 0px; COLOR: #fff; PADDING-TOP: 200px; FONT-FAMILY: georgia, "times new roman", serif; TEXT-ALIGN: center
}
#container_top H1 EM {
	FONT-SIZE: 0.6em; COLOR: #000
}
#container_bottom {
	BORDER-RIGHT: #a49188 1px solid; BORDER-TOP: #a49188 1px solid; BACKGROUND: #C4E1A7; MARGIN: 1em auto; BORDER-LEFT: #a49188 1px solid; WIDTH: 425px; BORDER-BOTTOM: #a49188 1px solid; POSITION: relative; HEIGHT: 425px
}
#container_bottom IMG {
	BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
#container_bottom #thumbs {
	LEFT: 0px; BOTTOM: 0px; POSITION: absolute
}
#container_bottom A.gallery:hover SPAN {
	PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 100; LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 402px; COLOR: #fff; PADDING-TOP: 5px; FONT-STYLE: italic; POSITION: absolute; TOP: -45px; HEIGHT: 50px
}
#container_bottom A.gallery:hover SPAN:first-line {
	FONT-WEIGHT: bold; FONT-SIZE: 1.1em; COLOR: #000; FONT-STYLE: normal
}
#container_bottom A.gallery:active {
	BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid
}
#container_bottom A.gallery:unknown {
	BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid
}
#container_bottom A.gallery:active EM {
	BORDER-RIGHT: #3d330f 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #3d330f 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #3d330f 1px solid; WIDTH: 402px; COLOR: #000; PADDING-TOP: 5px; BORDER-BOTTOM: #3d330f 1px solid; POSITION: absolute; TOP: -305px; HEIGHT: 250px
}
#container_bottom A.gallery:unknown EM {
	BORDER-RIGHT: #3d330f 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #3d330f 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #3d330f 1px solid; WIDTH: 402px; COLOR: #000; PADDING-TOP: 5px; BORDER-BOTTOM: #3d330f 1px solid; POSITION: absolute; TOP: -305px; HEIGHT: 250px
}
#container_bottom H1 {
	CLEAR: both; FONT-WEIGHT: normal; FONT-SIZE: 3em; MARGIN: 0px; COLOR: #fff; PADDING-TOP: 80px; FONT-FAMILY: georgia, "times new roman", serif; TEXT-ALIGN: center
}
#container_bottom H1 EM {
	FONT-SIZE: 0.6em; COLOR: #000
}
#container_left {
	BORDER-RIGHT: #a49188 1px solid; BORDER-TOP: #a49188 1px solid; BACKGROUND: #C4E1A7; MARGIN: 1em auto; BORDER-LEFT: #a49188 1px solid; WIDTH: 600px; BORDER-BOTTOM: #a49188 1px solid; POSITION: relative; HEIGHT: 305px
}
#container_left IMG {
	BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
#container_left #thumbs {
	LEFT: 0px; WIDTH: 170px; POSITION: absolute; TOP: 0px
}
#container_left A.gallery:hover SPAN {
	PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 100; LEFT: 175px; PADDING-BOTTOM: 5px; WIDTH: 402px; COLOR: #fff; PADDING-TOP: 5px; FONT-STYLE: italic; POSITION: absolute; TOP: 265px; HEIGHT: 50px
}
#container_left A.gallery:hover SPAN:first-line {
	FONT-WEIGHT: bold; FONT-SIZE: 1.1em; COLOR: #000; FONT-STYLE: normal
}
#container_left A.gallery:active {
	BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid
}
#container_left A.gallery:unknown {
	BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid
}
#container_left A.gallery:active EM {
	BORDER-RIGHT: #3d330f 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #3d330f 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: 180px; PADDING-BOTTOM: 5px; BORDER-LEFT: #3d330f 1px solid; WIDTH: 402px; COLOR: #000; PADDING-TOP: 5px; BORDER-BOTTOM: #3d330f 1px solid; POSITION: absolute; TOP: 5px; HEIGHT: 250px
}
#container_left A.gallery:unknown EM {
	BORDER-RIGHT: #3d330f 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #3d330f 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: 180px; PADDING-BOTTOM: 5px; BORDER-LEFT: #3d330f 1px solid; WIDTH: 402px; COLOR: #000; PADDING-TOP: 5px; BORDER-BOTTOM: #3d330f 1px solid; POSITION: absolute; TOP: 5px; HEIGHT: 250px
}
#container_left H1 {
	CLEAR: both; PADDING-LEFT: 250px; FONT-WEIGHT: normal; FONT-SIZE: 3em; MARGIN: 0px; WIDTH: 300px; COLOR: #fff; PADDING-TOP: 80px; FONT-FAMILY: georgia, "times new roman", serif; TEXT-ALIGN: center
}
#container_left H1 EM {
	FONT-SIZE: 0.6em; COLOR: #000
}
#container_right {
	BORDER-RIGHT: #a49188 1px solid; BORDER-TOP: #a49188 1px solid; BACKGROUND: #C4E1A7; MARGIN: 1em auto; BORDER-LEFT: #a49188 1px solid; WIDTH: 600px; BORDER-BOTTOM: #a49188 1px solid; POSITION: relative; HEIGHT: 305px
}
#container_right IMG {
	BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
#container_right #thumbs {
	RIGHT: 0px; WIDTH: 170px; POSITION: absolute; TOP: 0px
}
#container_right A.gallery:hover SPAN {
	PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 100; LEFT: -430px; PADDING-BOTTOM: 5px; WIDTH: 402px; COLOR: #fff; PADDING-TOP: 5px; FONT-STYLE: italic; POSITION: absolute; TOP: 265px; HEIGHT: 50px
}
#container_right A.gallery:hover SPAN:first-line {
	FONT-WEIGHT: bold; FONT-SIZE: 1.1em; COLOR: #000; FONT-STYLE: normal
}
#container_right A.gallery:active {
	BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid
}
#container_right A.gallery:unknown {
	BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid
}
#container_right A.gallery:active EM {
	BORDER-RIGHT: #3d330f 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #3d330f 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: -425px; PADDING-BOTTOM: 5px; BORDER-LEFT: #3d330f 1px solid; WIDTH: 402px; COLOR: #000; PADDING-TOP: 5px; BORDER-BOTTOM: #3d330f 1px solid; POSITION: absolute; TOP: 5px; HEIGHT: 250px
}
#container_right A.gallery:unknown EM {
	BORDER-RIGHT: #3d330f 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #3d330f 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: -425px; PADDING-BOTTOM: 5px; BORDER-LEFT: #3d330f 1px solid; WIDTH: 402px; COLOR: #000; PADDING-TOP: 5px; BORDER-BOTTOM: #3d330f 1px solid; POSITION: absolute; TOP: 5px; HEIGHT: 250px
}
#container_right H1 {
	CLEAR: both; PADDING-LEFT: 50px; FONT-WEIGHT: normal; FONT-SIZE: 3em; MARGIN: 0px; WIDTH: 300px; COLOR: #fff; PADDING-TOP: 80px; FONT-FAMILY: georgia, "times new roman", serif; TEXT-ALIGN: center
}
#container_right H1 EM {
	FONT-SIZE: 0.6em; COLOR: #000
}
</STYLE>

Alles anzeigen

Dann folgt die Galerie in einer Tabelle mit den nächsten Abfragen!

Code

<table border="0" cellspacing="0" cellpadding="0" class="tabelle">
  <tr> 
    <td class="tabelle1"></td>
  </tr>
  <tr> 
    <td class="tabelle2"> Katzengalerie --&gt; <? echo "$kategorie" ?></td>
  </tr>
  <tr> 
    <td valign="top" class="tabelle3">
<center>
        <DIV id=container_top> 
          <DIV id=thumbs> <A class="gallery slidea" href="#nogo"> [i]<IMG title="<? echo "$kategorie" ?>" alt="<? echo "$kategorie" ?>" src="images/galerie/<? echo "$bild" ?>">[/i] 
            <SPAN>Name der Katze / Geschlecht /Sonstiges


            Name des Besitzers / E-Mail /URL Sonstiges</SPAN></A> <A class="gallery slideb" 
href="#nogo"> [i]<IMG title="<? echo "$kategorie" ?>" alt="<? echo "$kategorie" ?>" src="images/galerie/<? echo "$bild" ?>">[/i] 
            <SPAN>Name der Katze / Geschlecht /Sonstiges


            Name des Besitzers / E-Mail /URL Sonstiges</SPAN></A> <A class="gallery slidec" href="#nogo"> 
            [i][img]images/galerie/pic3.jpg[/img][/i] 
            <SPAN>Name der Katze / Geschlecht /Sonstiges


            Name des Besitzers / E-Mail /URL Sonstiges</SPAN></A> <A class="gallery slided" href="#nogo"> 
            [i][img]images/galerie/pic4.jpg[/img][/i] 
            <SPAN>Name der Katze / Geschlecht /Sonstiges


            Name des Besitzers / E-Mail /URL Sonstiges</SPAN></A> <A class="gallery slidee" href="#nogo"> 
            [i][img]images/galerie/pic5.jpg[/img][/i] 
            <SPAN>Name der Katze / Geschlecht /Sonstiges


            Name des Besitzers / E-Mail /URL Sonstiges</SPAN></A> <A class="gallery slidef" href="#nogo"> 
            [i][img]images/galerie/pic6.jpg[/img][/i] 
            <SPAN>Name der Katze / Geschlecht /Sonstiges


            Name des Besitzers / E-Mail /URL Sonstiges</SPAN></A> <A class="gallery slideg" href="#nogo"> 
            [i][img]images/galerie/pic7.jpg[/img][/i] 
            <SPAN>Name der Katze / Geschlecht /Sonstiges


            Name des Besitzers / E-Mail /URL Sonstiges</SPAN></A> <A class="gallery slideh" href="#nogo"> 
            [i][img]images/galerie/pic8.jpg[/img][/i] 
            <SPAN>Name der Katze / Geschlecht /Sonstiges


            Name des Besitzers / E-Mail /URL Sonstiges</SPAN></A> <A class="gallery slidei" href="#nogo"> 
            [i][img]images/galerie/pic9.jpg[/img][/i] 
            <SPAN>Name der Katze / Geschlecht /Sonstiges


            Name des Besitzers / E-Mail /URL Sonstiges</SPAN></A> <A class="gallery slidej" href="#nogo"> 
            [i][img]images/galerie/pic10.jpg[/img][/i] 
            <SPAN>Name der Katze / Geschlecht /Sonstiges


            Name des Besitzers / E-Mail /URL Sonstiges</SPAN></A> </DIV>
          <DIV id=text> 
            <H1 id=subject>Galerie


              [i]of[/i]


              Cats</H1>
          </DIV>
        </DIV>
</center>
</td>
  </tr>
  <tr> 
    <td colspan="3" class="tabelle4"></td>
  </tr>
</table>

Alles anzeigen

Und dann derAbschluß mit einem zusätzlichen Code ( nächste Seite Code), der aber hier unwichtig ist!

Code

<?
}
$pagebreak .= '<table align=center width="90%" height="40"><tr>';   
if($x!="0")
$pagebreak .= '<td align="left">[url=''.$PHP_SELF.'?jump='.$jump.'&galerie=Besuchergalerie='.$galerie.'&kategorie='.$kategorie.'&x='.($x-$def).'&y='.($y-$def).'']letzten '.$def.'[/url]</td>';
if($anz>$y)
$pagebreak .= '<td align="right">[url=''.$PHP_SELF.'?jump='.$jump.'&galerie=Besuchergalerie='.$galerie.'&kategorie='.$kategorie.'&x='.($def+$x).'&y='.($def+$y).'']nächsten '.$def.'[/url]</td>';
$pagebreak .= '</tr></table>';
echo $pagebreak;
}
 ?>

Alles anzeigen

Wie kann ich das nun umbauen, so das die Galerie nur einmal erscheint und nicht pro Bild eine Neue erscheint???????

Bitte helft mir, ich verzweifel daran!

Tags