Javascript Bild in PopUp vergrößern?

Ich arbeite Zur Zeit an einer Website und habe dort einen Bildergalerie. Mein Ziel war es das man jedes der ca 30 Bilder mit einem klick in einem Popup vergrößern kann und mit einem x oben im Eck wieder weg drücken. Habe auf W3school auch einen code gefunden. Konnte in aber nur für 1 Bild pro Website verwenden und hätte für jedes der 30 Bilder alle Variablen verändern müssen um ihn mehrmals zu verwenden. Das ist natürlich mühsam und der Code wird unnötig lange. Darum meinen Frage: Hätte hier jemand einen passenden javascript Code. Suche jetzt schon 2 Tage nach einem guten Javascript code finde aber nichts :(.

Hier wäre noch das Beispiel wie es aussehen soll. Wie gesagt funktioniert der Code nur für 1 Bild pro Seite.

https://www.w3schools.com/howto/howto_css_modal_images.asp

2 Antworten

abbrechen

Topnutzer im Thema HTML

23.03.2017, 16:04

Versuche mit Klassen oder Tags zu arbeiten, das sollte bei der Datenmenge leichter sein. Hier ein Beispiel, allerdings jQuery basierend. https://codepen.io/mglissmann/pen/zxXvpq

kuechentiger

23.03.2017, 16:35

https://www.w3schools.com/howto/howto_js_lightbox.asp

Hallo,

ich bastele gerade mit dem HTML5 Canvas herum und möchte dort mit JavaScript ein Bild anzeigen, dies Funktioniert auch allerdings werden sie sehr komisch angezeigt, meist zu groß oder verschwommen hier der JavaScript code:

"function drawImage(url) {

var img = new Image();

img.onload = function () {

ctx.drawImage(img,10, 10, 35, 35);

}

img.src = url

hier habe ich schon mit den drawImage Parametern rumgespielt um es anzupassen allerdings kam kein gutes Ergebnis heraus...

Hier noch die canvas daten: width: 900px; height: 700px;

diese habe ich mit CSS angegeben.

Schonmal vielendank für eure Hilfe!

...zur Frage

Source Code von Website auslesen mit JavaScript?

Hallo,

ich bin gerade am verzweifeln. Ich wollte eigentlich nur noch kurz eine kleine Sache an meiner Website programmieren, aber jetzt hänge ich schon seit einer Stunde an einem Problem. Ich will einfach nur den Source Code von einer Website auslesen, also den in JavaScript dann als Variable haben, aber der Code funktioniert einfach nicht. Keine Ahnung warum. Habt ihr vielleicht Ideen?

Hinweis: Wenn ich ein alert in die onreadystatechange function mache wird dieses angezeit, doch wenn ich es in den if-Block darin einschließe nicht mehr.

...zur Frage

Html, Javascript <div> ab bestimmter Scrollposition einblenden?

Hallo!

Ich programmiere mir gerade eine Website und habe erst ein Menüband oben. Ab einer bestimmten Scrollposition soll dieses div verschwinden, und ein anderes auftauchen! Kann mir bitte jemand den Code senden? Danke!

...zur Frage

HTML (Website) Anmeldung und Benutzerprofile hinzufügen?

Hallo Liebe Community... Ich bin gerade dabei meine eigene Website zu programmieren, läuft auch ziemlich gut... Aber leider brauche ich bei einer Sache Hilfe. Und zwar möchte ich in die Website einbinden, das sich die Leute registrieren können, und dann einen Account haben... Auf dem sie ein Bild hinzufügen können, einen Status etc. (d.h. ihre Daten editieren können)

Nur leider habe ich keine Ahnung wie ich das machen soll, etwa in PHP, JavaScript... Kein Ahnung.

Währe lieb, wenn mir jemand sagen könnte, wie ich das machen kann, vllt auch gleich ein Tutorial verlinken oder gleich den Code schicken :) Währe cool...

Mfg Alexander

...zur Frage

Wenn man auf einer Website einen Button integrieren möchte, der die Farbe ändert wenn man mit dem Mauszeiger drüber geht, nutzt man da eher Javascript oder?

jQuery Code dafür? Und der Button soll natürlich wenn man mit der Maus wieder vom Button runtergeht die Ursprungsfarbe annehmen?

...zur Frage

Strato, Javascript, Trustami?

Guten Abend

Wollte einen Siegel von Trustami in meiner Website einbinden. Muss dafür einen Javascript Code auf meiner Website einfügen, nur ist da nur eine Tabelle wo mann HTML einfügen kann. Und immer wenn ich den Siegel einfüge verschwindet der Siegel nach dem ich die Seite neulade.

Ich hoffe jemand kann mir Helfen den ich habe echt kein Plan davon.

MfG

...zur Frage

Java script onklick button?

Ich möchte ein Javascript in meine Website einbauen um die Website übersetzen zu können. Diser Stadard Google translate Code sieht jedoch sehr unschön aus und ich wollte fragen, ob/wie es geht einen Knopf einzubauen, der einen Alert oder ein Popup auslöst, indem dieses Script ausgeführt wird und man die Sprache wählen kann.

Script:

<div id="google_translate_element"></div>
            <script type="text/javascript">
                function googleTranslateElementInit() {
                    new google.translate.TranslateElement(
                        { pageLanguage: 'de' },
                        'google_translate_element'
                    );
            }
            </script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

P.S. Falls es eine andere Möglichkeit gibt die Seite zu übersetzen (es handelt sich um einen Blog für mein anstehendes Auslandsjahr), also nur Von Deutsch zu Englisch notwendig, dass es Familie UND Gastfamilie lesen können bin ich gerne offen dafür

Danke schon einmal im Vorraus.

...zur Frage

Hide/Show-Element bei HTML Input Attribut "password" ausschalten?

Hey! Ich Code gerade eine kleine Website für mich selbst und benutze dafür CSS/Javascript/PHP und HTML. Jetzt ist mir in Firefox aufgefallen das es "Hide" und "Show" Buttons für die Passwörter gibt die ich gerne entfernen würde... weiß jemand wie das geht?

Danke im Vorraus!

PS: Die Teile tauchen automatisch auf... Es geht mir also nicht darum meinen Code zu verbessern oder das ganze daraus zu schreiben, sondern die Teile zu verhindern. Der Code hilft da nicht!

...zur Frage

Javascript: Wie erstelle ich eine Schleife von Zufallszahlen?

Hi, ich bin noch ein ziemlicher Anfänger beim Javascript-Programmieren. Aber ich habe hier einen Code, mit dem Bilder (ausgehend von einem Ordner) zufällig in einer Schleife dauernd abgespielt werden. Dies klappt jetzt schon ganz gut:

     <script type="text/javascript">
     function bildwechsel_starten()
     {
             bildwechselthread = setInterval("bildwechsel()", 2000);
     }
     function bildwechsel()
     {
             zufall = Math.random();
             zufall = zufall * 5;
             zufall = Math.round(zufall);
             document.getElementById("wechselndesbild").src = "TestOrdner/" + zufall + ".png";
     }

     </script>

Nun wäre es mein Wunsch, wenn man (am besten) unter den Bildern jedem Bild auch eigenen "Text" zuordnen könnte, der dann beim Erscheinen des Bildes auch erscheint. Und dieser "Text" sollte eine Zufallszahl sein & bei jedem Bild erscheint dann eine Zufallszahl in einem bestimmten Intervall, das sich bei jedem Bild unterscheidet. Zum Beispiel: Bild 1 ... Zufallszahl zwischen 5 und 10 Bild 2 ... Zufallszahl zwischen 14 und 30 Bild 3 ... Zufallszahl zwischen 2 und 4 ... usw ...

Kennt sich da jemand aus? Wie fange ich da am besten an? Ich habe hier eine Animation, um zu verdeutlichen, was ich meine: http://fs5.directupload.net/images/160718/jzdwwo2f.gif Das, was in der Klammer ist, sollte dann nicht stehen :D

Vielen Dank für eure Hilfe! :) :)

...zur Frage

Bilder von anderer Seite per HTML-Code einfügen?

Wie kann ich ein Bild was ich zum Beispiel auf meinem Webspace bei einem anderen Anbieter oder ein Bild welches ich auf einer anderen Website gefunden habe per HTML-Code einfügen??? Kann man das dann als Bildergalerie angezeigt bekommen???

...zur Frage

Wie kann ich mit einem Klick auf Download ein mit Javascript erstelltes Bild herunterladen? Rechtsklick auf Bild speichern unter lädt nur das Bild ohne den Tex?

Wie kann ich mit einem Klick auf Download ein mit Javascript erstelltes Bild herunterladen? Rechtsklick auf Bild speichern unter lädt nur das Bild ohne den Text herunter. Im Anhang ein paar Bilder und ich habe es schon versucht, aber es funktioniert nicht

...zur Frage

Website Bilder hervorheben lassen - Problem

Hallo :-)

Ich will, dass auf einer Website die Bilder hervorgehoben werden, wenn ich mit der Maus darüber fahre. Das klappt soweit, allerdings überlappt das vergrößerte Bild nur die vorhergehenden Bilder, nicht aber die Nachfolgenden (Bild als Beispiel).

Mein Code bisher ist:

 <img src="bild1.png" alt="bild" 
 style="border: 0; width: 60px; height: 75px;"
 onmouseover="this.style.width='90px'; this.style.height='113px'; this.style.top='81px'; this.style.left='85px';"
 onmouseout="this.style.width='60px'; this.style.height='75px'; this.style.top='100px'; this.style.left='100px';">

Bild1 ist:

.bild1 {
position: absolute;
top: 100px;
left: 100px;
}

Was muss ich am Code ändern, damit auch die nachfolgenden Bilder überlappt werden?

Der Code ist momentan nur provisorisch, Verbesserungsvorschläge nehme ich aber gern an ;-)

Danke schon mal

...zur Frage

Html mehrere Slideshows untereinander?

Hallo,

ich (Anfänger in dem Gebiet) muss für mein Studium eine Webseite erstellen. Eine Seite möchte ich für eine Bildergalerie nutzen.

Ich habe mir diese Slideshow ausgesucht : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow

Ich habe die Bilder zum ersten Thema eingefügt und alles funktioniert super.

Nun wollte ich zu einem anderen Thema diese Slideshow benutzen (mit anderen Bildern) und darunter setzen.

Nun bekomme ich das irgendwie nicht hin. Es öffnet sich keine neue Slideshow mit Bildern sondern nur die Pfeile zum weiter klicken und die dots, mit diesen koordiniere ich aber die erste slideshow.

Wäre nett wenn mir jemand helfen kann wie ich mehrere seperate slideshows erstellen kann, weil diese hier gefällt mir echt gut.

Danke !

...zur Frage

Wie kann man Bilder vergrößern (html/css)?

Ich habe zurzeit das Problem das ich ein Bild nicht vergrößern kann. Ich will, dass das Bild auch auf denn handys richtig zu sehen ist, deswegen will ich es ab 400px vergrößern. Könnte mir da jemand helfen? (Bin ein Anfänger)

Code in html -

Code in css -

@media only screen and (max-width: 400px) {

.img45 .links{

width: 300px; (habe es auch mit % probiert)

}

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen