Problem mit Fotogalerie
Verfasst: 20.02.2005 22:23
hallo
beim programmieren einer bildergalerie ist ein problem aufgetreten.
die bilder sind in einem ordner gespeichert. die dateinamen werden aus einer datenbank gelesen. es erscheint eine thumbs bilder übersicht. wenn man nun auf die 150 x 133 großen bilder draufklickt, so wird mittels javascript function window.open() das bild in einem fenster groß dargestellt. das problem ist nun, dass die bilder eine unterschiedliche größe haben. bei javascript muss ich aber eine feste größe angeben. das daraus entstehende bild wird nun aber verzerrt. bitte um aufklärung die größenverhältnisse dynamisch wiederzugeben. hier ist der quellcode:
fotogalerie.php:
fotogalerie_body.tpl
picture_body.tpl
beim programmieren einer bildergalerie ist ein problem aufgetreten.
die bilder sind in einem ordner gespeichert. die dateinamen werden aus einer datenbank gelesen. es erscheint eine thumbs bilder übersicht. wenn man nun auf die 150 x 133 großen bilder draufklickt, so wird mittels javascript function window.open() das bild in einem fenster groß dargestellt. das problem ist nun, dass die bilder eine unterschiedliche größe haben. bei javascript muss ich aber eine feste größe angeben. das daraus entstehende bild wird nun aber verzerrt. bitte um aufklärung die größenverhältnisse dynamisch wiederzugeben. hier ist der quellcode:
fotogalerie.php:
Code: Alles auswählen
if ( isset($_GET['picture']) && !empty($picture_categorie) )
{
$template->set_filenames(array(
'body' => 'picture_body.tpl')
);
$template->assign_vars(array(
'SITENAME' => $picture_categorie,
'PAGE_TITLE' => $_GET['picture_title'],
'I_IMAGE' => '<img src="images/' . rawurlencode($picture_categorie) . '/' . rawurlencode($_GET['picture']) . '" alt="' . $_GET['picture_title'] . '" title="' . $_GET['picture_title'] . '" width="800" height="600"' )
);
$template->pparse('body');
exit;
}
$page_title = 'Fotogallerie';
include($boot_root_path . 'includes/page_header.'.$phpEx);
include($boot_root_path . 'includes/page_left.'.$phpEx);
if( !empty($picture_categorie) && !empty($_GET['picture_categorie_id']) )
{
$template->set_filenames(array(
'body' => 'fotogalerie_body.tpl')
);
$sql = "SELECT picture_content_id, picture_content_link, picture_content_title FROM " . PICTURE_CONTENT_TABLE . " WHERE picture_categorie_id='" . $_GET['picture_categorie_id'] . "'";
if ( !($result = $db->sql_query($sql)) )
{
message_die(GENERAL_ERROR, 'Could not obtain matched posts list', '', __LINE__, __FILE__, $sql);
}
while( $row = $db->sql_fetchrow($result) )
{
$template->assign_block_vars('picture_content', array(
'I_IMAGE' => '<img src="images/' . rawurlencode($picture_categorie) . '/thumbs/' . rawurlencode($row['picture_content_link']) . '" alt="' . $row['picture_content_title'] . '" title="' . $row['picture_content_title'] . '" width="150" height="113" border="0" />',
'L_IMAGE' => $row['picture_content_title'],
'U_IMAGE' => 'index.' . $phpEx . '?show=picture_gallery&picture_categorie=' . $picture_categorie . '&picture=' . rawurlencode($row['picture_content_link']) . '&picture_title=' . $row['picture_content_title'] )
);
}
$template->pparse('body');
}
fotogalerie_body.tpl
Code: Alles auswählen
<script type="text/javascript">
<!--
function MapWindow() {
window.open('', 'image', 'width=800, height=600, resizable=no, scrollbars=no, toolbar=no, status=no, menubar=no');
}
-->
</script>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<!-- BEGIN picture_content -->
<td><a href="{picture_content.U_IMAGE}" onclick="MapWindow()" target="image" title="{picture_content.L_IMAGE}">{picture_content.I_IMAGE}</a></td>
<!-- END picture_content -->
</tr>
</table>picture_body.tpl
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{S_CONTENT_DIRECTION}">
<head>
<title>{SITENAME} :: {PAGE_TITLE}</title>
<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}">
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">{I_IMAGE}</body>
</html>