Dieses Forum nutzt Cookies
Dieses Forum verwendet Cookies, um deine Login-Informationen zu speichern, wenn du registriert bist, und deinen letzten Besuch, wenn du es nicht bist. Cookies sind kleine Textdokumente, die auf deinem Computer gespeichert sind; Die von diesem Forum gesetzten Cookies düfen nur auf dieser Website verwendet werden und stellen kein Sicherheitsrisiko dar. Cookies auf diesem Forum speichern auch die spezifischen Themen, die du gelesen hast und wann du zum letzten Mal gelesen hast. Bitte bestätige, ob du diese Cookies akzeptierst oder ablehnst.

Ein Cookie wird in deinem Browser unabhängig von der Wahl gespeichert, um zu verhindern, dass dir diese Frage erneut gestellt wird. Du kannst deine Cookie-Einstellungen jederzeit über den Link in der Fußzeile ändern.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Bilder per Klick vergrößern
#1
Hallo liebe Forumgemeinschaft,

sollte ich bei meiner Suche ggf. eine bereits vorhandene und für meinen Fall passende Antwort übersehen haben, so bitte ich um Nachsicht. Vermutlich wird das daran liegen das ich ggf. nicht die in der IT-Welt richtigen Bezeichnungen zur Suche verwendet habe. Nun aber mal mein Problem mit der Bitte um ein Hinweis ;-)


Ich "programmiere" (wenn man das überhaupt so nennen kann) ausschließlich privat und auch wirklich nur sehr "oberflächlich", insofern habe ich mir ein frei verfügbares Theme nebst diversen *.js, *.css aus dem Internet geholt:

  <!-- =======================================================
    Theme Name: Regna
    Theme URL: https://bootstrapmade.com/regna-bootstra...-template/
    Author: BootstrapMade.com
    License: https://bootstrapmade.com/license/
  ======================================================= -->

Soweit haben meine Anpassungen bis jetzt auch alle funktioniert. Ich scheitere jedoch kläglich dabei für Bilder eine Funktion hinzuzufügen, so dass diese bei einem Klick auf das Bild vergrößert werden und dann auch wieder verkleinert werden (z.B. durch einen Klick neben das vergrößerte Bild oder durch einen Klick auf ein "X" - optimal wäre natürlich beides).

Aktuell kann ich das Bild zwar über <a href=""> vergrößern, nur bekomme ich es dann nicht mehr klein. Mit der Funktion Modal auf dieser Seite hier https://www.w3schools.com/howto/howto_cs...images.asp habe ich diverse Implementierungsversuche unternommen nur komme ich an dieser Stelle leider auch nicht wirklich weiter.


Das hier wären die Bilder um die es geht ...

    <section id="portfolio">
      <div class="container wow fadeInUp">
        <div class="section-header">
          <h3 class="section-title">Hier meine Überschrift</h3>
          <p class="section-description">blablablablabla</p>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <ul id="portfolio-flters">
              <li data-filter=".filter-standa, .filter-standb, .filter-standc, .filter-standd" class="filter-active">All</li>
              <li data-filter=".filter-standa">Stand A</li>
              <li data-filter=".filter-standb">Stand B</li>
              <li data-filter=".filter-standc">Stand C</li>
              <li data-filter=".filter-standd">Stand D</li>
            </ul>
          </div>
        </div>
        <div class="row" id="portfolio-wrapper">
          <div class="col-lg-3 col-md-6 portfolio-item filter-standa">
            <a href="img/portfolio/standa.jpg">
              <img src="img/portfolio/standa.jpg" alt="">
              <div class="details70">
                <h4>Stand A</h4>
                <span>blablablablabla</span>
              </div>
            </a>
          </div>
          <div class="col-lg-3 col-md-6 portfolio-item filter-standd">
            <a href="">
              <img src="img/portfolio/standd.jpg" alt="">
              <div class="details50">
                <h4>Stand D</h4>
                <span>blablablablabla</span>
              </div>
            </a>
          </div>

         ... diverse weitere Einträge ...

        </div>


... wäre super wenn einer von euch eine Idee hätte und mir weiterhelfen könnte.

Lieben Dank
Gruß
Con
Zitieren
#2
Schau dir das mal an:
https://lokeshdhakar.com/projects/lightbox2/

Wenn du damit Schwierigkeiten bei der Umsetzung hast melde dich nochmal!
Zitieren
#3
Hallo und vielen Dank für den Hinweis!

Hat ein bisschen gedauert bis ich alles korrekt übernommen/eingetragen hatte aber jetzt geht es.

Lieben Dank
Gruß
Con
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
[-]
Willkommen im ersten deutschen Bootstrap-Forum
You have to register before you can post on our site.

Benutzername/E-Mail:


Passwort:





[-]
Letzte Beiträge
Schacteln 2er div s nebneinander
Last Post: The-Error
Gestern 11:37
» Replies: 3
» Views: 69
Navbar Dropdown 2 columns funktioniert n...
Last Post: Niamh
Gestern 11:29
» Replies: 2
» Views: 20
PostgreSQL oder mariaDB bei sehr grossen...
Last Post: rustybatman
Gestern 09:18
» Replies: 0
» Views: 8

[-]
Private Messages
Please login or register to use this functionality.

[-]
Statistics
» Members: 271
» Latest member: havor99
» Forum threads: 237
» Forum posts: 962

Full Statistics

[-]
Tutorials
Get Started
Text/Typography
Gridsystem
Dropdowns
Navigation Bar
Modal
Farben
Jumpotron
Popover
Formulare
Carousel (Slider)
Die Höhe von Elementen mit Klassen h-*
Flip Cards
Bild Overlay-Hover-Effekt
Google Fonts einbinden
Flexbox Bootstrap 4
Responsive Breakpoints

[-]
Wer ist online
There are currently no members online.

>