Ein verlinktes größeres Bild im selben Fenster öffnen und mit einem Button wieder schließen

hundebeinem · 3. Juni 2017

Beim Anklicken des verlinkten Bildes geht ein neues Fenster mit dem größeren Bild auf.

Das Browserfenster kann ich nun wieder schließen.

Mehrfach habe ich gesehen, daß im vergrößerten Bild im selben Fenster geöffnet wird, dieses hat dann einen Button, mit dem man das Bild schließen kann.

Nach meinen Erkundungen soll das mit JS gehen. Wie würde der Code dazu aussehen?

Wäre des HTML anzupassen?

Stef · 3. Juni 2017

Hi,

du möchtest bei klick auf ein Bild dieses Bild vergrößert darstellen und dann dieses auch schließen können ?

Dafür würde ich dir eine JS-Gallerie empfehlen wie z.b highslide (http://highslide.com/). Ist modern und man kann einiges mit der machen.

Gruß,

Stef

Axel · 4. Juni 2017

Hi,

Sammlung von Slideshow Plugins

http://www.elevateweb.co.uk/image-zoom/examples

Viele schöne Einstellmöglichkeiten

http://fancyapps.com/fancybox/3/

Top auch auf Handy und Tablett - die typischen Wischgesten funktionieren.

Für den Privatgebrauch kostenfrei, für Firmen mit einem fairen Preis (finde ich).

hundebeinem · 14. Juni 2017

Danke Stef, an diesem Vorschlag probiere ich noch, klappt aber bidsher noch nicht.

Danke Axel,
Ich habe
Inner Zoom gewählt.

Das steht im HTML, nach dem vorgegebenen Muster:

Den ersten Teil habe ich verstanden, das Bild kommt ja auch, der zweite Teil verweist auf das große Bild, das im selben Ordner liegt. Wie das geht, habe ich nicht verstanden.

Dann habe ich die JS Datei eingebunden:

Nun tut sich aber nichts. Sicher fehlt da noch was. Eine CSS Datei für das große Bild müsste ja auch noch da sein.

Das betreffende Bild mit dem Eiszapfen habe ich auf:

http://hundebeinem.lima-city.de/

hochgeladen.

Ich wäre dankbar für weitere Hilfe

Beste Grüße

Peter

Stef · 14. Juni 2017

So kannst du das Highslide nutzen (Gallery):

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Slideshow</title>

    <link rel="stylesheet" href="highslide/highslide.css">
    <script src="highslide/highslide-with-gallery.js"></script>

        <script>
            hs.graphicsDir = 'highslide/graphics/';
            hs.align = 'center';
            hs.transitions = ['expand', 'crossfade'];
            hs.wrapperClassName = 'dark borderless floating-caption';
            //hs.fadeInOut = true;
            hs.dimmingOpacity = .75;


            if (hs.addSlideshow) hs.addSlideshow({
                    interval: 5000,
                    repeat: false,
                    useControls: true,
                    fixedControls: 'fit',
                    overlayOptions: {
                    opacity: .6,
                    position: 'bottom center',
                    hideOnMouseOut: true
                    }        
            });
    </script>

    <style>
        img.slideshow_image{
            width: 150px;
            height: 100px;
        }
    </style>




</head>
<body>
    <div class="highslide-gallery">
        <a href="image/full6.jpg" class="highslide" onclick="return hs.expand(this)">
        <img class="slideshow_image" src="image/full6.jpg" alt= "Highslide JS"title="Click to enlarge" />
        </a>

        <a href="image/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
        <img class="slideshow_image" src="image/gallery1.jpg" alt= "Highslide JS"title="Click to enlarge" />
        </a>

        <a href="image/gallery2.jpg" class="highslide" onclick="return hs.expand(this)">
        <img class="slideshow_image" src="image/gallery2.jpg" alt= "Highslide JS"title="Click to enlarge" />
        </a>

        <a href="image/gallery3.jpg" class="highslide" onclick="return hs.expand(this)">
        <img class="slideshow_image" src="image/gallery3.jpg" alt= "Highslide JS"title="Click to enlarge" />
        </a>

        <a href="image/full-image.jpg" class="highslide" onclick="return hs.expand(this)">
        <img class="slideshow_image" src="image/full-image.jpg" alt= "Highslide JS"title="Click to enlarge" />
        </a>

        <a href="image/thumbstrip04.jpg" class="highslide" onclick="return hs.expand(this)">
        <img class="slideshow_image" src="image/thumbstrip04.jpg" alt= "Highslide JS"title="Click to enlarge" />
        </a>
</div>
    
</body>
</html>

Alles anzeigen

Du musst noch die Pfade ändern und die Bilder die du haben willst hinzufügen.

Stef

hundebeinem · 19. Juni 2017

Hallo Stef

Besten Dank für Deine Hilfe ich bin aber doch stecken geblieben.

Das bisherige Ergebnis ist auf http://hundebeinem.lima-city.de/ zu sehen.

Wenn ich das Bild anklicke, erscheint es vergrößert, läßt sich aber nicht zurück nehmen.

Sicherlich konnte ich das Script nicht anpassen.

Ist es richtig, daß nur die große Bildgröße eingesetzt wird?

Ich habe das im HTML so verstanden.

DW zeigt mir in der Zeile 11 "interval: 5000," "Syntaxfehler" an.

Das verstehe ich auch nicht.

Würdest du mir nochmal weiterhelfen?

Danke

Gruß

Peter

Stef · 21. Juni 2017

Hey,

poste mal deinen aktuellen code mit dem du dies versuchst bitte.

Ein verlinktes größeres Bild im selben Fenster öffnen und mit einem Button wieder schließen

Jetzt mitmachen!

Teilen