Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
[GELÖST] Hover Grayscale to Color
#1
Question 
Hallo Leute,

es geht um folgende Website: M2-3D.de, welche ich mir mühsam zusammengekümmelt habe und die höchstwahrscheinlich auch nicht eurem Standard entspricht.
Nichtsdestotrotz möchte ich unter dem Menüpunkt Referenzen die eingebetteten Flickr-Bilder gern in schwarz-weiß angezeigt bekommen,
welche sich dann beim Mausüber in der eigentlichen Farbpracht darstellen,
gern etwas verzögert bzw. mit Fadingeffekt.

In etwa so wie bei diesem Beispiel:
Grayscale Image Hover

Ich habe von eurem Metier so gut wie keine Ahnung und probiere mir nur einen zurecht.
Nach ca. 6 Stunden gebe ich es nun auf das obig genannte Problem in den Griff zubekommen.

Es wäre toll, wenn sich jemand die Mühe machen würde und mir genau erklärt, was ich einbinden muss, welchen Text ich in den Kopf eintragen soll und mit welchem Befehl ich das ganze hinbekomme.
Ich benutze Dreamweaver zum erstellen. Ich hoffe, dass es keinen extrem hohen Aufwandes bedarf.

Hier mal der Code vom ersten Bild:
Code:
<a data-flickr-embed="false" href="https://www.flickr.com/photos/135071508@N06/20113920446/in/album-72157656557201635/"
title="Firma Atmoshaus AG"><img src="https://c7.staticflickr.com/1/524/20113920446_3e423520aa.jpg" width="270" height="180" alt="Firma Atmoshaus AG"></a>
<script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

Danke euch vielmals im Voraus
Grüße Marcus
Zitieren
#2
Hi Marcus,

die Seite sieht gar nicht verkehrt aus, das Template kenne ich allerdings Wink

Erstmal sollte es reichen, wenn du die Zeile nur einmal, statt bei jedem Bild einfügst:
Code:
<script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

Dann zum Problem:

jQuery ist ja schon eingebunden.

Aber du musst jedem Bild bzw. dem <a>-Tag drumherum eine class geben, damit das script weiß, auf welche Bilder es angewendet werden muss.
Der Einfachheit halber mach mal "item", weil das dann gleich zum script passt:
Code:
<a class="item" data-flickr-embed="false" [...]

Dann musst du noch das script von der Seite in deiner HTML-Seite einbinden, also so:

Code:
<script type="text/javascript">
    
    // On window load. This waits until images have loaded which is essential
    $(window).load(function(){
        
        // Fade in images so there isn't a color "pop" document load and then on window load
        $(".item img").fadeIn(500);
        
        // clone image
        $('.item img').each(function(){
            var el = $(this);
            el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
                var el = $(this);
                el.parent().css({"width":this.width,"height":this.height});
                el.dequeue();
            });
            this.src = grayscale(this.src);
        });
        
        // Fade image
        $('.item img').mouseover(function(){
            $(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
        })
        $('.img_grayscale').mouseout(function(){
            $(this).stop().animate({opacity:0}, 1000);
        });        
    });
    
    // Grayscale w canvas method
    function grayscale(src){
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var imgObj = new Image();
        imgObj.src = src;
        canvas.width = imgObj.width;
        canvas.height = imgObj.height;
        ctx.drawImage(imgObj, 0, 0);
        var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
        for(var y = 0; y < imgPixels.height; y++){
            for(var x = 0; x < imgPixels.width; x++){
                var i = (y * 4) * imgPixels.width + x * 4;
                var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
                imgPixels.data[i] = avg;
                imgPixels.data[i + 1] = avg;
                imgPixels.data[i + 2] = avg;
            }
        }
        ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        return canvas.toDataURL();
   }
        
</script>

Probier das mal, falls es nicht klappt, lad es trotzdem hoch, damit man schauen kann, wo der Fehler liegt.
Viel Erfolg!
Allround Webdesign Freelancer | Design, HTML5, CSS3, JS, PHP, mySQL
Zitieren
#3
Rainbow 
Hallo am_,

ersteinmal vielen Dank für Deine schnelle Antwort und dass Du so hilfsbereit bist.
Ich habe den code, wie zuvor auch im Kopf unter </title> eingegeben, dann js/jquery.min.js eingebunden.

Hier mal eine Frage am Rande, was ist der Unterschied zwischen "jquery.min" und "jquery", ist ersteres nur ein Auszug?

Den Code des Flickr-Bildes wie folgt geändert:
Code:
<script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
                                   
<a class="item" data-flickr-embed="false" href="https://www.flickr.com/photos/135071508@N06/20113920446/in/album-72157656557201635/"
title="Firma Atmoshaus AG"><img src="https://c7.staticflickr.com/1/524/20113920446_3e423520aa.jpg" width="270" height="180" alt="Firma Atmoshaus AG"></a>

Leider tut sich dabei überhaupt nichts, außer dass das Anfangsbild aus der Reihe springt siehe: Website
(Im IE rutscht es zumindest nur nach oben)

Dieses
Code:
data-flickr-embed="false"
+
Code:
<script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

könnte ich doch auch eigentlich auch löschen, ich will ja nur einen Verweis auf das Flickr-Album herstellen und keine Social-Media oder dergleichen via Flickr einbinden.

Wenn ich in diesen Zeilen, wo ".item img" vorkommt nur "img" eingebe stellt er meine Portfolio images in graustufen dar. Also scheint es ja ansatzweise zu funktionieren.
Gebe ich .item ein (also mit Punkt), tanzt das Bild zumindest nicht mehr aus der Reihe. Grau wird es allerdings nicht, habe es auch mal mit einem Standardbild versucht - kein Erfolg. Sad
       
// Fade in images so there isn't a color "pop" document load and then on window load
        $(" img").fadeIn(500);

...

Hier nochmal der gesamte Code:

Code:
   <!-- References Section -->
   <section id="references" class="bg-light-gray">
       <div class="container">
         <div class="row">
               <div class="col-lg-12 text-center">
                 <h2 class="section-heading">Referenzen</h2>
                 <h3 class="section-subheading text-muted">Eine kleine Auswahl meiner bisherigen Projekte</h3>
                 
<script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
                                   
<a class="item" data-flickr-embed="false" href="https://www.flickr.com/photos/135071508@N06/20113920446/in/album-72157656557201635/"
title="Firma Atmoshaus AG"><img src="https://c7.staticflickr.com/1/524/20113920446_3e423520aa.jpg" width="270" height="180" alt="Firma Atmoshaus AG"></a>

...

              </div>
          </div>
        </div>
</section>


Grüße und besten Dank
Marcus
Zitieren
#4
(09.09.2016, 12:24)Bauzeichner schrieb: Ich habe den code, wie zuvor auch im Kopf unter </title> eingegeben, dann js/jquery.min.js eingebunden.
jquery ist in dem template eh schon eingebaut, du musst es also nicht nochmal einbinden.
jquery.min ist die minifizierte version, also ohne KOmmentare, Leerzeichen und Zeilenschaltungen, das spart ein paar kb, die nicht extra geladen werden müssen.


Das Problem ist, dass das script von flickr mit dem s/w-script nicht gut zusammenarbeitet.
Das Flickr-script sorgt wohl dafür, dass die Bilder schön angeordnet werden.

(09.09.2016, 12:24)Bauzeichner schrieb: Dieses
Code:
data-flickr-embed="false"
+
Code:
<script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

könnte ich doch auch eigentlich auch löschen, ich will ja nur einen Verweis auf das Flickr-Album herstellen und keine Social-Media oder dergleichen via Flickr einbinden.
Probier doch mal, dann sieht vermutlich die Anordnung nicht mehr so gut aus Sad

(09.09.2016, 12:24)Bauzeichner schrieb: Wenn ich in diesen Zeilen, wo ".item img" vorkommt nur "img" eingebe stellt er meine Portfolio images in graustufen dar. Also scheint es ja ansatzweise zu funktionieren.
Gebe ich .item ein (also mit Punkt), tanzt das Bild zumindest nicht mehr aus der Reihe. Grau wird es allerdings nicht, habe es auch mal mit einem Standardbild versucht - kein Erfolg. Sad

Man könnte das script sicher umbauen, dass es klappt, aber das ist mir gerade zu viel Arbeit Wink
Allround Webdesign Freelancer | Design, HTML5, CSS3, JS, PHP, mySQL
Zitieren
#5
Hallo am_,

die Anordnung und Größe der Bildchen hab ich ja selbst gemacht, da hatte Flickr nichts mit zu tun.

Code:
data-flickr-embed="false"
stand vorher auf "true" und dann ist meine Anordnung komplett über den Haufen geschmissen worden, weil Flickr das Original-Seitenverhältnis eingeblendet hat.

Egal, ich hab das jetzt alles rausgenommen und es sieht immernoch vernünftig angeordnet aus: siehe Website unter Referenzen
Code:
<a href="https://www.flickr.com/photos/135071508@N06/20113920446/in/album-72157656557201635/"
title="Firma Atmoshaus AG"><img src="https://c7.staticflickr.com/1/524/20113920446_3e423520aa.jpg" width="270" height="180" alt="Firma Atmoshaus AG"></a>

Ich kann es mir nur so erklären, dass dieses Script die besagten Images nicht findet, weil sie falsch klassifiziert sind.

Ich habe mal sowas versucht:
Code:
<img src="https://c7.staticflickr.com/1/524/20113920446_3e423520aa.jpg" class="item img" width="270" height="180" alt="Firma Atmoshaus AG">

Leider ohne Erfolg. Sad

Deshalb nochmal die Frage an alle: Wie bekomme ich es hin, dass aus obig genanntem Bild ein ".item img" wird.

Vielen Dank im Voraus
Danke an Dich am_ für Deine Mühen

Gruß Marcus
Zitieren
#6
Ich habe unter Konsole in Firefox folgende Fehler ausfindig machen können:

Unbekannte Eigenschaft 'webkit-tap-highlight-color'.  Deklaration ignoriert.agency.min.css:5:279
Unbekannte Eigenschaft '-moz-background-size'.  Deklaration ignoriert.agency.min.css:5:4042
Unbekannte Pseudoklasse oder Pseudoelement '-webkit-input-placeholder'.  Regelsatz wegen ungültigem Selektor ignoriert.agency.min.css:15:656
Unbekannte Pseudoklasse oder Pseudoelement '-ms-input-placeholder'.  Regelsatz wegen ungültigem Selektor ignoriert.agency.min.css:15:1125
Unbekannte Pseudoklasse oder Pseudoelement 'selection'.  Regelsatz wegen ungültigem Selektor ignoriert.agency.min.css:15:3292
Unbekannte Pseudoklasse oder Pseudoelement 'selection'.  Regelsatz wegen ungültigem Selektor ignoriert.agency.min.css:15:3343
unreachable code after return statement[Weitere Informationen]jquery.min.js:19:13091
Unbekannte Eigenschaft '-moz-osx-font-smoothing'.  Deklaration ignoriert.font-awesome.min.css:4:660
Unbekannte Pseudoklasse oder Pseudoelement '-webkit-inner-spin-button'.  Regelsatz wegen ungültigem Selektor ignoriert.bootstrap.min.css:5:1544
Unbekannte Pseudoklasse oder Pseudoelement '-webkit-search-cancel-button'.  Regelsatz wegen ungültigem Selektor ignoriert.bootstrap.min.css:5:1778
Unbekannte Eigenschaft 'orphans'.  Deklaration ignoriert.bootstrap.min.css:5:2691
Unbekannte Eigenschaft 'widows'.  Deklaration ignoriert.bootstrap.min.css:5:2700
Unbekannte Eigenschaft '-moz-osx-font-smoothing'.  Deklaration ignoriert.bootstrap.min.css:5:3676
Farbe erwartet, aber 'auto' gefunden.  Farbe erwartet, aber '-webkit-focus-ring-color' gefunden.  Ende des Werts erwartet, aber '-webkit-focus-ring-color' gefunden.  Fehler beim Verarbeiten des Wertes für 'outline'.  Deklaration ignoriert.bootstrap.min.css:5:15689
Fehler beim Verarbeiten des Wertes für 'margin-top'.  Deklaration ignoriert.bootstrap.min.css:11:19472
Farbe erwartet, aber 'auto' gefunden.  Farbe erwartet, aber '-webkit-focus-ring-color' gefunden.  Ende des Werts erwartet, aber '-webkit-focus-ring-color' gefunden.  Fehler beim Verarbeiten des Wertes für 'outline'.  Deklaration ignoriert.bootstrap.min.css:11:19699
Unbekannte Pseudoklasse oder Pseudoelement '-ms-input-placeholder'.  Regelsatz wegen ungültigem Selektor ignoriert.bootstrap.min.css:11:20630
Unbekannte Pseudoklasse oder Pseudoelement '-webkit-input-placeholder'.  Regelsatz wegen ungültigem Selektor ignoriert.bootstrap.min.css:11:20678
Unbekannte Pseudoklasse oder Pseudoelement '-ms-expand'.  Regelsatz wegen ungültigem Selektor ignoriert.bootstrap.min.css:11:20730
Name einer Medienfunktion erwartet, aber '-webkit-min-device-pixel-ratio' gefunden.bootstrap.min.css:11:21064
Fehler beim Verarbeiten des Wertes für 'margin-top'.  Deklaration ignoriert.bootstrap.min.css:11:22177
Unbekannte Eigenschaft 'touch-action'.  Deklaration ignoriert.bootstrap.min.css:11:29115
Unbekannte Eigenschaft 'user-select'.  Deklaration ignoriert.bootstrap.min.css:11:29223
Farbe erwartet, aber 'auto' gefunden.  Farbe erwartet, aber '-webkit-focus-ring-color' gefunden.  Ende des Werts erwartet, aber '-webkit-focus-ring-color' gefunden.  Fehler beim Verarbeiten des Wertes für 'outline'.  Deklaration ignoriert.bootstrap.min.css:11:29404
'none', URL oder Filterfunktion erwartet, aber 'alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert.bootstrap.min.css:11:29750
Farbe erwartet, aber 'solid\9 ' gefunden.  Ende des Werts erwartet, aber 'solid\9 ' gefunden.  Fehler beim Verarbeiten des Wertes für 'border-top'.  Deklaration ignoriert.bootstrap.min.css:11:38676
'none', URL oder Filterfunktion erwartet, aber 'progid' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert.bootstrap.min.css:11:40043
Farbe erwartet, aber 'solid\9 ' gefunden.  Ende des Werts erwartet, aber 'solid\9 ' gefunden.  Fehler beim Verarbeiten des Wertes für 'border-bottom'.  Deklaration ignoriert.bootstrap.min.css:11:40588
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert.bootstrap.min.css:11:68779
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert.bootstrap.min.css:11:68965
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert.bootstrap.min.css:11:69684
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert.bootstrap.min.css:11:69870
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert.bootstrap.min.css:11:70310
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert.bootstrap.min.css:11:70496
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert.bootstrap.min.css:11:70942
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert.bootstrap.min.css:11:71128
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert.bootstrap.min.css:11:71572
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert.bootstrap.min.css:11:71758
Unbekannte Eigenschaft 'zoom'.  Deklaration ignoriert.bootstrap.min.css:11:72194
'none', URL oder Filterfunktion erwartet, aber 'alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert.bootstrap.min.css:11:89437
'none', URL oder Filterfunktion erwartet, aber 'alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert.bootstrap.min.css:11:89546
'none', URL oder Filterfunktion erwartet, aber 'alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert.bootstrap.min.css:11:90755
'none', URL oder Filterfunktion erwartet, aber 'alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert.bootstrap.min.css:11:90808
'none', URL oder Filterfunktion erwartet, aber 'alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert.bootstrap.min.css:11:91958
Unbekannte Eigenschaft 'line-break'.  Deklaration ignoriert.bootstrap.min.css:11:91995
'none', URL oder Filterfunktion erwartet, aber 'alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert.bootstrap.min.css:11:92020
Unbekannte Eigenschaft 'line-break'.  Deklaration ignoriert.bootstrap.min.css:11:94002
Name einer Medienfunktion erwartet, aber 'transform-3d' gefunden.bootstrap.min.css:11:95840
Name einer Medienfunktion erwartet, aber '-webkit-transform-3d' gefunden.bootstrap.min.css:11:95855
'none', URL oder Filterfunktion erwartet, aber 'alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert.bootstrap.min.css:11:97177
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert.bootstrap.min.css:11:97246
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert.bootstrap.min.css:11:97333
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert.bootstrap.min.css:11:97415
'none', URL oder Filterfunktion erwartet, aber 'progid' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert.bootstrap.min.css:11:97592
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert.bootstrap.min.css:11:97789
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert.bootstrap.min.css:11:97876
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert.bootstrap.min.css:11:97958
'none', URL oder Filterfunktion erwartet, aber 'progid' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert.bootstrap.min.css:11:98135
'none', URL oder Filterfunktion erwartet, aber 'alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert.bootstrap.min.css:11:98360
Farbe erwartet, aber '#\30 00\9 ' gefunden.  Fehler beim Verarbeiten des Wertes für 'background-color'.  Deklaration ignoriert.bootstrap.min.css:11:99309

Hat das eventuell etwas damit zu tun? Wie bekomme ich das ins Reine? Ich habe nämlich das Gefühl, dass die Seite am Anfang etwas langsam läd.

PS: Ich bin bereit auch Geld dafür zu zahlen, via PayPal oder bei einem Treffen in Berlin.
Hier soll keiner was umsonst machen! Shy

Gruß Marcus
Zitieren
#7
Hab dir eine Nachricht geschrieben!
Allround Webdesign Freelancer | Design, HTML5, CSS3, JS, PHP, mySQL
Zitieren
#8
Wink 
Hallo zusammen,

ich habe es hinbekommen! Big Grin 


Und zwar muss jquery.min.js wirklich in den Kopf miteingebunden werden:
(Ich habe auf die Version in dem Beispiel geupdated 1.4.4 vorher 1.3.)

Code:
   <script src="js/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript">

mit den verlinkten Flickr-Vorschau-Bildern klappt es leider nicht, daher alle runterladen und in einen separaten Ordner.
Und dann einfach wie gehabt einbinden, nur mit <div class="item">...</div> am Anfang.

Code:
<div class="item">                                    
<a href="https://www.flickr.com/photos/135071508@N06/20113920446/in/album-72157656557201635/" title="Firma Atmoshaus AG">
<img src="img/references/1.jpg" width="270" height="180" alt="Firma Atmoshaus AG"></a>
</div>

Das war alles.
Vielen Dank

PS: Mein Angebot steht noch, falls sich einer die Mühe machen möchte und gegen einen Obolus den Quelltext ins Reine bringen kann.
Auf Rechnung versteht sich. Sleepy 

Grüße Marcus
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste