Willkommen auf dem Portal für Mediengestalter

Guide76 · Threadersteller

Hallo zusammen,

ich bastel immer selber an meiner Homepage mit Dreamweaver rum. Nun möchte ich mene Bildergallery ein bisschen umbauen. Und zwar soll bei einem Klick auf das mittlere Bild sich ein neues Fenster über den gesamten Bildschirm legen wie hier: http://www.raphael-niebel.com/gallery_advertising.html
Weiterhin sollte man dann die Bilder in dem neuen Fenster von links nach rechts navigieren können. Einfach so wie bei der o.g. Seite.

Auf meiner Seite: http://www.torsten-kleint.de/model/galerie.php?kat=lifestyle&id=./galerie/lifestyle/middle/39.JPG&img=39.JPG&seite=1

muß man auf die kleinen Bilder links klicken und dann erscheint das Bild rechts im mittelgroßen Format. Nun hätte ich es gerne, dass wenn man auf das rechte Bild klickt, sich das besagte Bild in großer Größe über den Bildschirm legt und man nun die Bilder in dem Ordner so weiter navigieren kann. Ich habe jetzt schon ewig rum gebastelt und keine Lösung gefunden.

Kann mir jemand helfen und mir nen Tip geben. Der Code für die Seite sieht so aus:
Mir ist halt auch nicht ganz klar, wie ich das schaffe. Muß ich auf der Gallerie PHP (wie beigefügt) was ändern oder in den einzelnen Bildern??

Grüße und Danke

Torsten

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Torsten Kleint Model</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript1.2" src="javascript.js" type="text/javascript"></script>
<?php
$id = $HTTP_GET_VARS["id"];
$img = $HTTP_GET_VARS["img"];
$kat = $HTTP_GET_VARS["kat"];
$seite = $_GET["seite"];
//Wenn man keine Seite angegeben hat, ist man automatisch auf Seite 1
if(!isset($seite))
{
$seite = 1;
}

$pfad_thumb = "./galerie/$kat/small/";
$pfad_middle = "./galerie/$kat/middle/";
$pfad_big = "./galerie/$kat/big/";

//Wieviele Bilder pro Seite ausgegeben werden sollen
$eintraege_pro_seite = 12;

//Ausrechen ab dem wievielten Datensatz die Bilder ausgegeben werden
$start = $seite * $eintraege_pro_seite - $eintraege_pro_seite;

// Füllen eines Arrays mit allen Inhalten des Verzeichnisses (nur .jpg + .JPG-Dateien werden akzeptiert)
$handle = opendir($pfad_thumb);
while (false !== ($datei = readdir($handle)))

{
if (ereg(".jpg",$datei) || ereg(".JPG",$datei))

{

$dateien[] = $datei;

}
}

closedir($handle);

if(!isset($id) && $seite == 1)
{
$id = "./galerie/$kat/middle/$dateien[0]";
$img = "$dateien[0]";
}

if(!isset($id) && $seite != 1)
{
$pos_array = ($seite - 1)*$eintraege_pro_seite;
$id = "./galerie/$kat/middle/$dateien[$pos_array]";
$img = "$dateien[$pos_array]";
}

//Errechnen wieviele Seiten es geben wird
$menge = count($dateien);
$wieviel_seiten = ($menge / $eintraege_pro_seite);

//Später nötig damit keine leeren Felder angezeigt werden wenn auf Seite 2 oder 3 nicht mehr die volle Bildanzahl pro Seite vorhanden ist
$bla = $start + $eintraege_pro_seite;

//wenn die maximale Anzahl der Bilder kleiner als die der möglichen angezeigten Bilder
if ($menge < $bla)
{
// $bla neu errechnen
$bla = $menge;
}
$zaehler = 0;

?>
</head>
<body>
<center>


<?php
include ("nav.php");
?>


<table width="830px" height="420px" cellpadding="0px" cellspacing="0px">
<tr>
<td>
<div style="width:348px; height:420px; background-color:#F7F7F7; border: 1px solid #A29E9E;">
<div class="title_bg" style="width:348px;">
<div class="nav_gal"><a href="galerie.php?kat=business" class="gal_url">Business</a> - <a href="galerie.php?kat=fashion" class="gal_url">Fashion</a> - <a href="galerie.php?kat=lifestyle" class="gal_url">Lifestyle</a> - <a href="galerie.php?kat=people" class="gal_url">People </a>- <a href="galerie.php?kat=sports" class="gal_url">Sports </a>- <a href="galerie.php?kat=jobs" class="gal_url">Jobs </a> </div>
</div>
<div style="height:405px; width:348px;">
<div style="padding-top:10px; text-align:center; padding-left:17px;">


<table border="0" cellpadding="2" cellspacing="3" align="left">
<tr>
<td colspan="4" align="left">
<?php
//Ausgabe der Seitenlinks:
echo "<b>Seite:</b> ";

//Ausgabe der Links zu den Seiten
for($a=0; $a < $wieviel_seiten; $a++)
{
$b = $a + 1;

//errechnet welches bild rechts angezeigt wird für die jeweilige seite
$bild_start_seite = $b * $eintraege_pro_seite - $eintraege_pro_seite + 1;

// Wenn das Bild links kleiner als 10 (z.b. *hehe*

ist muss eine "0" vor die Zahl (also 0 *hehe*

, da so die namen der Bilder auf dem Server sind
if ($bild_start_seite < 10)
{
$zahl = "0";
$bild_start_seite = $zahl.$bild_start_seite;
}

//Wenn der User sich auf dieser Seite befindet, keinen Link ausgeben
if($seite == $b)
{
echo " <b>$b</b>";
}

//Aus dieser Seite ist der User nicht, also einen Link ausgeben
else
{
echo " <a href=\"?kat=$kat&seite=$b\" class='text_url'>$b</a> ";
}

}
?>
</td>
<tr>
<?php

//Ausgabe der Bilder der einzelnen Seiten
for($i=$start; $i < $bla; $i++)
{

?>
<td>
<a href="galerie.php?kat=<?php echo ($kat);?>&id=<? echo $pfad_middle.$dateien[$i];?>&img=<?php echo ($dateien[$i]);?>&seite=<?php echo ($seite);?>"><img src="<?php echo $pfad_thumb.'/'.$dateien[$i]; ?>" border="0" width="71" height="100"></a>
</td>
<?php

$zaehler = $zaehler +1;
if($zaehler == 4 || $zaehler == 8 || $zaehler == 12)
{
echo ("</tr><tr>");
}

}
?>
</tr>
</table>

</div>
</div>
</div>
</td>
<td>
<div style="width:10px; height:420px;"></div>
</td>
<td>
<div style="width:468px; height:420px; background-color:#F7F7F7; border: 1px solid #A29E9E;">
<div class="title_bg" style="width:468px;">
<div class="title_icon"><img src="bilder/quad.gif" width="6" height="6" hspace="1px" /></div>
<div class="title">Galerie // <?php echo ($kat); ?> </div>
</div>
<div style="height:405px; width:468px;">
<div style="margin-top:10px; margin-left:15px; text-align:center;">
<a href="<? echo $pfad_big.$img;?>" target="_blank"><img src="<?php echo ($id); ?>" border="0" height="360" /></a><br />
<a href="<? echo $pfad_big.$img;?>" target="_blank" class="text_url">Hier klicken für Großansicht</a>
</div>
</div>
</div>
</td>
</tr>
<tr height="10px">
<td></td>
<td></td>
<td></td>
</tr>
</table>


<?php
include ("foot.php");
?>

</center>
</body>
</html>

Auf meiner Seite

kramsen · **Verfasst** Mo 29.08.2011 08:59 **Titel**

Eine einfache und elegante Lösung wäre das.

top · Moderator

Oder eine der Alternativen:
http://planetozh.com/projects/lightbox-clones/

Icehawk · **Verfasst** Mo 29.08.2011 09:55 **Titel**

Oder als Extension für Dreamweaver:
http://www.fourlevel.com/dreamweaver/extensions/lightbox/index.htm

Guide76 · Threadersteller

Danke für Eure Super Antworten. Aber wie gehe ich jetzt weiter vor mal für einen Laien erklärt. Ich kann mir die verschiedenen Softwares runter laden. Aber wie binde ich die in Dreamweaver ein?

Bin für jeden Tip dankbar

Grüße und Danke

Torsten

immerIch · **Verfasst** Di 30.08.2011 10:02 **Titel**

Willkommen auf dem Portal für Mediengestalter

Thema: Bild in neuem Fenster in Dreamweaver öffnen vom 29.08.2011

Bild in neuem Fenster in Dreamweaver öffnen