Ergebnis 1 bis 10 von 10

Thema: Gallerie mit Links versehen

  1. #1
    HTML Newbie
    Registriert seit
    08.08.2018
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Gallerie mit Links versehen

    Hallo zusammen,


    ich such schon nach Tagen eine Lösung für mein Problem:


    Und zwar habe ich auf meiner HP eine Bildergallerie bei der bei Mouseover 2 icons erscheinen. eins zum vergrößern das Bildes in einer Overlay gallery und das andere mit link zum projekt.
    Der link zum Projekt funktioniert. aber das bild das eigentlich als overlay geöffnet werden soll, öffnet sich nur groß im Fenster und man muss es über den zurückbutton wieder schließen.

    Ich habe diesen effect bei mir verwendet. Schaut auch soweit gut aus. nur geht der "lupen"-link nicht




    Mit js kenn ich mich leider nicht so gut aus.


    Hoffentlich kann mir jemand helfen


    HTML:


    <div class="item col-lg-4" data-groups='["ui"]'>
    <div class="box">
    <img src="small-img/project1.jpg">
    <figure>
    <div class="box-content">
    <div class="inner-content">
    <ul class="icon">
    <li><a href="big-img/project1.jpg" alt=""><i class="fa fa-search"></i></a></li>
    <li><a href="#about"><i class="fa fa-link"></i></a></li>
    </ul>
    </div>
    </div>
    </figure>
    </div>
    </div>


    Css:


    .box{
    background: #000;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    }
    .box img{
    width: 100%;
    height: auto;
    transition: all 0.35s ease 0s;
    }
    .box:hover img{ opacity: 0.5; }
    .box .box-content{
    padding: 30px 10px 30px 0;
    background: rgba(0, 0, 0, 0.65);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    transition: all 0.35s ease 0s;
    }
    .box:hover .box-content{
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    opacity: 1;
    }


    .box .icon{
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 22px;
    position: absolute;
    top: 50%;
    }
    .box .icon li{
    display: inline-block;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.35s ease 0s;
    }
    .box:hover .icon li{
    opacity: 1;
    transform: translateY(0px);
    }
    .box:hover .icon li:first-child{ transition-delay: 0.1s; }
    .box:hover .icon li:nth-child(2){ transition-delay: 0.2s; }
    .box .icon li a{
    display: block;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #f39c12;
    font-size: 20px;
    color: #000;
    line-height: 35px;
    margin-right: 5px;
    transition: all 0.35s ease 0s;
    }
    .box .icon a:hover{ background: #fff; }
    @media only screen and (max-width:990px){
    .box{ margin-bottom: 20px; }
    }
    Geändert von stephie18582 (08.08.2018 um 14:04 Uhr)

  2. #2
    Azubi(ne)
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    93
    Danke
    0
    Bekam 18 mal "Danke" in 18 Postings

    Standard AW: Gallerie mit Links versehen

    Was soll den genau passieren wenn man auf der Lupe klickt ?
    Das andere Icon zeigt bei mir auch kein Effekt. Das Bild / bzw Browserfenster springt nur kurz und das wahrs

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    08.08.2018
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Gallerie mit Links versehen

    wenn man auf die lupe klickt soll sich das bild als "overlay" öffnen und nicht im ganzen fenster. Der andere link (geht auf die Projektseite) ist eigentlich außen vor, der funktioniert bei mir.

  4. #4
    Azubi(ne)
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    93
    Danke
    0
    Bekam 18 mal "Danke" in 18 Postings

    Standard AW: Gallerie mit Links versehen

    Was verstehst du den unter overlay.? Da habe ich in der letzten Zeit so viele verschiedene Sachen gehöhrt das ich bald selbst schon durcheinander komme.
    Es gibt ja biele arten dein Bild groß anzuzeigen.

    -Einfach ein Container wo das Bild größer als jetzt angezeigt wird.
    -Fertige Scripte wie Lightbox oder andere.
    -usw.

    Hast du für dein Overlay ein Script was das Bild aufruft ? Kann gerade nix finden ?

    Ich habe bei Codepen mal ein Script gemacht was die Bilder in ein Container liest und mitten Im Browser anzeigen läßt.
    Das ist alles kein problem .Nur weiß ich nicht was du dir genau vorstellst

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    08.08.2018
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Gallerie mit Links versehen

    das bild soll sich lightbox-ähnlich öffnen (mit x im eck zum wieder schließen) . Am besten wäre es natürlich noch, wenn man sich dann durch alle bilder die als thumbs da sind durchklicken könnte.

  6. #6
    Azubi(ne)
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    93
    Danke
    0
    Bekam 18 mal "Danke" in 18 Postings

    Standard AW: Gallerie mit Links versehen

    Also so ?
    http://sebastian1012.bplaced.net/hom...genelight.php#

    Aber

    Zitat Zitat von stephie18582 Beitrag anzeigen
    Am besten wäre es natürlich noch, wenn man sich dann durch alle bilder die als thumbs da sind durchklicken könnte.
    Für genau sowas gibt es doch Lightboxen und andere fertige Scripte
    Geändert von basti1012 (08.08.2018 um 19:26 Uhr)

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    08.08.2018
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Gallerie mit Links versehen

    ja genau so ähnlich.

    hab versucht die lightbox einzubauen, dann funktioniert aber seltsamer weise der ander link nicht mehr. Frag mich nicht wieso

    - - - Aktualisiert - - -

    ich mir ein html template runtergeladen, das ich meinen bedürfnissen optimiere. da mir da aber die portfolioübersicht designtechnisch nicht passt hab ich diese angepasst. in dieser version habe ich aber leider die beiden links nicht nebeneinander bekommen. sie waren quasi übereinander und dementsprechend hat dann nur ein link funktioniert. also hab ich mir dann einen anderen effect via css eingebaut. der ja auch wunderbar funktioniert, nur fehlt mir nun der "link" damit sch bei der lupe die lightbox öffnet. bzw ich glaub das ist gar nicht die lightbox, sondern magnific popup. und da fängt mein problem glaub ich auch schon an

  8. #8
    Azubi(ne)
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    93
    Danke
    0
    Bekam 18 mal "Danke" in 18 Postings

    Standard AW: Gallerie mit Links versehen

    Ja wie du beim mir siehst kannst du so ein simpeln overlay schnell zusammen bauen. Besser wäre eine komplette Lightbox. Ich benutze die bis jetzt auch noch nicht ,weiß aber von anderen das die ganz simpel angepasst ist und dann kannst du auch die Bilder Blättern wie du es vor hattest.
    Das läst sich bei meiner Demo auch mit einbauen ,das ist keine große Kunst.

    Aber warum das Rad neu erfinden wenn es doch schon Lightboxen gibt.


    Was ist den mit den 2 ten Link ,was soll der den genau machen ? Weil der Link geht bei mir nicht wenn ich auf deiner Seite gehe.

  9. #9
    HTML Newbie
    Themenstarter

    Registriert seit
    08.08.2018
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Gallerie mit Links versehen

    Ja, richtig. Deshalb auch das html template zum anpassen.
    Hier findest zu meine erste roundabout Lösung.
    Wenn du auf das Bild klickst öffnet sich die „Galerie“ ( was mit dem Klick auf die Lupe passieren soll). In der Bildunterschrift befindet sich ein Stern und wenn man auf den klickt ist das der Effekt was das andere Icon machen soll

  10. #10
    Azubi(ne)
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    93
    Danke
    0
    Bekam 18 mal "Danke" in 18 Postings

    Standard AW: Gallerie mit Links versehen

    Komischerweise passiert bei mir nix wenn ich auf das Bild klicke.Vieleicht stimmt hier irgend was nicht. Weiß ja nicht ob die anderen es sehen können nur hier geht wieder nix.Bei mein Browser wundert mich das auch nicht mehr. Ich lade mir mal ein anderen runter weil so kann ich jetzt nicht weiter helfen weil sehe ja nicht was du genau meinst

Ähnliche Themen

  1. Gallerie von links nach rechts.
    Von Darkromeo im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 16.04.2007, 21:43
  2. Gallerie
    Von pure im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 4
    Letzter Beitrag: 17.12.2005, 11:16
  3. Gallerie mit Kommentaren versehen
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 8
    Letzter Beitrag: 02.08.2005, 20:18
  4. Gallerie
    Von <vincent> im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 01.07.2005, 18:57
  5. Die gallerie
    Von Lion im Forum Forum-Hilfe.de intern
    Antworten: 14
    Letzter Beitrag: 05.04.2005, 22:17

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •