Lade unspezifisches Bild in neue Seite

Von meiner Suche hier und über Google konnte ich keine vollständige Lösung für das, was ich suche, finden.Lade unspezifisches Bild in neue Seite

Übersicht:

Ich habe eine Seite, die ein div mit einigen Bildern hat. Das lädt gut und ich habe es eingestellt, um eine neue Seite/Registerkarte zu öffnen, wenn Sie darauf klicken/klopfen.

<div class="wrapper"> 
    <div class="scrollmenu"> 
    <a href="./screenshots.html" target="_blank"> 
     <img src="./screenshots/1.png" width="60%" target="_new"/>&nbsp; 
    </a> 
    <a href="./screenshots.html" target="_blank"> 
     <img src="./screenshots/2.png" width="60%" target="_new"/>&nbsp; 
    </a> 
    <a href="./screenshots.html" target="_blank"> 
     <img src="./screenshots/3.png" width="60%" target="_new"/>&nbsp; 
    </a> 
    </div> 
</div>

Problem:

Während das sogar die screenshots.html öffnet, wird das Bild nicht geladen werden.

Jetzt weiß ich, dass ich etwas in der screenshot.html Datei tun muss, um das angeklickte Bild zu erhalten, ich weiß einfach nicht was.

Dies ist, was ich bisher in dieser Datei eingerichtet habe.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"><head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport"> 
<link rel="stylesheet" type="text/css" href="../resources/css/style.css"/> 
<title>Screenshots</title> 
</head> 

<body class="no-pinstripe"> 
<panel> 

    <!--This is where is needs to be loaded up --> 
    <img src="./screenshots/*.png" width="60%"> 

</panel> 
</body> 
</html>

Was muss ich tun, um das angeklickte Bild dort zu empfangen und zu laden?

Vorgeschlagene Javascript Ich bin gestolpert. Ich weiß einfach nicht, wie man die Dinge miteinander verbindet.

<script language="JavaScript" type="text/javascript"> 
    if (location.search) 
    { 
     var image_filename = location.search.substring(1) 
     document.write('<IMG SRC="' + image_filename + '">') 
     //document.write('<IMG "STYLE="width:60%" SRC="' + image_filename + '">') 
    } 
</script>

Jede Hilfe würde sehr geschätzt werden.

Quelle

2017-05-16 ChrisOSX

Ihr irgendeine js geschrieben? –

Ich persönlich habe nicht, ich habe ein vorgeschlagenes Stück hinzugefügt, das ich schon mal beim Basteln gefunden habe. – ChrisOSX

Besser basteln, als nicht (Daumen hoch). Ich werde versuchen, eine Antwort zu schreiben, obwohl mich jemand dazu schlagen könnte. –

Ihre erste Seite ändern als wie this.Pass das img src über Hash-Tag mit url

aktualisieren .Sie Ordnerpfad wie diese

 
main_folder 
     => firsthtmlpage//image call => "./screenshots/images.png" 
screenshots 
     => images.png 
screenshot.html(secondhtmlpage)) //the image "screenshots/images.png"

habe ich für Sie ein Projekt erstellen Code check this .it öffnen Sie ein neues Fenster.und zeigen Sie, auf welches Bild Sie geklickt haben.

<div class="wrapper"> 
    <div class="scrollmenu"> 
<a href="javascript:void(0)"> 
     <img src="./screenshots/1.png" width="60%" target="_new" />&nbsp; 
    </a> 
<a href="javascript:void(0)"> 
     <img src="./screenshots/2.png" width="60%" target="_new" />&nbsp; 
    </a> 
<a href="javascript:void(0)"> 
     <img src="./screenshots/3.png" width="60%" target="_new" />&nbsp; 
    </a> 
    </div> 
</div> 
<script> 
    $('.scrollmenu a').click(function() { 
    window.open("screenshots.html#" + encodeURIComponent($(this).children('img').attr('src'))) 
    }) 
</script>

Und

Ändern der screenshots.html Seite wie diese

<!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml"><head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
    <meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport"> 
    <link rel="stylesheet" type="text/css" href="../resources/css/style.css"/> 
    <title>Screenshots</title> 
    </head> 
    <body class="no-pinstripe"> 
    <panel> 

     <!--This is where is needs to be loaded up --> 
     <img src="" width="60%"> 
    <script> 
     window.onload=function(){ 
$('img').attr('src',decodeURIComponent(window.location.hash).replace(/#|\.\//g,"").trim()) 
     } 

     </script> 
    </panel> 
    </body> 
    </html>

Quelle

2017-05-16 12:43:15 prasanth

Während dies auf dem richtigen Weg für mich sein kann, öffnet es keine neue Seite. So wie es jetzt steht, öffnet es ein gebrochenes Bild. Ich weiß nicht, ob das * .png die richtige Formatierung ist, die ich brauche? Ich habe das nur als unspezifisches Bild platziert. – ChrisOSX

@ChrisOSX siehe meine aktualisierte Antwort. Überprüfen Sie diesen Link .und ändern Sie Ihren Code so – prasanth

Ok, jetzt sind wir auf dem richtigen Weg. Das Öffnen einer neuen Seite funktioniert gut, aber beim Öffnen dieser Seite wird nichts geladen.Ich dachte, es könnte der Bildlink gewesen sein, also bekam ich die vollständige Adresse des Bildes. Nichts. Ich habe mir die Antwort angesehen, die Sie angegeben haben, sogar das Element auf beiden Seiten überprüft. Sie sind identisch. Irgendwelche Ideen? – ChrisOSX

Lade unspezifisches Bild in neue Seite

Antwort

Verwandte Themen