0

I'm creating a webpage for a project, and I'm trying to create a gallery where you select an image on a left frame, and have the original image open in the right frame. Every time I click on the image, it opens in the right frame, but it's oversized. What I want to do is have the image fit to the width of the frame, but I haven't figured out a way to do that since I don't have a SRC in the right frame's html file. I've tried doing several things including using iframes to no avail. Any help, please?

Here is my frameset:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Frameset</title>
</head>
<frameset rows="*" cols="50%,50%" framespacing="1" frameborder="yes" border="1" bordercolor="#FFFFFF">
  <frame src="gallery_left_frame.html" name="mainFrame" id="mainFrame" title="mainFrame" />
  <frame src="gallery_right_frame.html" name="rightFrame" id="rightFrame" title="rightFrame" style="max-width:100%" marginheight="1px"/>
</frameset>
<noframes>Your browser does not support frames. Please upgrade to a newer browser to use this website.</noframes>
</html>

This is my gallery, which is the left frame:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gallery</title>
</head>
<body>
   <div align="center"><a href="Assets/General Construction/FDGC001.jpg" target="rightFrame"><img src="Assets/General Construction/General Construction Small/FDGC001.jpg" width="100%" height="auto" /></a></div>
</body>
</html>

And this the nearly blank html file which is the right frame:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    background-color: #000;
}
img {
    border: none;
    height: 100%;
    width: 100%;
}
</style>
</head>
<body>
</body>
</html>
Bartłomiej Semańczyk
  • 59,234
  • 49
  • 233
  • 358
Ted
  • 1
  • 1
  • 1

3 Answers3

0

No, You can not show image without src, So to resize image you need image

MDN-src: The image URL. This attribute is mandatory for the element. On browsers supporting srcset, src is treated like a candidate image with a pixel density descriptor 1x unless an image with this pixel density descriptor is already defined in srcset or srcset contains 'w' descriptors.

Though you can send src of image to another iframe and than show it

check Pass value to iframe from a window

Community
  • 1
  • 1
NullPoiиteя
  • 56,591
  • 22
  • 125
  • 143
0

Try some JavaScript and jQuery. Set the src to the first image and change it onclick. Maybe similar to this:

<button class="preview" onclick="foo()"></button>
<Script>
    function foo() {
        $("#fullSizePic").attr("src", "your_link");
    }
</script>
Mi-Creativity
  • 9,554
  • 10
  • 38
  • 47
TheLexoPlexx
  • 117
  • 13
0

You should never use <frame> tags since it is not supported in HTML5.

Deprecated: This feature has been removed from the Web. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

You may use <iframe> but again not all attributes of iframe are supported in HTML5

One way to do it is by grabbing the src attribute of the clickedimg and inject it into the src of the <img src="bIMG"> like this: JSFiddle

JS:

$('#gallery img').each(function(){
    $(this).on('click', function(){
        var src = $(this).attr('src');
        $('#bIMG').attr('src', src);
    });
});

another way JS Fiddle 2 you can copy the clicked img and replace the <div id="bigIMG"> html with this clone, this way you won't an img tag with empty src:

JS:

$('#gallery img').each(function(){
    $(this).on('click', function(){
        var newIMG = $(this).clone();
        $('#bigIMG').html(newIMG);
    });
});

** NOTE that you now have full control not over re-sizing the image only.

Mi-Creativity
  • 9,554
  • 10
  • 38
  • 47