• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild soll beim Klick groß werden - allerdings php mit dabei

C

Coltan

Neues Mitglied
Hallo Leute, ich bin ziemlicher Anfänger in dem Gebiet.

Ich habe mit MySQL eine Datenbank erstellt und dort verschiedene Autos eingespeichert. Mit PHP sollen auf meiner Seite alle Autos ausgegeben werden, inklusive Bild. Das sieht dann so aus:

l4vv6gcn.png



Jetzt möchte ich es gern so haben, dass wenn ich auf ein Bild klicke, mir dieses Bild in groß angezeigt wird.
Wie das passieren soll ist eigentlich egal, wäre vielleicht ganz gut, wenn sich ein neuer Tab öffnet, damit ich den einfach wieder schließen kann ohne zurück gehen zu müssen.

Mein Code sieht folgendermaßen aus:

PHP: 
<?php
require("includes/config.inc.php");
$verbindung = mysql_connect("localhost", "Coltan", "blabla")
or die("Verbindung zur Datenbank konnte nicht hergestellt werden");
mysql_select_db("automobilhandel")
or die ("Datenbank konnte nicht ausgewählt werden");
$sql = "SELECT * FROM autos WHERE Gebraucht = 'Ja'";
$result = mysql_query($sql);

echo'<table >';

echo "<thead>
<th align='center' >Bild</th>
<th align='center' >Bezeichnung</th>
<th align='center' >Preis</th>
<th align='center' >Kilometer</th>
<th align='center' >Baujahr</th>
<th align='center' >Leistung</th>
</thead>
<tbody>\n";

while($row = mysql_fetch_assoc($result))
{
echo "<tr>\n\t
<td align='center'><a href='gebrauchtwagen.php?id=$row[AutoID]'><img width='100px' height='65px' src='images/autos/$row[Bildpfad]'></td>\n\t
<td align='center'>$row[Bezeichnung]</td>\n\t
<td align='center'>$row[Preis] &euro;</td>\n\t
<td align='center'>$row[Kilometer] km</td>\n\t
<td align='center'>$row[Baujahr]</td>\n
<td align='center'>$row[Leistung]</td>\n\t
</tr>\n";
}

Ich habe bereits einiges gefunden zum vergrößern eines Bildes. Ich hab es ausprobiert, aber erhalte immer einen Syntax Error :D
 
Werbung:
Hallo,
das solltest mit ein paar CSS hinbekommen, schau mal hier...

HTML: 
<div class="foto">
<div id="gal"><a href="#"><img src="images/foto1_small.jpg" alt="Foto 1"><span><img src="images/foto1.jpg" alt="Foto 1"></span></a></div>
<div id="gal"><a href="#"><img src="images/foto2_small.jpg" alt="Foto 2"><span><img src="images/foto2.jpg" alt="Foto 2"></span></a></div>
<div id="gal"><a href="#"><img src="images/foto3_small.jpg" alt="Foto 3"><span><img src="images/foto3.jpg" alt="Foto 3"></span></a></div>
<div id="gal"><a href="#"><img src="images/foto4_small.jpg" alt="Foto 4"><span><img src="images/foto4.jpg" alt="Foto 4"></span></a></div>
</div>

und hier die Styles...

Code: 
.foto {position:absolute; margin-top:115px;}
.foto img { border:#000000 solid 1px; color:#CCCCCC;}
#gal {float:left; margin-left:10px; width:147px;    }
#gal a {text-decoration:none; display:block;}
#gal a:hover {color:black;}
#gal a span {display:none;}
#gal a:hover span {position:fixed; top:25px; right:25px; z-index:3; display:block;}
 
Werbung:
Jetzt möchte ich es gern so haben, dass wenn ich auf ein Bild klicke, mir dieses Bild in groß angezeigt wird.
Wie das passieren soll ist eigentlich egal, wäre vielleicht ganz gut, wenn sich ein neuer Tab öffnet, damit ich den einfach wieder schließen kann ohne zurück gehen zu müssen.
Zum Vergrößern anklicken....

Wieso nicht lieber etwas in Art von Lightbox? Ein großes Bild, welches sich über der aktuellen Seite öffnet und beim Klicken auf ein Symbol wieder schließt.

Bau dir eine JS-Function (ich würde jQuery nehmen), die beim Klick auf das kleine Bild, dessen src Attribut ausliest, einen Div-Container erzeugt und darin ein <img /> Tag anlegt. Oben rechts kommt ein kleines Symbol hin, welches das Div wieder aus dem DOM löscht. Den Container kannst du im CSS mit position: absolute mittig über der Seite platzieren.
 
Habe es vorhin auch schon mit Lightbox 2 probiert, wurde aus dem "How to use it" aber nicht schlau, und das was du da geschrieben hast, verstehe ich leider auch nicht :D
 
Coltan schrieb:
"How to use it" aber nicht schlau
Zum Vergrößern anklicken....
Wieso nicht? Da ist doch nix schwieriges dran. Die drei Zeilen in den Header

Code: 
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
Und die Images so in den HTML-Codeschreiben:
Code: 
<a href="http://www.html.de/images/imagegross1.jpg" rel="lightbox[roadtrip]">img_klein1.jpg</a>
<a href="http://www.html.de/images/imagegross2.jpg" rel="lightbox[roadtrip]">img_klein2.jpg</a>
<a href="http://www.html.de/images/imagegross3.jpg" rel="lightbox[roadtrip]">img_klein3.jpg</a>
Das ist schon alles!!!
 
Werbung:
Na, das mit der Lightbox sollte doch zu machen sein. Beschreib doch mal, wo Du Probleme beim Verständnis des "How to use it" hast. Wenn Du versuchst, es selber zu bauen, ist es mit Sichernheit viel komplizierter.
 
bdt600 schrieb:
Wieso nicht? Da ist doch nix schwieriges dran. Die drei Zeilen in den Header

Code: 
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
Und die Images so in den HTML-Codeschreiben:
Code: 
<a href="http://www.html.de/images/imagegross1.jpg" rel="lightbox[roadtrip]">img_klein1.jpg</a>
<a href="http://www.html.de/images/imagegross2.jpg" rel="lightbox[roadtrip]">img_klein2.jpg</a>
<a href="http://www.html.de/images/imagegross3.jpg" rel="lightbox[roadtrip]">img_klein3.jpg</a>
Das ist schon alles!!!
Zum Vergrößern anklicken....

Ok die 3 Zeilen habe ich oben in meine php Datei reingeschrieben.

Soll ich jetzt den anderne Code hier rein schreiben?

PHP: 
while($row = mysql_fetch_assoc($result))
{
echo "<tr>\n\t
<td align='center'><a href='gebrauchtwagen.php?id=$row[AutoID]'><img width='100px' height='65px' src='images/autos/$row[Bildpfad]'></td>\n\t

Guckt doch mal wie das aussieht, da ist ja nicht nur einfach ein Bild an irgendeiner Stelle, der lädt den Bildpfad bzw die Datei immer erst aus der Datenbank.
 
Alles klar, funktioniert, danke :)

Allerdings ist nun die Schriftgröße IN der Tabelle größer, sobald ich diese 3 Zeilen oben eingebe

PHP: 
<script src="js/jquery-1.7.2.min.js"></script> <script src="js/lightbox.js"></script> <link href="css/lightbox.css" rel="stylesheet" />

Das versaut natürlich alles.. woran liegt es?
 
Zuletzt bearbeitet:
Werbung:
Wenn der Bildschirm dunkel wird, ist das schon mal ein gutes Zeichen, weil dann das Lightbox-Skript aktiv wird. Dann würde ich ein Problem mit dem Pfad des Bildes vermuten. Funktioniert denn die Verlinkung ohne Lightbox? Könnte natürlich auch sein, dass Lightbox ein Problem mit solch einem Bild hat, was von einer PHP-Seite generiert wird.
PS: Mein Wissen von PHP ist leider gering. Was liefert denn der PHP-Link, direkt ein Bild oder eine HTML-Seite mit dem Bild?
 
Zuletzt bearbeitet von einem Moderator:
Du kannst nicht den Link auf gebrauchtwagen.php legen, da muss der passende Link zum größeren Bild hin
 
Funktioniert :)

s9zsa2oo.png



Die Schriftgröße der Tabelle hat sich allerdings verändert, wenn ich diese 3 Dateien ganz oben einbinde

PHP: 
<script src="js/jquery-1.7.2.min.js">
</script> <script src="js/lightbox.js">
</script> <link href="css/lightbox.css" rel="stylesheet" />

Woran liegt das? Ich hab diese 3 Dateien bereits nach font-size durchgesucht aber es hat sich nix verändert

gpfpkxn2.png
 
Werbung:
Coltan schrieb:
Habe es vorhin auch schon mit Lightbox 2 probiert, wurde aus dem "How to use it" aber nicht schlau, und das was du da geschrieben hast, verstehe ich leider auch nicht :D
Zum Vergrößern anklicken....

Das ist doch ganz einfach. Du tauschst das kleine (img_1-klein.jpg) gegen ein großes (img_1-gross.jpg) Bild und gibst das in einem neuen Div-Container aus.

HTML: 
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="bilder">
        <img src="img_1-klein.jpg" alt="" /> 
</div>
</body>
<script type="text/javascript">
	$('#bilder img').click(function() {
		var largePic = $(this).attr('src').split("-");
		largePic = largePic[0] + '-gross.jpg';
		$('<div id="large_pic"><p id="remove"></p><img src="'+ largePic +'" alt="'+ largePic +'"/><p></p></div>').appendTo('body');
	});

	$('#remove').click(function() {
		$('#largePic').remove();
	});
</script>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben