viewer

jhaustein
hallo gemeinschaft


habe vor einiger zeit etwas gesehen - doch leider nicht gemerkt

ich suche nach einem script, was folgendes kann

in der mitte war ein platzhalter für ein bild und aussen um diesen platzhalter waren kleiner bilder angeordnet - wenn ich nun mit der maus über diese bilder gehe, dann erscheinen sie vergrößert in der mitte

habt ihr vielleicht so ein ding

gruss
jörg
tkshorty
erst alle bilder als image einlesen inder form:
code:
1:
2:
bild1 = new Image();
bild1.src = "hallo.jpg";     

dann hier die funktion
code:
1:
2:
3:
function bildwechsel(bild) {
 window.document.images[5].src = bild.src;

die 5 natürlich durch die nummer des bildes erstzen das in der mitte ist.gezählt werden alle bilder auf der seite angefangen bei 0
und zu guter letzt bei jedem bild das mit reinschreiben:
code:
1:
onmouseover="bildwechsel(bild1)"

bild1 wird jeweils durch den namen ersetzt den du durch new Image festgelegt hast. in der mitte must du natürlich ein standart bild festlegen wenns nur ein platzhalter sein soll nimm einfach ein transparentes gif.
hoffe ich konnt dir helfen
tkshorty
auch wenn n bisschen spät kommt hier is noch mal ein ausführliches beispiel:
hoffe das hilft dir mehr
code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
<script language="JavaScript">
<!--
bild1 = new Image();
bild1.src = "hallo.jpg";
bild2 = new Image();
bild2.src = "juhu.jpg";
bild3 = new Image();
bild3.src = "ne.jpg";
bild4 = new Image();
bild4.src = "doch.jpg";

function bildwechsel(bild) {
 window.document.images[2].src = bild.src;

}

//-->
</script>

<body>

<table >
<tr>
 <td><img src="hallo.jpg" onmouseover="bildwechsel(bild1)"
> </td>
 <td> </td>
 <td> <img src="juhu.jpg" onmouseover="bildwechsel(bild2)"
></td>
</tr>
<tr>
 <td> </td>
 <td><img src="blank.jpg" width="250"> </td>
 <td><img src="ne.jpg" onmouseover="bildwechsel(bild3)"
></td>
</tr>
<tr>
 <td> </td>
 <td><img src="doch.jpg" onmouseover="bildwechsel(bild4)"
> </td>
 <td> </td>
</tr>
</table>

</body>
tkshorty
so und hier für deine frage mit der "pic of the day" sache:

erst ne tabelle in sql machen die aufgebaut ist:

Datum Bild
---------------------------------------------
14.07.2004 hallo.jpg
13.07.2004 tja.jpg

dann die mit php die daten der 5 letzten tage in die variablen
$pod_datum[$i] und pod[$i] einlesen. und dann n code in der art:

php:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
<script language="JavaScript">
<!--
bild1 = new Image();
bild1.src = "hallo.jpg";
bild2 = new Image();
bild2.src = "juhu.jpg";


<?php
  for($i=0;$i<5;$i++)
  {
    echo "pod".$i."=new Image();\npod".$i.".src=\"".$pod[$i]."\";\n";
  }
?>
//ergibt:
//pod0 = new Image();
//pod0.src = "hallo.jpg";


function bildwechsel(bild) {
 window.document.images[2].src = bild.src;

}

//-->
</script>

<body>

<table >
<tr>

 <td><img src="hallo.jpg" onmouseover="bildwechsel(bild1)"> </td>
 <td></td>
 <td> <img src="juhu.jpg" onmouseover="bildwechsel(bild2)"></td>
</tr>
<tr>
 <td> </td>
 <td><img src="blank.jpg" width="250"> <br>
   <?php for($i=0;$i<5;$i++)
         {
           echo "<a href=\"#\" onclick=\"bildwechsel(pod".$i.")\">".pod_datum[$i]."</a>&nbsp;\n";
         }
   ?>
//   ergibt:
// <a href="#" onclick="bildwechsel(pod0)">14.07.2004</a>
jhaustein
mhh - danke dir erstmal - nimmt er nicht bei deinem script immer die gleichen 5 bilder?
jhaustein
wie würdest du denn jetzt die bilder aus der db aufrufen

gruss
jörg
jhaustein
ich bekomm das irgendwie nicht hin - kannst du nochmal schaun

gruss
jörg
tkshorty
der nimmt nich immer die gleichen bilder da du immer nur die relevanten aus der datenbank holst.
die bilder stehen auch nicht in der datenbank sondern nur der pfad zu den bildern z.B. ./grafiken/bilder/hallo.jpg oder halt das wo du die hast.
so hier die sql abfrage:

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
  $data=mysql_query("select datum, bild from pic_of_day where
                  datum<=current_date and datum>=(current_date-5Tage)
                  order by datum
             ");
  while ($data2=mysql_fetch_object($data))
  {
     $pod[$a]=$data2->bild;
     $pod_datum[$a]=$data2->datum;
     $a++;
   }


Das minus fünf tage natürlich durch die richtige datumsfunktion ersetzen. ich guck aber noch mal nach wie die geht
tkshorty
so ich hab dir das noch mal mit variabler anzahl der bilder für jeden tag gemacht
php:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
<?php

$dbconnect=mysql_connect("localhost");
mysql_select_db("test");

echo "<script language=\"JavaScript\">\n<!--\n\n";

  $data=mysql_query("select datum,bild,bild_nr from pic_of_day where
                  datum<=current_date
                  order by datum,bild_nr
             ");
  $a=0;
  $b=0;
  while ($data2=mysql_fetch_object($data))
  {
     $pod[$b][$a]=$data2->bild;
     $pod_datum[$b][$a]=$data2->datum;
     $pod_nr[$b][$a]=$data->bild_nr;
     $c[$b]=$a;
     $a++;
     if(($a-1)!=0)
     {
       if ($pod_datum[$b][$a]!=$pod_datum[$b][($a-1)])
       {$b++; $a=0;}
     }
   }

  for($i=0;$i<=$b;$i++)
  {
    for($j=0;$j<=$c[$i];$j++)
    {
      echo "pod".$i."_".$j."=new Image();\npod".$i."_".$j.".src=\"".$pod[$i][$j]."\";\n";
    }
  }
?>

bild1 = new Image();
bild1.src = "hallo.jpg";
bild2 = new Image();
bild2.src = "juhu.jpg";

function bildwechsel(bild) {
 window.document.images[2].src = bild.src;

}

//-->
</script>

<body>

<table >
<tr>

 <td><img src="hallo.jpg" onmouseover="bildwechsel(bild1)"> </td>
 <td></td>
 <td> <img src="juhu.jpg" onmouseover="bildwechsel(bild2)"></td>
</tr>
<tr>
 <td> </td>
 <td><img src="blank.jpg" width="250"> <br>
<?php
for($i=0;$i<=$b;$i++)
{
  if($i!=0)
  {echo "<br>";}
  echo $pod_datum[$i][0]." Bild Nr. \n";
  for($j=0;$j<=$c[$i];$j++)
  {
    echo "&nbsp;<a href=\"#\" onclick=\"bildwechsel(pod".$i."_".$j.")\">-".$j."-</a>&nbsp;\n";
  }
}
?>
 </td>
</tr>
</table>
</body>
jhaustein
geht bei mir leider nicht - im mom ist keine datumsangabe mehr da und es steht eine 0 da

wenn ich au die klicke kommt unter der text fehle auf der seite


dass steht im quelltext
<b>Warning</b>: mysql_fetch_object(): supplied argument is not a valid MySQL result resource in <b>C:\download\xampp\htdocs\pod\test1.php</b> on line <b>14</b><br />
tkshorty
hast du auch die spalte bild_nr in deine tabelle eingfügt und mit nummern aufgefüllt? achja und halt wieder dein connect und db_select angleichen
jhaustein
hab ich

im quelltext kommt immer noch dieser fehler
<b>Warning</b>: mysql_fetch_object(): supplied argument is not a valid MySQL result resource in <b>C:\download\xampp\htdocs\pod\test1.php</b> on line <b>14</b><br />
jhaustein
ich meinte eigentlich das alte script - nur das dann mehrere bilder des gleichen tages untereinander stehen könnten - geht das
tkshorty
dafür brauchst du halt die zusätzliche spalte und das abgeänderte script

bei mir sieht das dann so aus:

2004-05-06 Bild Nr. -0- -1- -2- -3-
2004-07-12 Bild Nr. -0- -1-
jhaustein
würde es auch gehen, dass alle bilder zu diesem tag dann untereinander stehen ? das wäre dann ganz gross
tkshorty
klar du musst nur das letzte &nbsp; in der zeile wo der link ausgegeben wird in ein <br> umwandeln und wenn du anstatt des namens die nummer willst einfach das $j durch $pod[$i][$j] ersetzst. aber das is jetzt ja alles nur noch n bisschen rumsielen mit php/html
klappts denn jetzt?
jhaustein
das ding klappt super bis auf diese spielereien - habe das schon probiert leider ohne den supererfolg - vielleicht klappts ja gleich
jhaustein
ich meinte es so, dass die datumsangaben links stehen und wenn ich nun auf ein datum klicke, dann kommen alle bilder des tages
tkshorty
mach doch mal mit html so wie du es gern hättest und schick mir dann n screenshot zu. aber bitte noch beschriften was dann die bilder de s tages sind usw.
tkshorty
so habs fertig ist zwar n großteil php aber das macht ja nix


bildgalerie2.php
php:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
<?php

$dbconnect=mysql_connect("localhost");
mysql_select_db("test");

echo "<script language=\"JavaScript\">\n<!--\n\n";

  $data=mysql_query("select datum,bild,current_date from pic_of_day where
                  datum<=current_date
                  order by datum desc
             ");
  $a=0;
  $b=0;
  $pod_datum[0]="";
  while ($data2=mysql_fetch_object($data))
  {
     if(!$datum)
     {$datum=$data2->current_date;}
     $pod[$a]=$data2->bild;
     $pod_datum1=$data2->datum;
     if(!(in_array($pod_datum1,$pod_datum)))
     {$pod_datum[$b]=$pod_datum1$b++;}
     if($datum==$pod_datum[($b-1)])
     {
       $a++;
     }
   }

  for($i=0;$i<$a;$i++)
  {
    echo "pod".$i."=new Image();\npod".$i.".src=\"".$pod[$i]."\";\n";
  }
?>

function bildwechsel(bild)
{
 pos=0;
 window.document.images[pos].src = bild.src;
}

//-->
</script>

<body>

<table border="1">
<tr>

 <td valign="top">
<?php
for($i=0;$i<=$b;$i++)
{
  echo "<a href=\"bildgalerie2.php?datum=".$pod_datum[$i]."\">".$pod_datum[$i]."</a><br>\n";
}
?>
 </td>
 <td valign="top"><img src="blank.gif" width="250" height="250"></td>
 <td>
<?php
for ($i=0;$i<$a;$i++)
{
  echo"<img src=\"".$pod[$i]."\" onmouseover=\"bildwechsel(pod".$i.")\" width=\"100\"><br>\n";
}
?>
 </td>
</tr>
</table>
</body>


kannst dann auch wieder die bild_nr spalte aus der tabelle löschen