Beiträge von Peregrina

    Hallo Sempervivum,

    Dank deiner zahlreichen Tipps konnte ich nun schon so einiges abändern, so das die Gallery langsam die Gestalt annimmt, die ich mir vorstelle. Vielen Dank dafür. Hast du vielleicht noch ein oder zwei Ratschläge, wie ich die Bilder in der geöffneten Fancybox und nur die links und rechts Pfeile ansprechen kann? Ich möchte den Bildern einen Rahmen und einen Schatten verpassen. Der Hintergrund für die Pfeile soll rund werden und die Pfeile selbst würde ich auch gern durch andere ersetzen. Mit .Fancybox-button spricht er alle Buttons an. Das ganze hier wird langsam zu einer großen Herausforderung für mich. Bin froh schon so weit zu sein, dank deiner Hilfe.

    Sempervivum, nun hätte ich doch gern noch ein paar Fragen. Ich würde gern ein paar Stylesheets abändern. Da ich nicht genau weiß, wie ich das hier machen kann, hab ich einfach mal etwas ausprobiert. Zuerst habe ich im Stylesheet der Fancyboc geschaut. Dort hab ich leider keinen Überblick. Hab da nicht mal die ID "" starting gefunden. Dann habe ich hier eine eigene css Datei extra angelegt. Das komische ist, das er manche Styles von mir annimmt und manche nicht. Das Startbild zum Beispiel soll rund sein und 200pxx200px bekommen. Das hat er auch so angenommen. Aber nun wollte ich dem noch einen box-shadow verpassen, das macht er wieder nicht. Des weiteren sollte das Bild ein Hover bekommen. In der geöffneten Fancybox wollte ich auch ein paar Änderungen vornehmen, die er aber auch nicht annimmt. Am besten, ich stelle mal meine css mit rein. Kann man das überhaupt umsetzen und wenn, wie?


    Meine Testdatei sieht genau so aus wie deine, nur dass ich meine eigenen Bildpfade habe und sie funktioniert einwandfrei. Wirf einen Blick in die Console, ob Du dort Hinweise findest. Und, wenn möglich, stelle es online und poste die URL.

    Hey supi, jetzt geht es auf einmal. Ich danke Dir:.:):):)

    <script src="js/jquery.min.js"></script>

    Wo bekomm ich diese Datei her. Im dist Ordner ist Sie nicht. Und das ganze muss dann vor dem schließenden body-tag oder kann das auch im head rein? Hab beides ausprobiert und es geht immer noch nicht. :(:(:(

    Das kann man abkürzen, indem man die Liste mit einem kleinen PHP-Skript generiert. Einschränkung dabei: Es entsteht nur die Liste mit den Dateinamen, die Beschreibungen müsstest Du immer noch manuell eingeben.


    Oh mein Gott. PHP hab ich auch keine Ahnung. Hab bisher alles nur mit HTML und CSS gemacht. :(:(:(

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

    Das versteh ich schon eher. Du verweist hier auf die Website von Fancybox. Ist es nicht besser Fancybox herunter zu laden und die Dateien auszulagern? Genügt dann die min.css und die min.js?

    Das ist eine etwas ungewöhnliche Anforderung an eine Galerie aber sie ist mir früher schon mal begegnet und es ist kein Problem, es so zu realisieren. In der Doku für die API der Fancybox:

    https://fancyapps.com/fancybox/3/docs/#api_usage

    wird beschrieben, wie man eine Galerie durch Javascript, ohne HTML und Vorschaubilder anlegen kann. Versuche, ob das dem entspricht, was Du dir vorstellst.

    Das ist ja sehr lieb von Dir gemeint, Sempervivum, aber ich versteh da nur Bahnhof. Wir haben das mal in einer Weiterbildung mit der Lightbox gemacht. Mir ist leider der Stick abhanden gekommen und nun steh ich da und muss selbst irgendwie eine Lösung finden. Das ein zigste, woran ich mich noch erinnert kann, das der Dozent den Miniaturbildern ein display: none; verpasst hat Hab schon überlegt, ob man das irgendwie mit einem input Button hinbekommen kann. Kann man einem input Button ein div übergeben?

    Hallo @all,


    Nun möchte ich für mich doch ein schwieriges Thema angehen, worüber andere vielleicht nur lächeln können. Ich möchte eine Fotogallery erstellen nur mit HTML und CSS. Habe schon weitläufig im Netz gesucht, was dem gleich kommt, was ich mir vorstelle. Bin leider nicht fündig geworden. Die Frage ist, ob man dies auch ohne Javascript umsetzen kann. Hab selbst schon versucht mit Lightbox oder auch Fancybox das Vorhaben um zu setzen. Auch bei Codepan habe ich schon erfolglos gesucht. Leider bin ich nicht weiter gekommen, als Miniaturbilder anklickbar zu machen. Ich beschreibe mal meine Vorstellung. Ich möchte eigentlich nur ein Miniaturbild zum anklicken und darunter soll sich dann die Gallery mit mehrere Bilder befinden durch die man vor und zurück blättern kann. Der Hintergrund sollte dunkel transparent sein. Das Ihr euch das einigermaßen vorstellen könnt, geht bitte auf https://fancyapps.com/fancybox/3/. Unten unter Demos. Open/close animation type auf zoom stehen lassen. Transition effect between slides stellt Ihr auf slide. Elements Navigation arrows und Translation auf German. In dem Beispiel seht Ihr jedoch mehrere Miniaturbilder, ich möchte nur eines.

    So funktioniert es:

    Code
    1. .boxtwo:hover p {
    2. opacity: 0
    3. }

    Wenn Du dem .boxtwo p eine Transition zuweist, wird der Text auch sanft ein- und ausgeblendet.

    Ich glaub dich hat ein Engel geschickt, vielen lieben Dank. Wusste gar nicht, das man nach dem hover auch einen Html Tag zuweisen kann. :):):) Und wieder was dazu gelernt.

    Hallo,


    Wie bekomme ich den Text beim hovern weg. display:none; z-index; funktioniert schon mal nicht

    Tolle Grundlage, hab nur noch allem items eine Höhe von 300px zugewiesen und eine Außenabstand von 50px.

    Du hast allen im Container befindlichen items ein Hover verpasst. Item1 soll nicht gehovert werden, sondern nur item2- item6. Hm, wie bekomm ich jetzt das Hover bei Item1 wieder raus? Schon mal ein ganz liebes Dankeschön an dich, m.scatello.

    Hallo @ all!


    Bin momentan so richtig am verzweifeln und hoffe das mir jemand helfen kann. Und ja ich lerne noch.

    Ich versuche mal zu umschreiben, was ich vorhabe. Ich habe einen Div Container von 1100px x 1100px. In diesen Div Container sollen nun insgesamt 7 kleine Div Container rein. Div1 soll horizontal 1000px und vertikal 300px sein mit einem Außenabstand von 50px. Darunter sollen nun 6 Div boxen mit 300px x 300px. diese sollen ebenfalls einen Außenabstand von 50px haben Diese 6 Div boxen sollen ebenfalls einen Hover effect bekommen. ich habe nun mehrere Varianten probiert, aber irgendwo hackt es immer. Da ich mich an den Varianten versucht habe, die im Titel stehen, weiß ich nicht, was ihr so bevorzugt und welchen Code ich rein stellen soll.

    Verzichte auf position-Angaben.


    Verwende stattdessen CSS-Grid (display: grid;)


    Wieso display:grid? Dann sind sie ja untereinander bzw. nebeneinander. Und ich kann boxone doch nicht zwei display Angaben verpassen.

    Ich habe zwei div Container, boxone und boxtwo und suche nun schon etwas länger nach einer Lösung nur mit css. Sie liegen übereinander. Nun möchte ich, das boxtwo durch hover über boxone sichtbar wird. Geht das überhaupt nur mit css? Hier mal mein Code, der logischerweise so nicht funktionieren kann.