BILDER in originalgröße anzeigen

Goqu · 28. November 2017

Liebe Community,

ich hoffe dieser Thread gehört hier hin wenn nicht tut es mir leid aber ich brauche dringend hilfe

ich möchte für meinen bruder eine hp erstellen bin auch schon recht weit und wirklich fleißig, allerdings habe ich ein problem und das wäre dieses:

wenn ich auf die hp gehe http://www.testpage.bplaced.net und zum beispiel auf die kategorie pflasterarbeiten klicke und dann die ganzen bilder auftauchen möchte ich das, dass bild wo man drauf drückt in originalgröße angezeigt wird habe es so versucht:

<html>

<head>

<title>Pflasterarbeiten</title>

</head>

<body>

</div>

<h3>Pflasterarbeiten</h3>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

<a href="#" class="mehr">mehr zeigen</a>

</div>

</p>

</div>

</body>

</html>

Stef · 28. November 2017

Hey,

Methode 1:
Nutzung einer Bildergalerie, wie z.b. Highslide (kann ich sehr empfehlen).

Methode 2:
Du führst, bei einem click auf das Bild, CSS aus, welches du dann mittels javascript hinzufügst.

Beispiel:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Bilder in original Größe zeigen</title>
    <meta charset="utf-8">    

    <script>
        window.onload = function(){

            var img1 = document.getElementById("img1");
            var img2 = document.getElementById("img2");
            var img3 = document.getElementById("img3");
            var img4 = document.getElementById("img4");
            var img5 = document.getElementById("img5");
            
            img1.addEventListener("mouseover", zoom1);
            img2.addEventListener("mouseover", zoom2);
            img3.addEventListener("mouseover", zoom3);
            img4.addEventListener("mouseover", zoom4);
            img5.addEventListener("mouseover", zoom5);

            img1.addEventListener("mouseout", zoombackward1);
            img2.addEventListener("mouseout", zoombackward2);
            img3.addEventListener("mouseout", zoombackward3);
            img4.addEventListener("mouseout", zoombackward4);
            img5.addEventListener("mouseout", zoombackward5);

            function zoom1(){
                var img1 = document.getElementById("img1");
                img1.classList.add("zoom");

            }

            function zoom2(){
                var img2 = document.getElementById("img2");
                img2.classList.add("zoom");
            }

            function zoom3(){
                var img3 = document.getElementById("img3");
                img3.classList.add("zoom");
            }

            function zoom4(){
                var img4 = document.getElementById("img4");
                img4.classList.add("zoom");
            }

            function zoom5(){
                var img5 = document.getElementById("img5");
                img5.classList.add("zoom");
            }


            function zoombackward1(){
                var img1 = document.getElementById("img1");
                img1.classList.remove("zoom");

            }

            function zoombackward2(){
                var img2 = document.getElementById("img2");
                img2.classList.remove("zoom");
            }

            function zoombackward3(){
                var img3 = document.getElementById("img3");
                img3.classList.remove("zoom");
            }

            function zoombackward4(){
                var img4 = document.getElementById("img4");
                img4.classList.remove("zoom");
            }

            function zoombackward5(){
                var img5 = document.getElementById("img5");
                img5.classList.remove("zoom");
            }
            
            
        }
    </script>

    <style>
        section{
            margin-top: 100px;
            margin-left: 20%;
        }

        img.images{
            width: 300px;
            height: 150px;
            border: 2px solid black;
            margin-right: 10%;
            margin-bottom: 5%;
        }

        .images:hover{
            cursor: pointer;
        }


        .zoom{
            transform: scale(2,2);
        }
    </style>
</head>
<body>
    <section>
    
            <img class='images' id='img1' src="test1.png">
        
    
            <img class='images' id='img2' src="test2.png">
        
    
            <img class='images' id='img3' src="test3.png">
        
    
            <img class='images' id='img4' src="test4.png">
        
    
            <img class='images' id='img5' src="test5.png">
        
        
    </section>
</body>
</html>

Alles anzeigen

Mal ne Frage dazu:

Wenn ich es jetzt mit dem click-Event programmiere, dann habe ich doch das Problem, dass ich nicht nochmal ein click Event auf die selben Elemente registrieren kann, da ja die Funktion genau dort greift wenn man auf das Element klickt. Und dann geschieht nix, weil entweder beide funktionen aufgerufen werden oder es ein Fehler gibt.

Wie macht ihr es denn, wenn die Bilder bei einem Click zoomen sollen und nach dem zoomen, bei nem weiteren Click auf die Bilder, dass diese wieder zurückzoomen ?

basti1012 · 28. November 2017

ich würde es mit ner if abfrage machen und zwar so

https://jsfiddle.net/basti1012/wftn780c/

oder habe ich dich falsch verstanden

Sempervivum · 28. November 2017

Hallo Stef, wenn man es mit Hover macht, kann man es mit wenigen Zeilen CSS erledigen:

https://jsfiddle.net/Sempervivum/r68fbL99/

Stef · 28. November 2017

Ja, das ist mir auch bekannt. Nur ich wollte es erstmal mit click programmieren, nur als mir nicht klar war wie es zu machen ist, bin ich auf mouseover/mouseout umgestiegen.

Darum ja meine Frage:

Wenn ich es jetzt mit dem click-Event programmiere, dann habe ich doch das Problem, dass ich nicht nochmal ein click Event auf die selben Elemente registrieren kann, da ja die Funktion genau dort greift wenn man auf das Element klickt. Und dann geschieht nix, weil entweder beide funktionen aufgerufen werden oder es ein Fehler gibt.

Wie macht ihr es denn, wenn die Bilder bei einem Click zoomen sollen und nach dem zoomen, bei nem weiteren Click auf die Bilder, dass diese wieder zurückzoomen ?

basti1012 · 28. November 2017

hilft dir meine idee nicht??? schade ,habe wohl wieder was falsch verstanden(gesamtschüler halt)

Sempervivum · 28. November 2017

Nein, Du hast nichts falsch verstanden. Dein Ansatz ist richtig. Man muss ihn nur noch erweitern, so dass er auch funktioniert, wenn mehrere Bilder da sind. Ich empfehle, statt der globalen Variablen eine Klasse zu setzen und zu löschen.

basti1012 · 28. November 2017

ich habe das mal aus spass versucht aber ich kriege zwar alle bilder jeweils mit klicken gross und eins wieder zu aber nicht bei allen fenster,son mist fast geschafft

Sempervivum · 28. November 2017

Dann poste doch mal deinen Versuch, man kann es sicher zum Laufen bringen.

basti1012 · 28. November 2017

naja das lohnt wohl nicht wie ich mich kenne bin ich auf den falschen weg .kriege die bilder zwar gross aber nicht klein

https://jsfiddle.net/basti1012/54v205fn/

hatte zwar zwischen durch auch mal bilder klein gekriegt ,aber ich weiss nicht was ich da gemacht habe,ich komme da auch nicht mehr drauf. mist bin vergesslich

kann man klassen eigentlich auf false und true setzen???

habe es versucht aber wollte nicht wie ich wollte.ich meine so

class"image img1 bild1"

image=true;

bild1=false;

geht sowas,weil dann hätte ich nee idee wie es klappen könnte,aber meine spielerein haben bis jetzt nicht viel gebracht

Sempervivum · 28. November 2017

Wenn man eine Klasse verwendet, ist es relativ einfach:

https://jsfiddle.net/Sempervivum/54v205fn/6/

Man muss nur wissen, wie man sie setzt, abfragt und löscht, Stichwort classList.

Zitat

kann man klassen eigentlich auf false und true setzen???

Nein, eine Klasse hat keinen Wert, man kann sie nur hinzu fügen und löschen. Wenn man einen Wert speichern möchte, muss man ein data-Attribut verwenden:

Code

ele.setAttribute("data-zoomed", "true");

basti1012 · 28. November 2017

oh man ,manchmal ist die lösung doch einfacher als man denkt.

Ist doch auch was schönes ,so hat der themenersteller ja jetzt auch nee lösung wie es geht .

ich sollte mich mal mehr mit klassen beschäftigen,da kann man doch mehr mit machen als wie man denkt.

Das mit den klassen und vererben und sowas ist doch nee neuere variante oder?

vor 10 jahren oder so ähnlich gabs das doch noch nicht,oder sehr unbekannt.

Ich hatte vor ca 10 jahren schon mal mit javascript rumgespielt,da wahr das noch nicht so(zumindest nicht so bekannt).auch jquery habe ich damals nicht gesehen,oder nicht drauf geachtet

Sempervivum · 28. November 2017

OOP mit ihren Klassen und Objekten gibt es schon ein wenig länger:

Zitat

Den wirklichen Durchbruch erfuhr die objektorientierte Programmiersprache aber mit der heute immernoch sehr beliebten Sprache: C++ in den 1980er Jahren.

Schon in den 70er-Jahren ist die Programmiersprache C++ (gesprochen: C plus plus) als objektorientierte Weiterentwicklung der funktionalen Programmiersprache C entstanden. Vorgestellt wurde sie dann 1983 von ihrem Entwickler Bjarne Stroustrup.

http://www.oop-uml.de/oop-entwicklung.php

Man muss aber unterscheiden zwischen Klassen im Sinne von OOP und den Klassen von CSS. Vererbung gibt es nur bei ersteren.

Stef · 29. November 2017

Zitat

hilft dir meine idee nicht??? schade ,habe wohl wieder was falsch verstanden(gesamtschüler halt)

Doch die Idee von dir ist gut. Ich habe ja nur auf die Anmerkung von Sempervivum geantwortet.

BILDER in originalgröße anzeigen

Jetzt mitmachen!

Teilen

Tags