Bildergalerie + Schatten an die Bilder????????????

[alpi]

gibt es eigentlich ein Bildergalerie-modul, welches an die Bilder sonen Schatten mact, wie hier zu sehen?


Oder falls es nicht so ein Modul gibt, ist es möglich das mit gd2 zu realisieren?[/img]

[casi1969]

Ja, habe die Bildergalerie von Large Green Wood dafür ein bisschen erweitert.

Die entsprechenden Grafiken (rand_01.jpg bis rand_09.jpg, foreward.gif, back.gif) kannst Du Dir unter http://test.wildwechsel.de/wgw2/front_c ... 5&idcat=42 runterladen und Deinen Wünschen anpassen.

Der Input bleibt gleich, der Output unten.

Grüße Carsten

Code: Alles auswählen

<? 

// Bildergalerie 
// Imageresize der Thumbs über ImageMagick *ODER* GD 
// Wasserzeichen einbauen und große Bilder in gleiche Größen verkleinern 
// Version: 17.07.2004 
// 
// Author: Large Green Wood vgl. http://www.contenido.de/front_dev/upload/1ImageGal.txt 
// Modified by: Robert Strouhal www.clearcreative.de 
// Modified by: Daniel Buhmann www.cyberdan.de 
// Modified by: Elias Müller 
// Modified by: Carsten Peters www.carsten-peters.net




echo "<p>\n"; 

// ANFANG OUTPUT 

$openin="CMS_VALUE[0]"; 
$types="CMS_VALUE[4]"; 
$imagedir="CMS_VALUE[2]"; 
$thumbnails="CMS_VALUE[3]"; 
$imagetypes=explode(";","CMS_VALUE[4]"); 
$rows="CMS_VALUE[6]"; 
$cols="CMS_VALUE[5]"; 

$thb_x_size="CMS_VALUE[7]"; 
$thb_y_size="CMS_VALUE[8]"; 

$image_idcat="CMS_VALUE[0]"; 
$image_idside="CMS_VALUE[1]"; 

$im_path="CMS_VALUE[9]"; 

//-- config ende ------------------------------------- 

// gehört die Datei zu den definierten Dateitypen? 
function is_image($filename,$typearray) { 
reset($typearray); 
while($val=each($typearray)) { 
if (strstr($filename,$val[value])!==false) { 
return true; 
} 
} 
} 


// verkleinert ein Bild auf die angegebene Breite (bei Querformat) oder Höhe (bei Hochformat) 
// Seitenverhältnisse werden beibehalten 
function resizeImageGD($sourceFile, $targetFile, $newwidth=50, $newheight=50){ 
$source = ImageCreateFromJpeg($sourceFile); 
$width = ImageSx($source); 
$height = ImageSy($source); 

if ($width > $height){ // Querformat 
$newheight = $height*($newwidth/$width); 
}else{ // Hochformat 
$newwidth = $width*($newheight/$height); 
} 

$target = ImageCreateTrueColor($newwidth,$newheight); 
// ÄNDERUNG vgl. Forums-Beitrag imagecopyresized ($target, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height); 
imagecopyresampled ($target, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height); 

ImageJPEG($target,$targetFile,100); 
} 



//-- functions ende ---------------------------------- 

if (!isset($mmstart)) { 
$mmstart=0; 
} 

// Bilder aus Verzeichnis auslesen 

$handle=opendir($imagedir); 

$n=0; 
$filearray=Array(); 
while (false !== ($file = readdir($handle))) { 
if ($file != "." && $file != ".." && is_image($file,$imagetypes)) { 
$filearray[]=$file; 
} 
} 

reset($filearray); 
natcasesort($filearray); 

// Anzeige eines Bildes oder Übersicht? 

if ($subfile!="") { 
// Bildbeschreibung auslesen 

$db_dir = ereg_replace ("upload/", "", $imagedir); 
$db = new DB_Contenido; 

$sql = "SELECT 
description 
FROM 
".$cfg["tab"]["upl"]." 
WHERE 
dirname = '$db_dir' AND 
filename = '$thisfile'"; 

$db->query($sql); 
$db->next_record(); 
$description = $db->f("description"); 

// Ausgabe der "vor"- und "zurück"-Links, wenn nötig 
$piccount = count($filearray); 
$x = 0; 
for ($x=0;$x<$piccount;$x++) { 

if (current($filearray) == $thisfile && $x > 0) { 
$file = prev($filearray); 
$url=$sess->url("front_content.php?client=$client&lang=$lang&subid=$subid&idcat=$idcat&idart=$idart&thisfile=$file&subfile=".rawurlencode($imagedir."/".$file)); 
$back = "<a href=\"$url\"><img src=\"images/back.gif\" border=\"0\" align=\"absmiddle\">zurück</a>"; 
next($filearray); 
} 
if (current($filearray) == $thisfile && $x+1 < $piccount) { 
$file = next($filearray); 
$url=$sess->url("front_content.php?client=$client&lang=$lang&subid=$subid&idcat=$idcat&idart=$idart&thisfile=$file&subfile=".rawurlencode($imagedir."/".$file)); 
$forward = "<a href=\"$url\">vorwärts<img src=\"images/foreward.gif\" border=\"0\" align=\"absmiddle\"></a>"; 
prev($filearray); 
} 
next($filearray); 
} 

// Bild anzeigen 
$back_url=$sess->url("front_content.php?client=$client&lang=$lang&idcat=$idcat&idart=$idart&subid=$subid&mmstart=$mmstart"); 
echo "<div align=\"center\"><div class=\"galerie\"><table style=\"width:100%\"> 
<tr> 
<td style=\"width:33%;text-align:left;\">".$back."</td> 
<td style=\"width:33%;text-align:center;\"><a href=\"$back_url\">zur Übersicht</a></td> 
<td style=\"width:33%;text-align:right;\">".$forward."</td> 
</tr> 
</table>"; 
echo "<div class=\"gal_pic\">"; 
echo "<table width=\"1\" height=\"1\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td><img src=\"images/rand_01.jpg\" width=\"6\" height=\"6\"></td><td background=\"images/rand_02.jpg\"></td><td><img src=\"images/rand_03.jpg\" width=\"6\" height=\"6\"></td></tr><tr><td background=\"images/rand_04.jpg\"></td><td><img src=\"$subfile\"></td><td background=\"images/rand_06.jpg\"></td></tr><tr><td><img src=\"images/rand_07.jpg\" width=\"6\" height=\"6\"></td><td background=\"images/rand_08.jpg\"></td><td><img src=\"images/rand_09.jpg\" width=\"6\" height=\"6\"></td></tr></table>"; 
echo "<br>"; 
echo $description."</div>"; 
echo "<table style=\"width:100%\"> 
<tr> 
<td style=\"width:33%;text-align:left;\">".$back."</td> 
<td style=\"width:33%;text-align:center;\"><a href=\"$back_url\">zur Übersicht</a></td> 
<td style=\"width:33%;text-align:right;\">".$forward."</td> 
</tr> 
</table></div></div>"; 

} else { 
// Gallery anzeigen 

// Script für zentriertes Pop-Up mit den Maßen des Bildes 
echo "<script language=\"javascript\"> 
var Fenster = null; 
function neuesFenster(meineSeite,meinName,w,h,scroll){ 
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0; 
TopPosition = (screen.height) ? (screen.height-h)/2-30 : 0; 
settings = 
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable' 
Fenster = window.open(meineSeite,meinName,settings) 
} 
</script>\n"; 

echo "<div align=\"center\"><table class=\"galerie\">"; 

// skip images... 
for ($n=0;$n<$mmstart;$n++) 
$ffile=each($filearray); 
$n=0; 
while ($ffile=each($filearray)) { 
$file=$ffile[value]; 
// generate thumbnail, if nessesairy. Now THIS is fun  
// natuerlich nur, wenn imagemagick vorhanden ist... 
if (!file_exists($thumbnails."/thb_".$file) ) { 
if ($im_path!="") { 
$cmd=$im_path."/convert -scale ".$thb_x_size."x".$thb_y_size." ".$imagedir."/".$file." ".$thumbnails."/thb_".$file; 

exec($cmd); 
// nochmal prüfen! 
$thumbnail=file_exists($thumbnails."/thb_".$file); 
} else{ 
// Thumbnails mit GD verkleinern 
@ini_set("max_execution_time", 120); 
@resizeImageGD($imagedir."/".$file, $thumbnails."/thb_".$file, $thb_x_size,$thb_y_size); 
$thumbnail=file_exists($thumbnails."/thb_".$file); 
} 
//Wasserzeichen einbauen und Bilder auf 500 Pixel Höhe oder Breite verkleinern 
$size = getimagesize($imagedir."/".$file); 
$width_old = $size[0]; 
$height_old = $size[1]; 
if ($width_old > 500 OR $height_old > 500) { 
$old_picture = imagecreatefromjpeg($imagedir."/".$file); 
if ($width_old > $height_old) { 
$width_new = 500; 
$height_new = intval($height_old * $width_new / $width_old); 
} 
else { 
$height_new = 500; 
$width_new = intval($width_old * $height_new / $height_old); 
} 
$new_picture = imagecreatetruecolor($width_new, $height_new); 
imagecopyresampled($new_picture, $old_picture, 0, 0, 0, 0, $width_new, $height_new, $width_old, $height_old); 
} 
$transition = 40; 
$watermarkfile = imagecreatefrompng('images/wasserzeichen.png'); 
$watermarkpic_width = imagesx($watermarkfile); 
$watermarkpic_height = imagesy($watermarkfile); 
$watermarkdest_x = $width_new / 2 - ($watermarkpic_width / 2); 
$watermarkdest_y = $height_new / 2 - ($watermarkpic_height / 2); 
imagecopymerge($new_picture, $watermarkfile, $watermarkdest_x, $watermarkdest_y, 0, 0, $watermarkpic_width, $watermarkpic_height, $transition); 
imagejpeg($new_picture, $imagedir."/".$file, 100); 
} else 
$thumbnail=true; 
if ($n%$cols==0) 
echo "<tr class=\"galerie\">\n"; 

if ($openin == "popup") { 
echo "<td class=\"galerie\" style=\"width:$thb_x_size;height:$thb_y_size\"><table width=\"1\" height=\"1\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td><img src=\"images/rand_01.jpg\" width=\"6\" height=\"6\"></td><td background=\"images/rand_02.jpg\"></td><td><img src=\"images/rand_03.jpg\" width=\"6\" height=\"6\"></td></tr><tr><td background=\"images/rand_04.jpg\"></td><td><a href=\"{$cfgClient[$client]["path"]["htmlpath"]}popupviewer.php?thisfile={$file}&imagedir={$imagedir}&imagetypes={$types}\" onClick=\"neuesFenster(this.href,'bild','400','400','yes');return false\">"; 
echo ($thumbnail ? "<img src=\"".$thumbnails."thb_$file\" border=\"0\">":"$file"); 
echo "</a></td><td background=\"images/rand_06.jpg\"></td></tr><tr><td><img src=\"images/rand_07.jpg\" width=\"6\" height=\"6\"></td><td background=\"images/rand_08.jpg\"></td><td><img src=\"images/rand_09.jpg\" width=\"6\" height=\"6\"></td></tr></table></td>\n"; 
} 

else { 
if ($image_idcat!=0) 
$url=$sess->url("front_content.php?client=$client&lang=$lang&subid=$subid&idcatart=$image_idcat&thisfile=$file&mmstart=$mmstart&subfile=".rawurlencode($imagedir."/".$file)); 
else 
$url=$sess->url("front_content.php?client=$client&lang=$lang&subid=$subid&idcat=$idcat&idart=$idart&thisfile=$file&mmstart=$mmstart&subfile=".rawurlencode($imagedir."/".$file)); 
echo "<td class=\"galerie\" style=\"width:$thb_x_size;height:$thb_y_size\"><table width=\"1\" height=\"1\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td><img src=\"images/rand_01.jpg\" width=\"6\" height=\"6\"></td><td background=\"images/rand_02.jpg\"></td><td><img src=\"images/rand_03.jpg\" width=\"6\" height=\"6\"></td></tr><tr><td background=\"images/rand_04.jpg\"></td><td><a href=\"$url\">".($thumbnail ? "<img src=\"".$thumbnails."thb_$file\" border=\"0\"></td><td background=\"images/rand_06.jpg\"></td></tr><tr><td><img src=\"images/rand_07.jpg\" width=\"6\" height=\"6\"></td><td background=\"images/rand_08.jpg\"></td><td><img src=\"images/rand_09.jpg\" width=\"6\" height=\"6\"></td></tr></table>":"$file")."</a></td>\n"; 
} 
$n++; 
if ($n%$cols==0) 
echo "</tr>\n"; 


// nur solange wie's not tut... 
if ($n>=$rows*$cols) 
break; 
} 
echo "<tr> <td colspan=\"$cols\" align=\"center\">"; 

if ($mmstart>0) { 
$url=$sess->url("front_content.php?client=$client&lang=$lang&idcat=$idcat&idart=$idart&subid=$subid&mmstart=".($mmstart-$rows*$cols)); 
echo "<a href=\"$url\"><img src=\"images/back.gif\" border=\"0\" align=\"absmiddle\">vorherige Bilder</a> "; 
} 

echo "<span class=\"galerie\">| zeige Bilder ".($mmstart+1)." - ".($mmstart+$n)." |</span>"; 

if ($n+$mmstart<count($filearray)) { 
$url=$sess->url("front_content.php?client=$client&lang=$lang&idcat=$idcat&idart=$idart&subid=$subid&mmstart=".($mmstart+$rows*$cols)); 
echo " <a href=\"$url\">weitere Bilder<img src=\"images/foreward.gif\" border=\"0\" align=\"absmiddle\"></a>"; 
} 

echo "</tr>\n"; 
echo "</table></div>"; 
} // Ende Gallery anzeigen 


echo "</p>"; 
?>

[casi1969]

Noch eleganter, einfacher und den Web Standards entsprechend geht es mit CSS.

Hier ist die Beschreibung und der CSS-Code zu finden:

Teil 1: http://www.alistapart.com/articles/cssdropshadows/;
Teil 2: http://www.alistapart.com/articles/cssdrop2/