Positionen in einem Bild markieren und statisch anzeigen

Wahrscheinlich keine Utopie, allerdings weiß ich nicht genau, was Du dir vorstellst. Bei Touch/Klick erscheint zunächst der Text mit dem Link darin; klickt/berührt man den Link wird das Bild angezeigt?
Hier hat man etwas ähnliches mit Tooltipster gemacht:
Nachrichtentisch Region SCHLESWIG-HOLSTEIN
Klicke einen Listenpunkt.
 
Zuletzt bearbeitet:
Hm... Ich habe jetzt eine Menge probiert und ich muss sagen, dass mir der Ursprung doch sehr gut gefällt! Jedenfalls auf meinem großen Moni.

Jedoch:

1. rutschen die Bilder aus dem Monitor raus beim Verkleinern (z.B. oben rechts), wie auch die Texte; ich kann die Positionen einfach nicht verändern, so dass alles z.B. auf einem Handy innerhalb des Displays bleibt.
Es müssen übrigens noch mehr Bilder rein...

2. Wie du schon angemerkt hast, fehlt eine Touch-Funktion.

Meinst du, dass meine Vorstellungen realisierbar sind?
 
rutschen die Bilder aus dem Monitor raus beim Verkleinern (z.B. oben rechts)
Zum Vergrößern anklicken....
Kann ich nicht reproduzieren, ich beobachte nur, dass die Bilder nach oben oder unten sich aus dem Fenster heraus bewegen, weil sich ihre Größe ändert - was unvermeidbar ist, wenn sie sich responsiv verhalten sollen. Das Kleiner- und Größerziehen macht man zwar beim Test häufig, für einen normalen Besucher ist es jedoch weniger relevant, weil dieser nicht dauernd die Größe ändert.
 
Du meinst also, dass ich das durchaus so lassen kann? Auch für mobile Geräte?
Zum Vergrößern anklicken....
Nicht vollständig:

Ich habe mich jetzt ein wenig weiter auf der Ballonfahrer-Seite umgesehen und folgendes ist mir aufgefallen:

Wie ich sehe, benutzt Du schon Fancybox, aber nicht die aktuelle Version 3. Die ältere hat den Nachteil, dass sie nicht touchready ist: Navigieren in der Galerie durch Wischen funktioniert nicht und die Pfeiltasten sind auch nicht sichtbar, weil sie offenbar durch Hover eingeblendet werden. Ich empfehle dringend, auf die Version 3 umzustellen.

Wenn ich mir die Seite auf meinem Handy ansehe (Samsung S4) erkenne ich auch, was Du gemeint hast, als Du schriebst, die Bilder fallen rechts heraus. Es sind die kleinen Popups, die erscheinen, wenn man auf die Hotspots tippt. Das geht so natürlich nicht. Warum nicht einfach auch hier Fancybox verwenden, dann werden die Popups automatisch zentriert und alles ist sichtbar?
 
Den Vorschlag mit Fancybox 3 habe ich an die Ersteller des CMS vorgeschlagen; danke!

Um ehrlich zu sein: Ich habe keine Ahnung, wie ich die Fancybox aufrufen soll, um die Bilder anzuzeigen... Und was mache ich mit den Texten?
 
Welchen Code Du brauchst, kann ich dir sagen, aber ich weiß nicht genau, inwieweit Du bei deinem CMS Zugriff auf das HTML und das Javascript hast?
Dieses funktioniert bei mir, nachdem ich deine Seite heruntergeladen habe:
HTML: 
                                        <!-- <div class="HotSpot bullet" style="top: 14.4%; left: 90.0%;">
                                            <p><span>Froschlache<span><img
                                                            src="Hufnagel-Ludwigshafen-Dateien/froschlache-30009.jpg"
                                                            alt=""> </span></span></p>
                                            <p> </p>
                                        </div> -->
                                        <a class="HotSpot bullet fancybox-custom" style="top: 14.4%; left: 90.0%;"
                                            title="Froschlache"
                                            href="Hufnagel-Ludwigshafen-Dateien/froschlache-30009.jpg">
                                        </a>
Das auskommentierte ist das, was momentan vorhanden ist und darunter der Code, den Du für Fancybox brauchst. Wie Du siehst, steht der Text im title-Attribut.
Und das JS ganz unten im Body, vor dem schließenden </body>
Code: 
    <script>
        $(".fancybox-custom").fancybox();
    </script>
</body>
Sieht dann so aus:
fancybox-froschlache.png
Das Schließen-Kreuz passt nicht ganz, aber das liegt u. U. an meiner Testumgebung.
 
Das ist richtig klasse! *hüpf

Das Bild ist nicht mehr so überladen durch diesen jetzigen kleinen Hinweistext, und ich kann größere Bilder einfügen, die auf großen Monitoren natürlich wesentlich besser wirken.

Einzig: Der Text, der bei dir in der Fancybox so nett aussieht, ist unsichtbar, wie auch das Schließen-X... (Das übrigens von der Lage her völlig unwichtig ist).

Und (ich bin jetzt echt gierig! *gg): Kann ich den Text "Froschlache" durch einen Zeilenumbruch erweitern und sogar einen Link einfügen?

Schau nochmal bitte hier rechts oben auf die Froschlache.

Ich hoffe sehr, dass dir meine Wünsche nicht zu sehr Arbeit machen!

Viele freudige Grüße

Norbert
 
Da ist leider die Fancybox gar nicht wirksam, sondern der Link wirkt ganz normal und öffnet das Bild, wobei die Seite verlassen wird.
Du hast zwar das Javascript eingefügt, aber am Ende des Head; dort sind die Elemente noch nicht definiert und der Aufruf führt ins Leere. Du musst das Javascript an das Ende des Body stellen, am besten vor Zeile 872, d. h. vor dem schließenden </body>.
Das mit dem Zeilenumbruch sehe ich mir noch an ...
 
... das war ziemlich schnell offensichtlich: Die runden Ränder um den Beschreibungstext sind leider nicht mit CSS realisiert, sondern mit Hintergrundgrafiken. Daher ist es nicht ohne weiteres möglich, den Text umzubrechen, weil sich dann die Ränder nicht anpassen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück