Contao-Camp 2024
Ergebnis 1 bis 15 von 15

Thema: Bildergallery in Schwarz-Weiß mit Mouseover Effekt

  1. #1
    Contao-Nutzer Avatar von darki777
    Registriert seit
    03.07.2009.
    Beiträge
    63

    Standard Bildergallery in Schwarz-Weiß mit Mouseover Effekt

    Hi,
    hier möchte ich euch einmal darstellen wie man mit einfachen Bordmitteln von Contao eine Schwarz-Weiß Gallery mit Hover Effekt erstellt. Die SW-Bilder werden dabei dynamisch per PHP generiert und es findet eine Abfrage statt ob die jeweiligen SW-Bilder schon im Cache-Verzeichnis existieren oder nicht, damit keine Performance-Einbußen entstehen, so werden nicht jedes mal die Thumbnails neu generiert. Die Template-Dateien + CSS/Javascript Dateien findet ihr im Anhang, damit ihr schnell loslegen könnt.

    Ich lasse die SW-Bilder so generieren, dass sie noch ein wenig mehr Pepp reinbekommen, bzw. Kontrast und Brightness Effekte. Diese könnt ihr in der Template Datei nach belieben umstellen, ebenso die Qualität der generierten Bilder. Falls gewollt, dann solltet ihr beim Rumtesten der verschiedenen Werte darauf achten dass ihr jedesmal wenn ihr einen Wert umstellt auch den Ordner "system/html" leert (dies könnt ihr unter "Systemwartung->Daten bereinigen" durchführen).

    Nun zum Code, das Hauptsächliche spielt sich hier ab:
    PHP-Code:
    <?php
        $imageSW 
    "system/html/".basename($col->src,".jpg")."-sw.jpg";
        
        if(!
    file_exists($imageSW)){
            
    $image imagecreatefromjpeg($col->src);
            
    imagefilter($image,IMG_FILTER_GRAYSCALE);
            
    imagefilter($image,IMG_FILTER_CONTRAST,-4);
            
    imagefilter($image,IMG_FILTER_BRIGHTNESS,1);
            
    ob_start();
            
    imagejpeg($image,NULL,80);
            
    $stringData ob_get_contents(); // read from buffer
            
    ob_end_clean(); // delete buffer
            //$gzipData = gzdeflate($stringData); // compress string data with gzip
            
    file_put_contents($imageSW,$stringData,LOCK_EX);
        }
    ?>
    IMG_FILTER_CONTRAST ist selbsterklärend und steht für "Kontrast", desto geringer der Wert ist (in dem Beispiel also "-4"), desto höher wird der Dynamikumfang des Bildes
    IMG_FILTER_BRIGHTNESS desto höher der Wert ist, desto heller wird das Bild
    imagejpeg($image,NULL,80); hier wird unter anderem die Qualität des Bildes angegeben, der Wert 80 dürfte für die meisten Fälle ausreichen
    $gzipData = gzdeflate($stringData); spezielle GZIP Kompression, dieser sollte allerdings nur von Leuten benutzt werden die mit der Materie vertraut sind

    Nun zur Installation:
    1. Kopiert euch gallery_sw.html5 und gallery_sw.xhtml in euer /template Verzeichnis
    2. Kopiert tl_files/mylayout/css/gallery_sw.css und tl_files/mylayout/js/gallery_sw.js in euer eigenes Layout (CSS / Javascript) Verzeichnis
    3. Bindet die JS und die CSS in euer Template / Layout ein
    4. Erstellt in einem Artikel eine Gallery, wählt dabei in den Template-Einstellungen das Template "gallery_sw"
    5. Und schon funktioniert das Ganze Viel Spaß dabei.

    Für Feedback wäre ich euch dankbar.


    Viele Grüße
    darki aka Pixelmount
    Angehängte Dateien Angehängte Dateien
    Geändert von darki777 (08.03.2012 um 01:04 Uhr)

  2. #2
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.292
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo darki777,
    eine einzige bitte hätte ich ^^
    Pack das doch ins Wiki -> http://de.contaowiki.org

    Hier geht sowas leider zu schnell unter...

    Viele Grüße
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  3. #3
    Contao-Nutzer
    Registriert seit
    21.07.2009.
    Beiträge
    224

    Standard

    Vielen Dank Draki für das tut,

    dieses funktioniert leider nur ab contao 2.10 !!

    ich habe leider noch 2.95... möchte auch nicht updaten das es noch viele probs mit 2.10 und anderen extensions gibt, die ich benötige....

    gibt es irgendwie ne möglichkeit das auch in 2.95 unterzubringen.. und evtl. in bestimmten divs.. und nicht nur gallery !?!?

    Danke

  4. #4
    Contao-Nutzer
    Registriert seit
    21.06.2009.
    Beiträge
    46

    Standard

    Habs eingebunden, es funktioniert und wertet meine Gallerie extrem auf

    Vielen Dank!!
    Geändert von Carsten (04.05.2012 um 11:14 Uhr)

  5. #5
    Contao-Fan Avatar von dirksche
    Registriert seit
    05.08.2009.
    Ort
    Grosslittgen
    Beiträge
    641

    Standard

    Tolles Tutorial !
    Ich würde diese Funktion gerne für das Inhaltselement Bild oder Hyperlink verwenden. Wie müsste ich die Templates umbauen?

    LG,
    Dirk

  6. #6
    Contao-Urgestein Avatar von Tim G
    Registriert seit
    13.02.2010.
    Ort
    Lübeck
    Beiträge
    2.210
    User beschenken
    Wunschliste

    Standard

    Ich hab schon länger eine phpimageprocessor Erweiterung auf meiner Liste, die diese Funktion für Bild-Inhaltselemente aller Art zur Verfügung stellt aus dem BE heraus.

    Was denkt ihr? Eher nur was fürs Template oder wäre eine zusätzliche NachbearbeitungsPalette ganz cool?

    Ich habs mal für den catalog gebraucht.

    Grüße,
    Tim


    Sent from my iphone using Tapatalk
    http://www.tim-gatzky.de ˙ auch schon wieder 2 Jahre alt - wie die Zeit vergeht... muss mal umbauen.

  7. #7
    Contao-Fan Avatar von dirksche
    Registriert seit
    05.08.2009.
    Ort
    Grosslittgen
    Beiträge
    641

    Standard

    Sicherlich wäre eine eine NachbearbeitungsPalette eine coole Sache. Existiert von der Erweiterung schon etwas?

    LG,
    Dirk

  8. #8
    Contao-Urgestein Avatar von Tim G
    Registriert seit
    13.02.2010.
    Ort
    Lübeck
    Beiträge
    2.210
    User beschenken
    Wunschliste

    Standard

    Nein das nicht, ich wollte erstmal allgemein Fragen.
    Ich schau auch nochmal was mit php alles geht. Ist ja bei Weitem nicht so mächtig wie Flash auf diesem Gebiet.


    Sent from my iphone using Tapatalk
    http://www.tim-gatzky.de ˙ auch schon wieder 2 Jahre alt - wie die Zeit vergeht... muss mal umbauen.

  9. #9
    Contao-Fan Avatar von Gassi
    Registriert seit
    18.11.2009.
    Ort
    Konstanz
    Beiträge
    423

    Standard SW Thumbnails bei normaler Galerie

    Hallo,
    ich brauchte diese Funktion auch - jedoch nur für die Standardgalerie....
    Falls jemand die Standardbildergalerie mit S/W Thumbnails möchte - muss nur ein Template anlegen (z.b. gallery_default_sw), und diesen Code einfügen
    HTML-Code:
    <table>
    <tbody>
    <?php foreach ($this->body as $class=>$row): ?>
    <tr class="<?php echo $class; ?>">
    <?php foreach ($row as $col): ?>
    <?php
    	$imageSW = "system/html/".basename($col->src,".jpg")."-sw.jpg";
    	
    	if(!file_exists($imageSW)){
    		$image = imagecreatefromjpeg($col->src);
    		imagefilter($image,IMG_FILTER_GRAYSCALE);
    		imagefilter($image,IMG_FILTER_CONTRAST,-4);
    		imagefilter($image,IMG_FILTER_BRIGHTNESS,1);
    		ob_start();
    		imagejpeg($image,NULL,90);
    		$stringData = ob_get_contents(); // read from buffer
    		ob_end_clean(); // delete buffer
    		//$gzipData = gzdeflate($stringData); // compress string data with gzip
    		file_put_contents($imageSW,$stringData,LOCK_EX);
    	}
    ?>
    <?php if (!$col->addImage): ?>
      <td class="<?php echo $col->class; ?> empty">[nbsp]</td>
    <?php else: ?>
      <td class="<?php echo $col->class; ?>" style="width:<?php echo $col->colWidth; ?>">
      <figure class="image_container"<?php if ($col->margin): ?> style="<?php echo $col->margin; ?>"<?php endif; ?>>
    <?php if ($col->href): ?>
        <a href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?> title="<?php echo $col->alt; ?>"><img src="<?php echo $imageSW; ?>" <?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>"></a>
    <?php else: ?>
        <img src="<?php echo $imageSW; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>">
    <?php endif; ?>
    <?php if ($col->caption): ?>
        <figcaption class="caption" style="width:<?php echo $col->arrSize[0]; ?>px"><?php echo $col->caption; ?></figcaption>
    <?php endif; ?>
      </figure>
      </td>
    <?php endif; ?>
    <?php endforeach; ?>
    </tr>
    <?php endforeach; ?>
    </tbody>
    </table>
    Dann bei der Galerie einfach das Template auswählen - fertig. Vielleicht benötigt das ja auch mal jemand....

    Grüsse Gassi
    Geändert von Gassi (09.07.2012 um 13:06 Uhr)

  10. #10
    AG Core-Entwicklung Avatar von Psi
    Registriert seit
    19.06.2009.
    Ort
    Mittelfranken
    Beiträge
    930
    Partner-ID
    5583
    User beschenken
    Wunschliste

    Standard

    <achtung> Beitrag nicht gelesen, nur Titel </achtung>

    Ich hab vor ewigen Zeiten mal n kleines Script geschrieben das Bildern mit der Klasse "grey" per Javascript SW darstellt und per Mousover farbig.
    Falls jemand interessiert, ich packs mal rein
    Angehängte Dateien Angehängte Dateien
    Anerkennung motiviert: Amazon-Wunschliste && TANSTAAFL
    Kontakt: http://www.4wardmedia.de

  11. #11
    Contao-Nutzer Avatar von darki777
    Registriert seit
    03.07.2009.
    Beiträge
    63

    Standard

    Scheinbar lesen sich mehrere Leute ungern den Inhalt durch

    @Gassi, das was du gepostet hast ist im Prinzip nix anderes als das was sich in meinem Anhang befindet
    @Psi, JS seitige Lösungen die mit Canvas, WebGL, SVG Libraries arbeiten um dieses Ziel zu erreichen sind sehr performance-lastig. Habe ich bisher bei ein paar Seiten getestet, sobald es ein paar mehr Bilder mit SW-Effekten werden ruckelt das Ganze wie sau xD Daher ist die serverseitige Lösung meist die bessere Wahl, dann muss es nicht zur Client-seitigen Laufzeit jedesmal neu generiert, verarbeitet (und animiert) werden.


    Gruß
    darki
    Geändert von darki777 (21.11.2012 um 20:18 Uhr)

  12. #12
    Contao-Nutzer
    Registriert seit
    09.11.2011.
    Beiträge
    50

    Standard

    Hallo Contao-Forum,

    ich habe das Tutorial für die Contao-Stadtartgallerie ausprobiert,
    leider werden keine Bilder in Schwarz-Weiß gespeichert und beim Aufruf des Grafiklinks im Browser erscheint die Fehlermeldung "Die Grafik enthält Fehler".

    Benutzt wird Contao 2.11.9, kann mir da jemand helfen? (Bin leider nur fit in HTML & CSS, beherrsche PHP leider nicht)

    Grüße aus München,
    Andi

  13. #13
    Contao-Fan
    Registriert seit
    20.06.2009.
    Ort
    Berlin
    Beiträge
    418

    Standard

    Hallo Tim,

    ich habe gerade gesehen, dass Du mal überlegt hast eine Erweiterung zu entwickeln.

    Hast Du durch Zufall in der letzten Zeit eine entwickelt?

    Vielen Dank

    Stefan


    Zitat Zitat von Tim G Beitrag anzeigen
    Ich hab schon länger eine phpimageprocessor Erweiterung auf meiner Liste, die diese Funktion für Bild-Inhaltselemente aller Art zur Verfügung stellt aus dem BE heraus.

    Was denkt ihr? Eher nur was fürs Template oder wäre eine zusätzliche NachbearbeitungsPalette ganz cool?

    Ich habs mal für den catalog gebraucht.

    Grüße,
    Tim


    Sent from my iphone using Tapatalk

  14. #14
    Contao-Nutzer
    Registriert seit
    07.06.2016.
    Beiträge
    118

    Standard

    Hallo,

    Ist dieser Zusatz noch aktuell nutzbar? Wenn ja wo kann ich die gallery_sw.js denn im Layout einbinden?
    Habe das mit dem Code im Seitenlayout versucht, aber dann kommt folgende Fehlermeldung im Footer der Seite:

    window.addEvent("domready",function(){ $$(".gallery_sw .image_wrapper").each(function(eli,cnt){ var imageOrig = eli.getElement(".image_orig"); var imageSW = eli.getElement(".image_sw"); var fxImageSW = new Fx.Tween(imageSW,{ duration:250, link:"chain" }); eli.addEvents({ "mouseenter":function(){ fxImageSW.start("opacity",1,0); }, "mouseleave":function(){ fxImageSW.start("opacity",0,1); } }); }); });

    Ich verstehe nur Bahnhof...kenn mich null mit Javascript aus und diese Lösung hier käme mir für mir Problem sehr gelegen!

    Danke für Antworten!

    Gruß
    Ben

  15. #15
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Das wird keine Fehlermeldung sein, sondern einfach der Inhalt des SCRIPT-Tags, welches von Contao nicht erlaubt ist. Du musst <script> in den Einstellungen hinzufügen.

    Achtung, das ist MooTools.

    Wenn es dir nur darum geht Bilder SW anzuzeigen und bei Hover farbig, dann brauchst du das nicht. Das kannst du dann mit CSS machen.
    PHP-Code:
    /* CSS */
    .ce_gallery img {
      
    filtergrayscale(1);
      
    transitionall 1s ease 0s;
    }
    .
    ce_gallery img:hover {
      
    filternone;

    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •