SuperSimple Galerie

[bibi]

R2 Version!

EDIT: 22. Juli 2005 --> IE-Tauglichkeit

Hallo,

ich habe mir gerade eine super einfache Galerie für Fotos zusammengehackt.
Das Modul ist nicht für viele Bilder auf einer Seite geeignet (wg. Ladezeit) aber bestimmt für das Eine oder Andere zu mißbrauchen.

Das schöne an dem Modul ist, man packt immer nur ein Bild als Modul zu seiner Seite. Die Bilder werden der Reihe nach gestapelt.

Zusätzlich werden die Bildinformationen aus der DB geholt und mit angezeigt.

Die Bilder werden in der Übersicht verkleinert angezeigt und erst wenn man mit dem Mauszeiger über das Bild rutscht wird per CSS ein 'PopUp' mit dem großen Bild angezeigt.

Hier der Code

Eingabe

Code: Alles auswählen

REX_MEDIA_BUTTON[1]

<?php
if ("REX_FILE[1]" != ""){
 echo "<img src=$REX[HTDOCS_PATH]/files/REX_FILE[1]>";
}

?><br><br>

Ausgabe

Code: Alles auswählen

<?php
if ("REX_FILE[1]" != ""){
 // build the sql-statement and get the result
 $sql = "select * from rex_file where filename='REX_FILE[1]'";
 $GC = new sql;
 $GC->setQuery($sql);

 // walking thru the results
 for ($i=0;$i<$GC->getRows();$i++) {
  // get the picture informations
  $title = $GC->getValue("rex_file.title");
  $description = $GC->getValue("rex_file.description");
  $width = $GC->getValue("rex_file.width");
  $height = $GC->getValue("rex_file.height");

  // show the thumbnail
  echo "<div class=\"galeriethumb\">";
  echo "<a href=\"\">";
  echo "<img src=\"$REX[HTDOCS_PATH]/files/REX_FILE[1]\" width=\"80\" alt=\"$title\" />";
  echo "<span>\n";
  echo "<h3>$title</h3>\n";
  echo "<img src=\"$REX[HTDOCS_PATH]/files/REX_FILE[1]\" width=\"$width\" height=\"$height\" alt=\"$description\" />\n";
  echo "<p>$description</p>\n"; 
  echo "</span>\n";
  echo "</a>\n";
  echo "</div>\n";


  $GC->next();
 };
};

?>

CSS (bitte anpassen) jetzt auch für IE

Code: Alles auswählen

.galeriethumb {
	float: left;
	width:80px;
	padding:0;
	margin:20px;
	border:1px solid #4fa51d;
	font:bold 14px verdana, sans-serif;
}


.galeriethumb img {
	border:none;

}

.galeriethumb a {
    z-index:24;
}

.galeriethumb a:hover {
    z-index:25;
	border:0px solid #4fa51d;
}

.galeriethumb a span {
	display:none;
	z-index:25;
}


.galeriethumb a:hover span {
	display:block;
	width:350px;
	position:absolute;top:0px;right:-1px;
	border:1px dashed grey;
	padding:15px;
	font:normal 14px verdana, sans-serif;
	background-color: #ffea87;
	z-index:1;
	
}

Ich benutze das Modul unter Redaxo3 beta. Ich denke aber es funktioniert auch unter Redaxo2. Wenn nicht, bitte Bescheid geben

Gruß,
Carsten

ToDo: OOMedia

[bibi]

R3 Version!


Eingabe

Code: Alles auswählen

REX_MEDIA_BUTTON[1]

<?php
if ("REX_FILE[1]" != ""){
 echo "<img src=$REX[HTDOCS_PATH]/files/REX_FILE[1]>";
}

?><br><br>

Ausgabe

Code: Alles auswählen

<?php

if ("REX_FILE[1]" != ""){
  // get the MediaObject by filename
  $mediaObject = OOMedia::getMediaByName('REX_FILE[1]');

  // get the picture informations
  $title = $mediaObject->getTitle();
  $description = $mediaObject->getDescription();

  // show the thumbnail
  echo "<div class=\"galeriethumb\">";
  echo "<a href=\"\">";
  echo "<img src=\"$REX[HTDOCS_PATH]/files/REX_FILE[1]\" alt=\"$title\" />";
  echo "<span>\n";
  echo "<h3>$title</h3>\n";
  echo $mediaObject->toHTML();
  echo "\n<p>$description</p>\n"; 
  echo "</span>\n";
  echo "</a>\n";
  echo "</div>\n";
};

?>

CSS für IE + kleine Änderung bei dem Thumb

Code: Alles auswählen

.galeriethumb {
	float: left;
	width:80px;
	padding:0;
	margin:20px;
	border:1px solid #4fa51d;
	font:bold 14px verdana, sans-serif;
}


.galeriethumb img {
	border:none;
	width: 80px;
}

.galeriethumb a {
    z-index:24;
}

.galeriethumb a:hover {
	z-index:25;
	border:0px solid #4fa51d;
}

.galeriethumb a span {
	display:none;
	z-index:25;
}

.galeriethumb a span img {
	width:auto;
	height:auto;
}

.galeriethumb a:hover span {
	display:block;
	width:350px;
	position:absolute;top:0px;right:-1px;
	border:1px dashed grey;
	padding:15px;
	font:normal 14px verdana, sans-serif;
	background-color: #ffea87;
	z-index:1;
	
}

Da es die Klasse OOMedia nur bei Redaxo >= 3 gibt ... funzt das ganze auch nur da

Gruß,
Carsten

[Markus.Staab]

Hi Carsten,

ich hab mir erlaubt das ganze mal deutlicher zu kennzeichnen.

Gruß,
Markus