Bildergalerie mit vor und zurück bei Bildanzeige ?!

JSommer · Beitrag von **JSommer** » Mo 30. Jan 2006, 19:23

Hat das schon jemand geschafft:

Wenn man ein Bild mit der Bildergalerie anschaut, hätte ich gerne einen vor und zurück Link zum nächsten bzw. letzten Bild, so dass man nicht immer wieder auf die Übersicht zurück muss ... gibts da schon ne Lösung? wäre cool!

Jürgen

Beitrag von **emergence** » Mo 30. Jan 2006, 20:16

sollte das können
-> http://contenido.org/forum/viewtopic.php?t=6157

JSommer · Beitrag von **JSommer** » Di 31. Jan 2006, 22:27

nicht so ganz das, was ich suche ... so ein weiter und zurück link in der bildansicht würde schon genügen :-/ ... keiner eine ahnung?!

rezeptionist · Beitrag von **rezeptionist** » Di 31. Jan 2006, 22:30

Jetzt nur mal zum Verständniss also du willst eine Galerie die auf der Startseite eine Übersicht hat und wenn man auf das entsprechende Bild klickt das bild in Groß erscheint und du 2 links darunter hast mit vor und zurück oder willst du gar keine Übersicht ???

JSommer · Beitrag von **JSommer** » Di 31. Jan 2006, 23:04

nene, schon mit übersicht, wie standard bildergalerie - nur wenn man das bild in groß sieht, da drunter noch ein vor und zurück...

kloevekorn · Beitrag von **kloevekorn** » Do 16. Feb 2006, 22:55

hallo allerseits,

ich möchte auch vor- und zurück-links haben. Kämpfe mich auch so durch das PHP und habe das jeweil vorherige bzw. nächste Bild in einer Variable, aber leider schaffe ich die Template-Generierung nicht.

Verwende diese Galerie:

Code: Alles auswählen

/***********************************************
* Bildergalerie Output
*
* Author      :     Timo A. Hummel
* Copyright   :     four for business AG
* Created     :     30-09-2005
************************************************/

In dem Template-Generierungsteil für das HTML-Template steht folgendes:

Code: Alles auswählen

$oImageTpl = new Template;
$oImageTpl->set("s", "IMG",$sScaledImage);
$oImageTpl->set("s","BACKLINK",'front_content.php?idcat='.$idcat.'&idart='.$idart.'&start='.$_REQUEST['start']);
$oImageTpl->set("s", "BACKCAPTION",mi18n("Zurück"));
$oImageTpl->set("s", "DESCRIPTION", $description);
$oImageTpl->set("s", "DOWNLOAD_LINK", $download_link);
$oImageTpl->set("s", "DOWNLOAD_SIZE", $download_size);
$oImageTpl->set("s", "VORHERIGES", $aImagesToDisplay[$zurueckbild]);
$oImageTpl->set("s", "NAECHSTES", $aImagesToDisplay[$vorbild]);

$oImageTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/gallery_detail.html", false, false);

(VORHERIGES/NAECHSTES sind von mir.)

Dazu gehört dieses HTML-Template "gallery_detail.html":

Code: Alles auswählen

<div id="galeriebild">
<img src="{IMG}" alt="" /><br />
<p>{DESCRIPTION}</p>

<p>
<a href="{BACKLINK}">{BACKCAPTION}</a>
<a href="{VORHERIGES}">{VORHERIGES}</a>
<a href="{NAECHSTES}">{NAECHSTES}</a>
</p>
</div>

Leider werden die Platzhalter VORHERIGES/NAECHSTES vom Template nicht erkannt (die anderen, "originalen" hingegen schon). Entweder werden Sie total ignoriert oder sie werden als VORHERIGES/NAECHSTES ausgegeben.

Habe versucht "s"->"d" zu machen, wie in anderen Modulen (wo sowas bei mir immer klappt).:

Code: Alles auswählen

$oImageTpl->set("d", "VORHERIGES", $aImagesToDisplay[$zurueckbild]);
$oImageTpl->set("d", "NAECHSTES", $aImagesToDisplay[$vorbild]);

Verschiedene Includes zu verwenden, das Standard-Include aus dem Galerienmodul:

Code: Alles auswählen

cInclude("includes", "functions.api.images.php");

Auch die Erweiterung um diese includes bringt es nicht:

Code: Alles auswählen

cInclude ("classes", "class.upload.php"); 
cInclude ("classes", "class.properties.php"); 
cInclude ("classes", "class.htmlelements.php"); 
cInclude ("includes", "functions.upl.php");

Warum werden die Template-Platzhalter nicht erkannt bzw. ersetzt? Was ist der Unterschied der Parameter "s" und "d"?

Vielen Dank für eure Ideen.

Beitrag von **HerrB** » Do 16. Feb 2006, 23:09

Der Unterschied ist: s = einmalige Ersetzung, d = mehrfache (wenn da sowas wie - Beginn Block - drin vorkommt. s wäre für Dich korrekt.

Ersetze doch mal testweise $aImagesToDisplay[$zurueckbild] durch einen einfachen Text. Mal abgesehen davon, dass Du sicherlich den Inhalt als Link und als Linktext ausgeben wolltest...

Gruß
HerrB

mreif · Beitrag von **mreif** » Fr 17. Feb 2006, 08:15

Hallo,

ja so eine Bildergalerie nehme ich auch gerne - habe sie als Modul aber noch nicht gefunden.

Wäre prima, wenn Ihr das komplette, fertige Modul hier posten würdet.

Danke und liebe Grüße
Michael

kloevekorn · Beitrag von **kloevekorn** » Fr 17. Feb 2006, 12:17

Mit normalen Text als Ersetzung kommen die Variablen an (auf den Test hätte ich auch wirklich selbst kommen können ).

Ich habe jetzt den Test gemacht, bis zu welcher Stelle die Variablen gefüllt bleiben und entsprechend im Code in solchen Blöcken notiert (recht gut zu erkennen, weil alle linksbündig im Code):

*snip*

der Übersichtlichkeit halber habe ich mir erlaubt, dieses Posting zu löschen. Ist jetzt uninteressant. Viel Code um nichts sozusagen.

kloevekorn · Beitrag von **kloevekorn** » So 19. Feb 2006, 14:15

So ... mein letztes Posting resultierte daraus, dass ich mich mit der Klammernverschachtelung vertan habe - sorry. However:

tatäää (*vor stolz platz*): Der untenstehende Output-Code ist der modifizierte Output der Standard-Bildergalerie. Bei mir funktioniert es, obwohl es bestimmt besser gecodet sein könnte. Z.B. ist im oberen Teil ein Codeteil doppelt nötig, damit Variablen in allen Klammerzweigen verfügbar sind.

Andere Codeteile habe ich bei der Entwicklung auskommentiert, damit ich das Skript verstehe. Weil es bei mir auch jetzt funktioniert (weil ich viele von den Variablen nicht verwende), habe ich diese Teile jetzt auch nicht mehr aktiviert. Aber es ist nichts gelöscht. Funzt eine Variable nicht, muss halt der entsprechende Codeteil identifiziert und wieder aktiviert werden.

Es ist also noch viel Raum fürs Tuning vorhanden!

Der Code von gallery_detail (wie ich es verwende):

Code: Alles auswählen

<div id="galeriebild">
	<img src="{IMG}" alt="" /><br />
	<p>
	{DESCRIPTION}
	</p>
        <!--<p><a href="{DOWNLOAD_LINK}" target="_blank" title="">{DOWNLOAD_CAPTION}</a> ({DOWNLOAD_SIZE})</p>-->
<p>
	<a href="{BACKLINK}">{BACKCAPTION}</a>
        <a href="{VORHERIGES}">{ZURUECK}</a>
        <a href="{NAECHSTES}">{WEITER}</a>
</p>
</div>

Code: Alles auswählen

<?php

/***********************************************
* Bildergalerie Output mit Vor/Zurück
*
* Author      :     Timo A. Hummel
* Copyright   :     four for business AG
* Created     :     30-09-2005
* modified    :      19.02.2006 Klövekorn (vor und zurück in der Bilderansicht)
************************************************/

cInclude("includes", "functions.api.images.php");

/* Gallery variables */
$bRecursive = false;

$sPath = "CMS_VALUE[5]";
if ($sPath=='') {
	$sPath = $cfgClient[$client]["path"]["frontend"] . $cfgClient[$client]["upl"]["frontendpath"] . "bildergalerie/";
} else {
	$sPath = $cfgClient[$client]["path"]["frontend"] . $cfgClient[$client]["upl"]["frontendpath"] . "CMS_VALUE[5]";
}
$iRows = "CMS_VALUE[3]";
if ($iRows == 0)
{$iRows = 2;}
$iColumns = "CMS_VALUE[2]";
if ($iColumns == 0) {$iColumns = 2;}
if (isset($start)) {$iCurrentPage = $start;
} else {
$iCurrentPage = 1;
}
$iWidth = "CMS_VALUE[0]";
$iHeight = "CMS_VALUE[1]";
if ($iWidth == 0) {$iWidth = 300;}
if ($iHeight == 0) { $iHeight = 300;}
$iDetailWidth = "CMS_VALUE[4]";
if ($iDetailWidth == 0) {$iDetailWidth = 300;}
$aValidExtensions = array("jpg", "jpeg", "gif", "png");
$iImagesPerPage = $iRows * $iColumns;



//doppelter Code aus dem ersten REQUEST-if

	$aGalleryFiles = scanDirectory($sPath, $bRecursive);
	
	     if (is_array($aGalleryFiles))
         {// Filter out non-images - foreach, alle nicht gewollten Dateien rausfiltern:
	           foreach ($aGalleryFiles as $key => $aGalleryFile)
	              {
	            $sExtension = strtolower(getFileExtension($aGalleryFile));
	                if (!in_array($sExtension, $aValidExtensions))
	                {
	                     unset($aGalleryFiles[$key]);
	                     //hier kann ein Array mit allen Bildern drin hin
	                 }
	               } //ende foreach
	
	           /* Calculate effective variables */
	 	       $iFileCount = count($aGalleryFiles); //die anzahl der bilder
	           $iPages = ceil($iFileCount / $iImagesPerPage); //liefert die Ganzzahl, die gleich oder größer  Number ist

	  	       $aImagesToDisplay = array_slice($aGalleryFiles, ($iCurrentPage - 1) * $iImagesPerPage, $iImagesPerPage);
	  	       	
	  	       $oImageTpl = new Template;
	  	       $oGalleryTpl = new Template;
	  	       $oEmptyImageTpl = new Template;
	
	    	   $aRenderedImages = array();
	
	    	   $iRow = 0;
	     	   $iImagesRendered = 0;
	          
	     	   $i = 0;
	      }	   

//ende doppelter Code






if ($_REQUEST['view']=='') 
{/* Read all gallery files */


	$aGalleryFiles = scanDirectory($sPath, $bRecursive);
	
	     if (is_array($aGalleryFiles))
         {// Filter out non-images - foreach, alle nicht gewollten Dateien rausfiltern:
	           foreach ($aGalleryFiles as $key => $aGalleryFile)
	              {
	            $sExtension = strtolower(getFileExtension($aGalleryFile));
	                if (!in_array($sExtension, $aValidExtensions))
	                {
	                     unset($aGalleryFiles[$key]);
	                     //hier kann ein Array mit allen Bildern drin hin
	                 }
	               } //ende foreach
	
	           /* Calculate effective variables */
	 	       $iFileCount = count($aGalleryFiles); //die anzahl der bilder
	           $iPages = ceil($iFileCount / $iImagesPerPage); //liefert die Ganzzahl, die gleich oder größer  Number ist

	  	       $aImagesToDisplay = array_slice($aGalleryFiles, ($iCurrentPage - 1) * $iImagesPerPage, $iImagesPerPage);
	
	  	       $oImageTpl = new Template;
	  	       $oGalleryTpl = new Template;
	  	       $oEmptyImageTpl = new Template;
	
	    	   $aRenderedImages = array();
	
	    	   $iRow = 0;
	     	   $iImagesRendered = 0;
	          

	     
	           foreach ($aImagesToDisplay as $sImageToDisplay)
	                {// Do Scaling
	                  
	         	                  
	                                  $sScaledImage = cApiImgScale($sImageToDisplay, $iWidth, $iHeight);
	                                  // setzt den Link zusammen um auf die Großansicht zu gehen: "front_content.php/.../view=...
	                                  $link = 'front_content.php?idcatart='.$idcatart.'&start='.$_REQUEST['start'].'&view='.urlencode(str_replace($cfgClient[$client]['path']['frontend'],'',$sImageToDisplay));  


	                                  /* macht den textlink: 
	                                  $description = ig_getImageDescription($sImageToDisplay);
	                                  if ($description=='') 
	                                     {
	  	                                 $description = '&nbsp;';
	  	                                 $array_des_pfades = explode("/",$sImageToDisplay);
	  	                                 $bildname_pos = count($array_des_pfades)-1;	  
	                                     }
	                                  */

	                                  //$download_link = str_replace($cfgClient[$client]['path']['frontend'],$cfgClient[$client]['path']['htmlpath'],$sImageToDisplay);



	                                  $download_size = ig_GetReadableFileSize($sImageToDisplay);
	  	  	
	                                  $oImageTpl->reset();
	                                  $oImageTpl->set("s", "FILE", $sScaledImage);
	                                  $oImageTpl->set("s", "WIDTH", $iWidth);
	                                  $oImageTpl->set("s", "HEIGHT", $iHeight);
	                                  $oImageTpl->set("s", "LINK", $link);
	                                  $oImageTpl->set("s", "DESCRIPTION", $description);
	                                  $oImageTpl->set("s", "DOWNLOAD_LINK", $download_link);
	                                  $oImageTpl->set("s", "DOWNLOAD_SIZE", $download_size);
	                                  /*$oImageTpl->set("s", "DOWNLOAD_CAPTION", mi18n("runter laden"));*/
	                                  $oImageTpl->set("s", "PREVIEW_CAPTION", mi18n("$array_des_pfades[$bildname_pos]"));

	         
	                                  $aRenderedImages[] = $oImageTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/gallery_image.html", true, false);   //Rendered Image ist das Thumbnailbild selbst

	
	                                  $iImagesRendered++;
	
		                              /*
	                                  if ($iImagesRendered == $iColumns)
	                                      {
	                                       $oGalleryTpl->set("d", "COLUMNS", implode("", $aRenderedImages));
	                                       $oGalleryTpl->next();
	                                       $iImagesRendered = 0;
	                                       $aRenderedImages = array();
	                                      }
	                                   */                    
	                    } //Ende foreach "scaling"
	                    
	                    
	                    
						// ohne diesen Block keine Thumbs:
	                   if (count($aRenderedImages) < $iColumns && count($aRenderedImages) > 0)
	                      {
	                       $iEmptyCells = $iColumns - count($aRenderedImages);
	
	                       $oEmptyImageTpl->set("s", "WIDTH", $iWidth);
	                       $oEmptyImageTpl->set("s", "HEIGHT", $iHeight);
	
	                       $sEmptyCells = str_repeat($oEmptyImageTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/gallery_empty.html", true, false),$iEmptyCells);
	 
	                       $oGalleryTpl->set("d", "COLUMNS", implode("", $aRenderedImages) . $sEmptyCells);
	                       $oGalleryTpl->next();
 						   }  
	
	                   $aLinks = array();
	                   
	                   

	                    
	                    
	                   /*     
	                   if ($iCurrentPage > 1)
	                      {
	                      $oPreviousTpl = new Template;
	                      $oPreviousTpl->set("s", "LINK", $cfgClient[$client]["path"]["htmlpath"] . sprintf("front_content.php?idcatart=%s&start=%s", $idcatart, $iCurrentPage - 1));
	                      $oPreviousTpl->set("s", "TITLE", mi18n("Zurück"));
	                      $aLinks[] = $oPreviousTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/gallery_link.html", true, false);
	                      }

	                   if ($iCurrentPage < $iPages)
	                      {
	                      $oNextTpl = new Template;
	                      $oNextTpl->set("s", "LINK", $cfgClient[$client]["path"]["htmlpath"] . sprintf("front_content.php?idcatart=%s&start=%s", $idcatart, $iCurrentPage + 1));
	                      $oNextTpl->set("s", "TITLE", mi18n("Vor"));
	                      $aLinks[] = $oNextTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/gallery_link.html", true, false);
	   					  }  
                        */
	

	
	                   //$oGalleryTpl->set("s", "NAVIGATION", implode("", $aLinks));
	
	                    $oGalleryTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/gallery.html", false, false);
                    } 
          } 

else 

          {//generierung des Detailbildes 


          // vorheriges/nächstes Bild bestimmen
          //das $_REQUEST analysieren: 
          $request_view_uebergabe = $_REQUEST['view'];
          $requestpfad = explode('/', $request_view_uebergabe);
          $letztes_element_request = count($requestpfad)-1;
          $request_bild = $requestpfad[$letztes_element_request];
                    
          
          foreach ($aImagesToDisplay as $arrayelement) 
          {
          //ins view-Format konvertieren:
          $pfadarray = explode('/', $arrayelement);
          $letztes_element = count($pfadarray)-1;
          $bild = $pfadarray[$letztes_element];
          $allebilder[] = $bild;
          }
          
          //Diese Funktion gibt den Index des aktuellen Bildes aus:
          function bildfinder($array)
          {
          global $request_bild;
          while(list($k,$val) = each($array))
                {
          if (preg_match("/$request_bild/",$val)) return $k;
                }
          return FALSE;
          }
          
          //Anwendung der Funktion bildfinder:
          $k = bildfinder($allebilder);
         
          $vorbildindex = $k-1;
          $nachbildindex = $k+1;
          
          if ($nachbildindex == $iFileCount) {$nachbildindex = 0;}
	      if ($vorbildindex < 0) {$vorbildindex = $iFileCount-1;}	
	      
	      $vorbild = "upload/CMS_VALUE[5]/".$allebilder[$vorbildindex];
	      $nachbild = "upload/CMS_VALUE[5]/".$allebilder[$nachbildindex];
	      
          $vorbild = 'front_content.php?idcatart='.$idcatart.'&start='.$_REQUEST['start'].'&view='.urlencode(str_replace($cfgClient[$client]['path']['frontend'],'',$vorbild));  
          $nachbild = 'front_content.php?idcatart='.$idcatart.'&start='.$_REQUEST['start'].'&view='.urlencode(str_replace($cfgClient[$client]['path']['frontend'],'',$nachbild));  
   
 
          //ende vorher,nachher
          
	      $sImageToDisplay = $cfgClient[$client]['path']['frontend'].$_REQUEST['view'];  //der pfad beginnt bei "kunden4c"
	      
	      $sScaledImage = cApiImgScale($sImageToDisplay, $iDetailWidth, 1000);

          //$description = ig_getImageDescription($sImageToDisplay);
	      /*       
	      if ($description=='') 
	                {
	                 $description = '&nbsp;';
	                }
	      */

	   
	    
	      $download_link = str_replace($cfgClient[$client]['path']['frontend'],$cfgClient[$client]['path']['htmlpath'],$sImageToDisplay);
	      
	      $download_size = ig_GetReadableFileSize($sImageToDisplay);
	
	      $oImageTpl = new Template;
	      $oImageTpl->set("s", "IMG",$sScaledImage);
	      $oImageTpl->set("s", "BACKLINK",'front_content.php?idcat='.$idcat.'&idart='.$idart.'&start='.$_REQUEST['start']);
	      $oImageTpl->set("s", "BACKCAPTION",mi18n("Übersicht"));
	      $oImageTpl->set("s", "DESCRIPTION", $description);
	      $oImageTpl->set("s", "DOWNLOAD_LINK", $download_link);
	      $oImageTpl->set("s", "DOWNLOAD_SIZE", $download_size);
	      $oImageTpl->set("s", "ZURUECK", mi18n("Vorheriges Bild"));
	      $oImageTpl->set("s", "WEITER", mi18n("Nächstes Bild"));
	      $oImageTpl->set("s", "VORHERIGES", $vorbild);
	      $oImageTpl->set("s", "NAECHSTES", $nachbild);
	      /*$oImageTpl->set("s", "DOWNLOAD_CAPTION", mi18n("runter laden")); */
	      $oImageTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/gallery_detail.html", false, false);
          }

function ig_getImageDescription($idupl)
         {
         global $cfg, $cfgClient, $db, $client, $lang;
         $cApiClient = new cApiClient($client);
	     $language_separator = $cApiClient->getProperty('language','separator');     
	     if(is_numeric($idupl))
	        {//ID is a number 
		     $query = "SELECT description FROM ".$cfg["tab"]["upl"]." WHERE idupl = ".$idupl;
	        }
	      else
	        {//ID is a string
		     $path_parts = pathinfo($idupl);
		     $upload = $cfgClient[$client]['upl']['frontendpath'];
		     $len = strlen($upload);
	         $pos = strpos($idupl,$upload);
		     $dirname = substr($path_parts['dirname'],$pos+$len).'/';
		     $query = "SELECT description FROM ".$cfg["tab"]["upl"]." WHERE (dirname = '".$dirname."') AND (filename='".$path_parts['basename']."') AND (filetype='".$path_parts['extension']."')";
             }
             
	      $db->query($query);
	      if($db->next_record())
	        {
		     return htmlspecialchars(urldecode($db->f("description")));
	         }
	         else
	         {
		     return '';
	        }
}

function ig_GetReadableFileSize($path) 
        {
	     $filesize = filesize($path);
	     $unit = "bytes";
     	 if ($filesize > 1024) {
	     $filesize = ($filesize / 1024);
     	 $unit = "kB"; }
	     if ($filesize > 1024) {
	     $filesize = ($filesize / 1024);
       	 $unit = "MB"; }
     	 if ($filesize > 1024) {
	     $filesize = ($filesize / 1024);
	     $unit = "GB"; }
	     if ($filesize > 1024) {
	     $filesize = ($filesize / 1024);
	     $unit = "TB"; }
	
	     $filesize = round($filesize, 0);
     	 return $filesize." ".$unit;
        }


?>

mreif · Beitrag von **mreif** » Mo 20. Feb 2006, 09:28

Hallo,

habe den HTML Code von der gallery_detail geändert und in der Bildergalerie den Output Code mit dem obigen ausgetauscht.

Jetzt zeigt die Seite gar keine Biler mehr an

Muss ich sonst noch etwas ändern - ausser diesen Austausch?

Gruß
Michael

kloevekorn · Beitrag von **kloevekorn** » Mo 20. Feb 2006, 11:17

mreif hat geschrieben: Jetzt zeigt die Seite gar keine Biler mehr an

Muss ich sonst noch etwas ändern - ausser diesen Austausch?

Gruß
Michael

ich hoffe nicht

, jedenfalls nicht, um Bilder "irgendwie" anzuzeigen. Ist vielleicht in der Modul-Konfiguration "spalten" und "zeilen" leer oder stehen auf "0"? Dann werden nämlich gar keine Bilder ausgegeben.

Damit die Galerie nachher gut aussieht, muss aber auf jeden Fall noch was geändert werden , d.h. die jetzt auskommentierten Teile wieder scharf geschaltet werden, damit die Optik der Übersichtsseite stimmt. Wenn alles auskommentierte entkommentiert ist, dann sollte die Galerie wie das Original funktionieren.

Ich werde noch versuchen, die ganze Logik mit den Spalten und Zeilen aus Input und Output zu entfernen, weil ich keine Tabellenlayouts möchte und auch nicht manuell eintragen möchte, wieviele Bilder eine Galerie aufweist.

Entscheidend scheint mir, dass jetzt die Logik für Zurück und Weiter im Modul vorhanden ist. Details anpassen muss man ja eigentlich immer.

Viel Erfolg + Gruß,
jan

mreif · Beitrag von **mreif** » Mo 20. Feb 2006, 18:12

Postest Du dann das fertige Modul noch einmal, nachdem Du es fertig gestellt hast oder als Link per Download?
/mr

kloevekorn · Beitrag von **kloevekorn** » Di 21. Feb 2006, 16:13

Liebe Gemeinde,

unten findet Ihr die geänderte Bildergalerie und abgeänderte Templates.

Änderungen zur Originalversion:

- Vor/Zurück in der Detailansicht
- Keine Eingabe von Zeilen/Spalten mehr, aber auch keine automatische Aufteilung auf mehrere Galerienseiten.
- Keine Tabellen in den Templates. Die Thumbs sind in divs, um ne Galerie daraus zu basteln empfehle ich das CSS-Tutorial Nr.4 auf http://css.maxdesign.com.au/floatutorial/index.htm - sowieso sehr zu empfehlen, die Site!
- Thumbseite und Detailseite validieren gg. xhtml 1.0 transitional.

In meinen Templates wird nur der Dateiname und die Dateigröße sichtbar angegeben. Wer z.B. den "Downloadlink" aus dem Originalmodul vermisst, muss die entsprechenden Teile identifizieren und entkommentieren.

Es sind keine Codeteile aus dem Originalmodul gelöscht, (nur einmal verschoben

).

Vor dem Austausch der Codes den Backup der Originale nicht vergessen! Ich hoffe, es funktioniert auch bei euch.

Betroffen vom Austausch sind Modul-Input, -Output, gallery_image.html und gallery_detail.html

gallery_detail.html:

Code: Alles auswählen

<div id="galeriebild">
	<img src="{IMG}" alt="" /><br />
	<p>
	{DESCRIPTION}<!--{DOWNLOAD_CAPTION}{PREVIEW_CAPTION}-->
	</p>
        <!--<p><a href="{DOWNLOAD_LINK}" target="_blank" title="">{DOWNLOAD_CAPTION}</a> ({DOWNLOAD_SIZE})</p>-->
<p>
	<a href="{BACKLINK}">{BACKCAPTION}</a>
        <a href="{VORHERIGES}">{ZURUECK}</a>
        <a href="{NAECHSTES}">{WEITER}</a>
</p>
</div>

gallery_image.html:

Code: Alles auswählen

<div class="galeriethumb" style="width:{WIDTH};height:{HEIGHT};">

<a href="{LINK}"><img src="{FILE}" title="{DESCRIPTION}" alt="{DESCRIPTION}" /></a>
	<p class="caption_p">{DESCRIPTION}</p>
        <p class="caption_p"><a href="{LINK}">{PREVIEW_CAPTION}</a></p>
  <!-- <p class="caption_p"><a href="{DOWNLOAD_LINK}">{DOWNLOAD_CAPTION}</a>-->
<p>{DESCRIPTION} ({DOWNLOAD_SIZE})</p>

</div>

Input:

Code: Alles auswählen

?><?php
/***********************************************
* Bildergalerie Input
*
* Author      :     Timo A. Hummel
* Copyright   :     four for business AG
* Created     :     30-09-2005
* modified    :     21.02.2006 Klövekorn (zeilen/Spalten-Eingabe auskommentiert)
************************************************/?>

<table>
  <tr>
    <td><?php echo mi18n("Breite");?></td>
    <td><input type="text" name="<?php echo "CMS_VAR[0]"; ?>" value="<?php echo "CMS_VALUE[0]"; ?>"></td>
  </tr>
  <tr>
    <td><?php echo mi18n("Höhe");?></td>
    <td><input type="text" name="<?php echo "CMS_VAR[1]"; ?>" value="<?php echo "CMS_VALUE[1]"; ?>"></td>
  </tr>
  
<!--
  <tr>
    <td><?php echo mi18n("Spalten");?></td>
    <td><input type="text" name="<?php echo "CMS_VAR[2]"; ?>" value="<?php echo "CMS_VALUE[2]"; ?>"></td>
  </tr>
  <tr>
    <td><?php echo mi18n("Zeilen");?></td>
    <td><input type="text" name="<?php echo "CMS_VAR[3]"; ?>" value="<?php echo "CMS_VALUE[3]"; ?>"></td>
  </tr>
-->  
 
  <tr>
    <td><?php echo mi18n("Breite Detailansicht");?></td>
    <td><input type="text" name="<?php echo "CMS_VAR[4]"; ?>" value="<?php echo "CMS_VALUE[4]"; ?>"></td>
  </tr>
  <?php
  $sql = "SELECT DISTINCT dirname FROM ".$cfg['tab']['upl']." ORDER BY dirname";
  $db->query($sql);
  echo '<tr><td>'.mi18n("Verzeichnis auswählen").'</td><td>
		<select name="CMS_VAR[5]" size="1" style="width: 320px">
			<option value="">'.mi18n("Nichts ausgewählt").'</option>';
			while ($db->next_record()) {
				if ( stristr($db->f("dirname"),'CVS/') === FALSE ) {
					if ($db->f("dirname")=="CMS_VALUE[5]") {
						echo '<option value="'.$db->f("dirname").'" selected="selected">'.$db->f("dirname").'</option>';
					} else {
						echo '<option value="'.$db->f("dirname").'">'.$db->f("dirname").'</option>';
					}
				}
			}
	echo '</select></td></tr>';?>
</table>
<?php

Code: Alles auswählen

<?php

/***********************************************
* Bildergalerie Output mit Vor/Zurück
*
* Author      :     Timo A. Hummel
* Copyright   :     four for business AG
* Created     :     30-09-2005
* modified    :      19.02.2006 Klövekorn (vor und zurück in der Bilderansicht)
************************************************/

cInclude("includes", "functions.api.images.php");

/* Gallery variables */
$bRecursive = false;

$sPath = "CMS_VALUE[5]";
if ($sPath=='') {
   $sPath = $cfgClient[$client]["path"]["frontend"] . $cfgClient[$client]["upl"]["frontendpath"] . "bildergalerie/";
} else {
   $sPath = $cfgClient[$client]["path"]["frontend"] . $cfgClient[$client]["upl"]["frontendpath"] . "CMS_VALUE[5]";
}
/*
$iRows = "CMS_VALUE[3]";
if ($iRows == 0)
{$iRows = 2;}
$iColumns = "CMS_VALUE[2]";
if ($iColumns == 0) {$iColumns = 2;}
*/
if (isset($start)) {$iCurrentPage = $start;
} else {
$iCurrentPage = 1;
}
$iWidth = "CMS_VALUE[0]";
$iHeight = "CMS_VALUE[1]";
if ($iWidth == 0) {$iWidth = 300;}
if ($iHeight == 0) { $iHeight = 300;}
$iDetailWidth = "CMS_VALUE[4]";
if ($iDetailWidth == 0) {$iDetailWidth = 300;}
$aValidExtensions = array("jpg", "jpeg", "gif", "png");
$iImagesPerPage = $iRows * $iColumns;



//aus dem ersten REQUEST-Teil verschobener Code:

   $aGalleryFiles = scanDirectory($sPath, $bRecursive);
   
        if (is_array($aGalleryFiles))
         {// Filter out non-images:
              foreach ($aGalleryFiles as $key => $aGalleryFile)
                 {
               $sExtension = strtolower(getFileExtension($aGalleryFile));
                   if (!in_array($sExtension, $aValidExtensions))
                   {
                        unset($aGalleryFiles[$key]);
                    }
                  } //ende foreach
   
              /* Calculate effective variables */
              $iFileCount = count($aGalleryFiles); //die anzahl der bilder
             // $iPages = ceil($iFileCount / $iImagesPerPage); //liefert die Ganzzahl, die gleich oder größer  Number ist

               $aImagesToDisplay = array_slice($aGalleryFiles, ($iCurrentPage - 1) * $iFileCount,$iFileCount);//$iImagesPerPage, $iImagesPerPage);
                  
               $oImageTpl = new Template;
               $oGalleryTpl = new Template;
               $oEmptyImageTpl = new Template;
   
             $aRenderedImages = array();
   
             $iRow = 0;
              $iImagesRendered = 0;
            
              $i = 0;
         }      

//ende verschobener Code






if ($_REQUEST['view']=='')
{/* Read all gallery files */
     
              foreach ($aImagesToDisplay as $sImageToDisplay)
                   {// Do Scaling
                    
                                
                                     $sScaledImage = cApiImgScale($sImageToDisplay, $iWidth, $iHeight);
                                     // setzt den Link zusammen um auf die Großansicht zu gehen: "front_content.php/.../view=...
                                     $link = 'front_content.php?idcatart='.$idcatart.'&start='.$_REQUEST['start'].'&view='.urlencode(str_replace($cfgClient[$client]['path']['frontend'],'',$sImageToDisplay)); 


                                     //macht den textlink:
                                     $description = ig_getImageDescription($sImageToDisplay);
                                     if ($description=='')
                                        {
                                         $description = '&nbsp;';
                                         $array_des_pfades = explode("/",$sImageToDisplay);
                                         $bildname_pos = count($array_des_pfades)-1;    
                                        }
                                     

                                     //$download_link = str_replace($cfgClient[$client]['path']['frontend'],$cfgClient[$client]['path']['htmlpath'],$sImageToDisplay);



                                     $download_size = ig_GetReadableFileSize($sImageToDisplay);
             
                                     $oImageTpl->reset();
                                     $oImageTpl->set("s", "FILE", $sScaledImage);
                                     $oImageTpl->set("s", "WIDTH", $iWidth);
                                     $oImageTpl->set("s", "HEIGHT", $iHeight);
                                     $oImageTpl->set("s", "LINK", $link);
                                     $oImageTpl->set("s", "DESCRIPTION", $description);
                                     $oImageTpl->set("s", "DOWNLOAD_LINK", $download_link);
                                     $oImageTpl->set("s", "DOWNLOAD_SIZE", $download_size);
                                     /*$oImageTpl->set("s", "DOWNLOAD_CAPTION", mi18n("runter laden"));*/
                                     $oImageTpl->set("s", "PREVIEW_CAPTION", mi18n("$array_des_pfades[$bildname_pos]"));

            
                                     $aRenderedImages[] = $oImageTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/gallery_image.html", true, false);   //Rendered Image ist das Thumbnailbild selbst

   
                                     $iImagesRendered++;
   
                                    
                                     if ($iImagesRendered == $iFileCount)//$iColumns)
                                         {
                                          $oGalleryTpl->set("d", "COLUMNS", implode("", $aRenderedImages));
                                          $oGalleryTpl->next();
                                          $iImagesRendered = 0;
                                          $aRenderedImages = array();
                                         }
                                                     
                       } //Ende foreach "scaling"
                      
                      
                      
                  // ohne diesen Block keine Thumbs:
                      if (count($aRenderedImages) < $iColumns && count($aRenderedImages) > 0)
                         {
                          $iEmptyCells = $iColumns - count($aRenderedImages);
   
                          $oEmptyImageTpl->set("s", "WIDTH", $iWidth);
                          $oEmptyImageTpl->set("s", "HEIGHT", $iHeight);
   
                          $sEmptyCells = str_repeat($oEmptyImageTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/gallery_empty.html", true, false),$iEmptyCells);
   
                          $oGalleryTpl->set("d", "COLUMNS", implode("", $aRenderedImages) . $sEmptyCells);
                          $oGalleryTpl->next();
                      } 
   
                      $aLinks = array();
                      
                      

                      
                      
                      /*     
                      if ($iCurrentPage > 1)
                         {
                         $oPreviousTpl = new Template;
                         $oPreviousTpl->set("s", "LINK", $cfgClient[$client]["path"]["htmlpath"] . sprintf("front_content.php?idcatart=%s&start=%s", $idcatart, $iCurrentPage - 1));
                         $oPreviousTpl->set("s", "TITLE", mi18n("Zurück"));
                         $aLinks[] = $oPreviousTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/gallery_link.html", true, false);
                         }

                      if ($iCurrentPage < $iPages)
                         {
                         $oNextTpl = new Template;
                         $oNextTpl->set("s", "LINK", $cfgClient[$client]["path"]["htmlpath"] . sprintf("front_content.php?idcatart=%s&start=%s", $idcatart, $iCurrentPage + 1));
                         $oNextTpl->set("s", "TITLE", mi18n("Vor"));
                         $aLinks[] = $oNextTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/gallery_link.html", true, false);
                       } 
                        */
   

   
                      //$oGalleryTpl->set("s", "NAVIGATION", implode("", $aLinks));
   
                       $oGalleryTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/gallery.html", false, false);
               // }
          }

else

          {//generierung des Detailbildes


          // vorheriges/nächstes Bild bestimmen
          //das $_REQUEST analysieren:
          $request_view_uebergabe = $_REQUEST['view'];
          $requestpfad = explode('/', $request_view_uebergabe);
          $letztes_element_request = count($requestpfad)-1;
          $request_bild = $requestpfad[$letztes_element_request];
                   
         
          foreach ($aImagesToDisplay as $arrayelement)
          {
          //ins view-Format konvertieren:
          $pfadarray = explode('/', $arrayelement);
          $letztes_element = count($pfadarray)-1;
          $bild = $pfadarray[$letztes_element];
          $allebilder[] = $bild;
          }
         
          //Diese Funktion gibt den Index des aktuellen Bildes aus:
          function bildfinder($array)
          {
          global $request_bild;
          while(list($k,$val) = each($array))
                {
          if (preg_match("/$request_bild/",$val)) return $k;
                }
          return FALSE;
          }
         
          //Anwendung der Funktion bildfinder:
          $k = bildfinder($allebilder);
         
          $vorbildindex = $k-1;
          $nachbildindex = $k+1;
         
          if ($nachbildindex == $iFileCount) {$nachbildindex = 0;}
         if ($vorbildindex < 0) {$vorbildindex = $iFileCount-1;}   
        
         $vorbild = "upload/CMS_VALUE[5]/".$allebilder[$vorbildindex];
         $nachbild = "upload/CMS_VALUE[5]/".$allebilder[$nachbildindex];
        
          $vorbild = 'front_content.php?idcatart='.$idcatart.'&start='.$_REQUEST['start'].'&view='.urlencode(str_replace($cfgClient[$client]['path']['frontend'],'',$vorbild)); 
          $nachbild = 'front_content.php?idcatart='.$idcatart.'&start='.$_REQUEST['start'].'&view='.urlencode(str_replace($cfgClient[$client]['path']['frontend'],'',$nachbild)); 
   
 
          //ende vorher,nachher
         
         $sImageToDisplay = $cfgClient[$client]['path']['frontend'].$_REQUEST['view'];  //der pfad beginnt bei "kunden4c"
        
         $sScaledImage = cApiImgScale($sImageToDisplay, $iDetailWidth, 1000);

          $description = $bild;//ig_getImageDescription($sImageToDisplay);
                
         if ($description=='')
                   {
                    $description = '&nbsp;';
                   }
         

      
      
         $download_link = str_replace($cfgClient[$client]['path']['frontend'],$cfgClient[$client]['path']['htmlpath'],$sImageToDisplay);
        
         $download_size = ig_GetReadableFileSize($sImageToDisplay);
   
         $oImageTpl = new Template;
         $oImageTpl->set("s", "IMG",$sScaledImage);
         $oImageTpl->set("s", "BACKLINK",'front_content.php?idcat='.$idcat.'&idart='.$idart.'&start='.$_REQUEST['start']);
         $oImageTpl->set("s", "BACKCAPTION",mi18n("Übersicht"));
         $oImageTpl->set("s", "DESCRIPTION", $description);
         $oImageTpl->set("s", "DOWNLOAD_LINK", $download_link);
         $oImageTpl->set("s", "DOWNLOAD_SIZE", $download_size);
         $oImageTpl->set("s", "ZURUECK", mi18n("Vorheriges Bild"));
         $oImageTpl->set("s", "WEITER", mi18n("Nächstes Bild"));
         $oImageTpl->set("s", "VORHERIGES", $vorbild);
         $oImageTpl->set("s", "NAECHSTES", $nachbild);
         /*$oImageTpl->set("s", "DOWNLOAD_CAPTION", mi18n("runter laden")); */
         $oImageTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/gallery_detail.html", false, false);
          }

function ig_getImageDescription($idupl)
         {
         global $cfg, $cfgClient, $db, $client, $lang;
         $cApiClient = new cApiClient($client);
        $language_separator = $cApiClient->getProperty('language','separator');     
        if(is_numeric($idupl))
           {//ID is a number
           $query = "SELECT description FROM ".$cfg["tab"]["upl"]." WHERE idupl = ".$idupl;
           }
         else
           {//ID is a string
           $path_parts = pathinfo($idupl);
           $upload = $cfgClient[$client]['upl']['frontendpath'];
           $len = strlen($upload);
            $pos = strpos($idupl,$upload);
           $dirname = substr($path_parts['dirname'],$pos+$len).'/';
           $query = "SELECT description FROM ".$cfg["tab"]["upl"]." WHERE (dirname = '".$dirname."') AND (filename='".$path_parts['basename']."') AND (filetype='".$path_parts['extension']."')";
             }
             
         $db->query($query);
         if($db->next_record())
           {
           return htmlspecialchars(urldecode($db->f("description")));
            }
            else
            {
           return '';
           }
}

function ig_GetReadableFileSize($path)
        {
        $filesize = filesize($path);
        $unit = "bytes";
         if ($filesize > 1024) {
        $filesize = ($filesize / 1024);
         $unit = "kB"; }
        if ($filesize > 1024) {
        $filesize = ($filesize / 1024);
           $unit = "MB"; }
         if ($filesize > 1024) {
        $filesize = ($filesize / 1024);
        $unit = "GB"; }
        if ($filesize > 1024) {
        $filesize = ($filesize / 1024);
        $unit = "TB"; }
   
        $filesize = round($filesize, 0);
         return $filesize." ".$unit;
        }

?>

mreif · Beitrag von **mreif** » Di 21. Feb 2006, 18:40

Funktioniert soweit, allerdings wid der Dateiname des Bildes bei der Dateiansicht nicht sauber übergeben.
Es wird immer der Name der letzten Datei angezeigt.

In der Übersicht ist der Abstand zwischen Bild und Dateiname sehr groß. Vielleicht kannst Du das noch verfeinern.
Jetzt müsste man ggf. nur wieder mehrere Spalten in der Übersicht haben.
Ansonsten prima gelöst

/mr