BILDER in originalgröße anzeigen

  • 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>

    <meta charset="UTF-8">

    <title>Pflasterarbeiten</title>

    <link rel="stylesheet" href="css/style.css" type="text/css">

    </head>

    <body>

    <div id="header">

    <div class="section">

    <div class="logo">

    <a href="index.html"></a>

    </div>

    </div>

    </div>

    <div id="body">

    <h3>Pflasterarbeiten</h3>

    <ul>

    <li>

    <a href="#"><img src="images/pflaster/pflaster.jpg" alt=""></a>

    </li>

    <li>

    <a href="#"><img src="images/pflaster/pflaster2.jpg" alt=""></a>

    </li>

    <li>

    <a href="#"><img src="images/pflaster/pflaster3.jpg" alt=""></a>

    </li>

    <li>

    <a href="#"><img src="images/pflaster/pflaster4.jpg" alt=""></a>

    </li>

    <li>

    <a href="#"><img src="images/pflaster/pflaster5.jpg" alt=""></a>

    </li>

    <li>

    <a href="#"><img src="images/pflaster/pflaster6.jpg" alt=""></a>

    </li>

    <li>

    <a href="#"><img src="images/pflaster/pflaster7.jpg" alt=""></a>

    </li>

    </ul>

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

    </div>


    &copy; Marco Skvorc 2017 | all rights reserved.

    </p>

    </div>

    </div>

    </body>

    </html>

  • 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:

    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 ?

  • 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 ?

  • 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.

  • 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

  • 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");
  • 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:)

  • 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.

  • 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.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!