Show large image of thumbnail on click but with multiple containers
2
Lots of similar questions have been asked on Stackoverflow. But after several days experimenting with the other solutions on here, I can't find any that match exactly what I'm trying to do.
I want to create a fixed size container that is always the same height from the top of the page and always the same margin from the left of the page. The container has thumbnails along the bottom (that will eventually have arrows on the right to scroll up/down - haven't got that far yet) and a larger image displayed above with information in a seperate box to the right side of the larger image. Every time a thumbnail is clicked, the larger image changes to display the larger version of the new thumbnail along with the corresponding information.
All the thumbnail images are 150 x 150. All the larger images are 300 x 300. The information displayed in the info box is the img alt text. The images are all stored in the same folder as the code and have the same file names with 'thumb' or 'large' changed. For example, 'image_01_thumb.png' or 'image_01_large.png'.
I have several existing elements on my page that are default to the entire site, that I believe are likely causing the issues.
$('#thumbs img').click(function()
$('#largeimage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#description').html($(this).attr('alt'));
);*
margin: 0;
padding: 0;
header
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(pic1.png);
height: 100vh;
background-size: cover;
background-position: center;
.main-nav
float: right;
list-style: none;
margin-top: 45px;
.main-nav li
display: inline-block;
.main-nav li a
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 16px;
.main-nav li.active a
border: 1px solid white;
.main-nav li a:hover
border: 1px solid white;
.logo img
width: 540px;
height: auto;
float: left;
body
font-family: monospace;
.row
max-width: 1200px;
margin: auto;
#thumbs
padding-top: 10px;
overflow: hidden;
#largeImage
padding: 4px;
#thumbs img
float: left;
margin-right: 0px;
opacity: 0.8;
padding: 4px;
#thumbs img:hover
opacity: 1;
#description
background: black;
color: white;
position: relative;
bottom: 0;
padding: 10px 20px;
width: 230px;
margin: 5px;
#panel
position: relative;
#gallery
position: absolute;
height: 520px;
width: 660px;
margin-left: 30px;
margin-top: 180px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>PROJECTS</title>
<link rel="shorcut icon" href="favicon.png" type="image/png">
<link rel="icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" script src="portgrid.js"></script>
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="logo.png">
</div>
<ul class="main-nav">
<li><a href="index.html">HOME</a></li>
<li><a href="portabout.html">ABOUT</a></li>
<li class="active"><a href="portprojects.html">PROJECTS</a></li>
<li><a href="portconnect.html">CONNECT</a></li>
</ul>
</div>
<!-- the image container -->
<div id="gallery">
<div id="panel">
<img id="largeImage" src="image_01_large.png" />
</div>
<div id="thumbs">
<img src="image_01_thumb.png" alt="TBN" />
<img src="image_02_thumb.png" alt="Brain" />
<img src="image_03_thumb.png" alt="AWG" />
<img src="image_04_thumb.png" alt="Building" />
</div>
</div>
</header>javascript html css image thumbnails
edited Nov 10 at 22:06
ksav
4,14921328
asked Nov 10 at 21:44
Sudoku
287
add a comment |Â
2
Lots of similar questions have been asked on Stackoverflow. But after several days experimenting with the other solutions on here, I can't find any that match exactly what I'm trying to do.
I want to create a fixed size container that is always the same height from the top of the page and always the same margin from the left of the page. The container has thumbnails along the bottom (that will eventually have arrows on the right to scroll up/down - haven't got that far yet) and a larger image displayed above with information in a seperate box to the right side of the larger image. Every time a thumbnail is clicked, the larger image changes to display the larger version of the new thumbnail along with the corresponding information.
All the thumbnail images are 150 x 150. All the larger images are 300 x 300. The information displayed in the info box is the img alt text. The images are all stored in the same folder as the code and have the same file names with 'thumb' or 'large' changed. For example, 'image_01_thumb.png' or 'image_01_large.png'.
I have several existing elements on my page that are default to the entire site, that I believe are likely causing the issues.
$('#thumbs img').click(function()
$('#largeimage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#description').html($(this).attr('alt'));
);*
margin: 0;
padding: 0;
header
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(pic1.png);
height: 100vh;
background-size: cover;
background-position: center;
.main-nav
float: right;
list-style: none;
margin-top: 45px;
.main-nav li
display: inline-block;
.main-nav li a
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 16px;
.main-nav li.active a
border: 1px solid white;
.main-nav li a:hover
border: 1px solid white;
.logo img
width: 540px;
height: auto;
float: left;
body
font-family: monospace;
.row
max-width: 1200px;
margin: auto;
#thumbs
padding-top: 10px;
overflow: hidden;
#largeImage
padding: 4px;
#thumbs img
float: left;
margin-right: 0px;
opacity: 0.8;
padding: 4px;
#thumbs img:hover
opacity: 1;
#description
background: black;
color: white;
position: relative;
bottom: 0;
padding: 10px 20px;
width: 230px;
margin: 5px;
#panel
position: relative;
#gallery
position: absolute;
height: 520px;
width: 660px;
margin-left: 30px;
margin-top: 180px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>PROJECTS</title>
<link rel="shorcut icon" href="favicon.png" type="image/png">
<link rel="icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" script src="portgrid.js"></script>
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="logo.png">
</div>
<ul class="main-nav">
<li><a href="index.html">HOME</a></li>
<li><a href="portabout.html">ABOUT</a></li>
<li class="active"><a href="portprojects.html">PROJECTS</a></li>
<li><a href="portconnect.html">CONNECT</a></li>
</ul>
</div>
<!-- the image container -->
<div id="gallery">
<div id="panel">
<img id="largeImage" src="image_01_large.png" />
</div>
<div id="thumbs">
<img src="image_01_thumb.png" alt="TBN" />
<img src="image_02_thumb.png" alt="Brain" />
<img src="image_03_thumb.png" alt="AWG" />
<img src="image_04_thumb.png" alt="Building" />
</div>
</div>
</header>javascript html css image thumbnails
edited Nov 10 at 22:06
ksav
4,14921328
asked Nov 10 at 21:44
Sudoku
287
What is the specific question here? It does not work? Or what is the blocking point? Can you provide a working sample?
– Ashot
Nov 10 at 21:54
The thumbnails and main image show up in place. However, the main image does not change when a new thumbnail is clicked on and there is no description appearing on the side. I'm attempting to create a CodePen example, although that is causing entirely new errors.
– Sudoku
Nov 10 at 22:39
@Sudoku Have you tried some simple debugging like addingconsole.log($(this).attr('src'));to your click function to double check the function is using the expected data?
– NewToJS
Nov 10 at 23:48
@NewToJS - I just get "Object https: false, httpsAutoUpgrade: false, privacyScore: 2, entitiesBlocked: , entitiesNotBlocked: , scores: null " over and over in the console when I open the page.
– Sudoku
Nov 11 at 13:07
I gave up trying to make the above work in the end and used an iframe from a seperate page to load the images. Got it working correctly in Firefox, which is a massive improvement!
– Sudoku
Nov 12 at 18:49
add a comment |Â
2
2
2
Lots of similar questions have been asked on Stackoverflow. But after several days experimenting with the other solutions on here, I can't find any that match exactly what I'm trying to do.
I want to create a fixed size container that is always the same height from the top of the page and always the same margin from the left of the page. The container has thumbnails along the bottom (that will eventually have arrows on the right to scroll up/down - haven't got that far yet) and a larger image displayed above with information in a seperate box to the right side of the larger image. Every time a thumbnail is clicked, the larger image changes to display the larger version of the new thumbnail along with the corresponding information.
All the thumbnail images are 150 x 150. All the larger images are 300 x 300. The information displayed in the info box is the img alt text. The images are all stored in the same folder as the code and have the same file names with 'thumb' or 'large' changed. For example, 'image_01_thumb.png' or 'image_01_large.png'.
I have several existing elements on my page that are default to the entire site, that I believe are likely causing the issues.
$('#thumbs img').click(function()
$('#largeimage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#description').html($(this).attr('alt'));
);*
margin: 0;
padding: 0;
header
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(pic1.png);
height: 100vh;
background-size: cover;
background-position: center;
.main-nav
float: right;
list-style: none;
margin-top: 45px;
.main-nav li
display: inline-block;
.main-nav li a
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 16px;
.main-nav li.active a
border: 1px solid white;
.main-nav li a:hover
border: 1px solid white;
.logo img
width: 540px;
height: auto;
float: left;
body
font-family: monospace;
.row
max-width: 1200px;
margin: auto;
#thumbs
padding-top: 10px;
overflow: hidden;
#largeImage
padding: 4px;
#thumbs img
float: left;
margin-right: 0px;
opacity: 0.8;
padding: 4px;
#thumbs img:hover
opacity: 1;
#description
background: black;
color: white;
position: relative;
bottom: 0;
padding: 10px 20px;
width: 230px;
margin: 5px;
#panel
position: relative;
#gallery
position: absolute;
height: 520px;
width: 660px;
margin-left: 30px;
margin-top: 180px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>PROJECTS</title>
<link rel="shorcut icon" href="favicon.png" type="image/png">
<link rel="icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" script src="portgrid.js"></script>
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="logo.png">
</div>
<ul class="main-nav">
<li><a href="index.html">HOME</a></li>
<li><a href="portabout.html">ABOUT</a></li>
<li class="active"><a href="portprojects.html">PROJECTS</a></li>
<li><a href="portconnect.html">CONNECT</a></li>
</ul>
</div>
<!-- the image container -->
<div id="gallery">
<div id="panel">
<img id="largeImage" src="image_01_large.png" />
</div>
<div id="thumbs">
<img src="image_01_thumb.png" alt="TBN" />
<img src="image_02_thumb.png" alt="Brain" />
<img src="image_03_thumb.png" alt="AWG" />
<img src="image_04_thumb.png" alt="Building" />
</div>
</div>
</header>javascript html css image thumbnails
edited Nov 10 at 22:06
ksav
4,14921328
asked Nov 10 at 21:44
Sudoku
287
Lots of similar questions have been asked on Stackoverflow. But after several days experimenting with the other solutions on here, I can't find any that match exactly what I'm trying to do.
I want to create a fixed size container that is always the same height from the top of the page and always the same margin from the left of the page. The container has thumbnails along the bottom (that will eventually have arrows on the right to scroll up/down - haven't got that far yet) and a larger image displayed above with information in a seperate box to the right side of the larger image. Every time a thumbnail is clicked, the larger image changes to display the larger version of the new thumbnail along with the corresponding information.
All the thumbnail images are 150 x 150. All the larger images are 300 x 300. The information displayed in the info box is the img alt text. The images are all stored in the same folder as the code and have the same file names with 'thumb' or 'large' changed. For example, 'image_01_thumb.png' or 'image_01_large.png'.
I have several existing elements on my page that are default to the entire site, that I believe are likely causing the issues.
$('#thumbs img').click(function()
$('#largeimage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#description').html($(this).attr('alt'));
);*
margin: 0;
padding: 0;
header
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(pic1.png);
height: 100vh;
background-size: cover;
background-position: center;
.main-nav
float: right;
list-style: none;
margin-top: 45px;
.main-nav li
display: inline-block;
.main-nav li a
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 16px;
.main-nav li.active a
border: 1px solid white;
.main-nav li a:hover
border: 1px solid white;
.logo img
width: 540px;
height: auto;
float: left;
body
font-family: monospace;
.row
max-width: 1200px;
margin: auto;
#thumbs
padding-top: 10px;
overflow: hidden;
#largeImage
padding: 4px;
#thumbs img
float: left;
margin-right: 0px;
opacity: 0.8;
padding: 4px;
#thumbs img:hover
opacity: 1;
#description
background: black;
color: white;
position: relative;
bottom: 0;
padding: 10px 20px;
width: 230px;
margin: 5px;
#panel
position: relative;
#gallery
position: absolute;
height: 520px;
width: 660px;
margin-left: 30px;
margin-top: 180px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>PROJECTS</title>
<link rel="shorcut icon" href="favicon.png" type="image/png">
<link rel="icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" script src="portgrid.js"></script>
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="logo.png">
</div>
<ul class="main-nav">
<li><a href="index.html">HOME</a></li>
<li><a href="portabout.html">ABOUT</a></li>
<li class="active"><a href="portprojects.html">PROJECTS</a></li>
<li><a href="portconnect.html">CONNECT</a></li>
</ul>
</div>
<!-- the image container -->
<div id="gallery">
<div id="panel">
<img id="largeImage" src="image_01_large.png" />
</div>
<div id="thumbs">
<img src="image_01_thumb.png" alt="TBN" />
<img src="image_02_thumb.png" alt="Brain" />
<img src="image_03_thumb.png" alt="AWG" />
<img src="image_04_thumb.png" alt="Building" />
</div>
</div>
</header>$('#thumbs img').click(function()
$('#largeimage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#description').html($(this).attr('alt'));
);*
margin: 0;
padding: 0;
header
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(pic1.png);
height: 100vh;
background-size: cover;
background-position: center;
.main-nav
float: right;
list-style: none;
margin-top: 45px;
.main-nav li
display: inline-block;
.main-nav li a
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 16px;
.main-nav li.active a
border: 1px solid white;
.main-nav li a:hover
border: 1px solid white;
.logo img
width: 540px;
height: auto;
float: left;
body
font-family: monospace;
.row
max-width: 1200px;
margin: auto;
#thumbs
padding-top: 10px;
overflow: hidden;
#largeImage
padding: 4px;
#thumbs img
float: left;
margin-right: 0px;
opacity: 0.8;
padding: 4px;
#thumbs img:hover
opacity: 1;
#description
background: black;
color: white;
position: relative;
bottom: 0;
padding: 10px 20px;
width: 230px;
margin: 5px;
#panel
position: relative;
#gallery
position: absolute;
height: 520px;
width: 660px;
margin-left: 30px;
margin-top: 180px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>PROJECTS</title>
<link rel="shorcut icon" href="favicon.png" type="image/png">
<link rel="icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" script src="portgrid.js"></script>
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="logo.png">
</div>
<ul class="main-nav">
<li><a href="index.html">HOME</a></li>
<li><a href="portabout.html">ABOUT</a></li>
<li class="active"><a href="portprojects.html">PROJECTS</a></li>
<li><a href="portconnect.html">CONNECT</a></li>
</ul>
</div>
<!-- the image container -->
<div id="gallery">
<div id="panel">
<img id="largeImage" src="image_01_large.png" />
</div>
<div id="thumbs">
<img src="image_01_thumb.png" alt="TBN" />
<img src="image_02_thumb.png" alt="Brain" />
<img src="image_03_thumb.png" alt="AWG" />
<img src="image_04_thumb.png" alt="Building" />
</div>
</div>
</header>$('#thumbs img').click(function()
$('#largeimage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#description').html($(this).attr('alt'));
);*
margin: 0;
padding: 0;
header
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(pic1.png);
height: 100vh;
background-size: cover;
background-position: center;
.main-nav
float: right;
list-style: none;
margin-top: 45px;
.main-nav li
display: inline-block;
.main-nav li a
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 16px;
.main-nav li.active a
border: 1px solid white;
.main-nav li a:hover
border: 1px solid white;
.logo img
width: 540px;
height: auto;
float: left;
body
font-family: monospace;
.row
max-width: 1200px;
margin: auto;
#thumbs
padding-top: 10px;
overflow: hidden;
#largeImage
padding: 4px;
#thumbs img
float: left;
margin-right: 0px;
opacity: 0.8;
padding: 4px;
#thumbs img:hover
opacity: 1;
#description
background: black;
color: white;
position: relative;
bottom: 0;
padding: 10px 20px;
width: 230px;
margin: 5px;
#panel
position: relative;
#gallery
position: absolute;
height: 520px;
width: 660px;
margin-left: 30px;
margin-top: 180px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>PROJECTS</title>
<link rel="shorcut icon" href="favicon.png" type="image/png">
<link rel="icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" script src="portgrid.js"></script>
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="logo.png">
</div>
<ul class="main-nav">
<li><a href="index.html">HOME</a></li>
<li><a href="portabout.html">ABOUT</a></li>
<li class="active"><a href="portprojects.html">PROJECTS</a></li>
<li><a href="portconnect.html">CONNECT</a></li>
</ul>
</div>
<!-- the image container -->
<div id="gallery">
<div id="panel">
<img id="largeImage" src="image_01_large.png" />
</div>
<div id="thumbs">
<img src="image_01_thumb.png" alt="TBN" />
<img src="image_02_thumb.png" alt="Brain" />
<img src="image_03_thumb.png" alt="AWG" />
<img src="image_04_thumb.png" alt="Building" />
</div>
</div>
</header>javascript html css image thumbnails
javascript html css image thumbnails
edited Nov 10 at 22:06
ksav
4,14921328
asked Nov 10 at 21:44
Sudoku
287
edited Nov 10 at 22:06
ksav
4,14921328
asked Nov 10 at 21:44
Sudoku
287
edited Nov 10 at 22:06
ksav
4,14921328
edited Nov 10 at 22:06
ksav
4,14921328
edited Nov 10 at 22:06
ksav
4,14921328
4,14921328
asked Nov 10 at 21:44
Sudoku
287
asked Nov 10 at 21:44
Sudoku
287
asked Nov 10 at 21:44
Sudoku
287
287
What is the specific question here? It does not work? Or what is the blocking point? Can you provide a working sample?
– Ashot
Nov 10 at 21:54
The thumbnails and main image show up in place. However, the main image does not change when a new thumbnail is clicked on and there is no description appearing on the side. I'm attempting to create a CodePen example, although that is causing entirely new errors.
– Sudoku
Nov 10 at 22:39
@Sudoku Have you tried some simple debugging like addingconsole.log($(this).attr('src'));to your click function to double check the function is using the expected data?
– NewToJS
Nov 10 at 23:48
@NewToJS - I just get "Object https: false, httpsAutoUpgrade: false, privacyScore: 2, entitiesBlocked: , entitiesNotBlocked: , scores: null " over and over in the console when I open the page.
– Sudoku
Nov 11 at 13:07
I gave up trying to make the above work in the end and used an iframe from a seperate page to load the images. Got it working correctly in Firefox, which is a massive improvement!
– Sudoku
Nov 12 at 18:49
add a comment |Â
What is the specific question here? It does not work? Or what is the blocking point? Can you provide a working sample?
– Ashot
Nov 10 at 21:54
The thumbnails and main image show up in place. However, the main image does not change when a new thumbnail is clicked on and there is no description appearing on the side. I'm attempting to create a CodePen example, although that is causing entirely new errors.
– Sudoku
Nov 10 at 22:39
@Sudoku Have you tried some simple debugging like addingconsole.log($(this).attr('src'));to your click function to double check the function is using the expected data?
– NewToJS
Nov 10 at 23:48
@NewToJS - I just get "Object https: false, httpsAutoUpgrade: false, privacyScore: 2, entitiesBlocked: , entitiesNotBlocked: , scores: null " over and over in the console when I open the page.
– Sudoku
Nov 11 at 13:07
I gave up trying to make the above work in the end and used an iframe from a seperate page to load the images. Got it working correctly in Firefox, which is a massive improvement!
– Sudoku
Nov 12 at 18:49
What is the specific question here? It does not work? Or what is the blocking point? Can you provide a working sample?
– Ashot
Nov 10 at 21:54
What is the specific question here? It does not work? Or what is the blocking point? Can you provide a working sample?
– Ashot
Nov 10 at 21:54
The thumbnails and main image show up in place. However, the main image does not change when a new thumbnail is clicked on and there is no description appearing on the side. I'm attempting to create a CodePen example, although that is causing entirely new errors.
– Sudoku
Nov 10 at 22:39
The thumbnails and main image show up in place. However, the main image does not change when a new thumbnail is clicked on and there is no description appearing on the side. I'm attempting to create a CodePen example, although that is causing entirely new errors.
– Sudoku
Nov 10 at 22:39
@Sudoku Have you tried some simple debugging like adding
console.log($(this).attr('src')); to your click function to double check the function is using the expected data?– NewToJS
Nov 10 at 23:48
@Sudoku Have you tried some simple debugging like adding
console.log($(this).attr('src')); to your click function to double check the function is using the expected data?– NewToJS
Nov 10 at 23:48
@NewToJS - I just get "Object https: false, httpsAutoUpgrade: false, privacyScore: 2, entitiesBlocked: , entitiesNotBlocked: , scores: null " over and over in the console when I open the page.
– Sudoku
Nov 11 at 13:07
@NewToJS - I just get "Object https: false, httpsAutoUpgrade: false, privacyScore: 2, entitiesBlocked: , entitiesNotBlocked: , scores: null " over and over in the console when I open the page.
– Sudoku
Nov 11 at 13:07
I gave up trying to make the above work in the end and used an iframe from a seperate page to load the images. Got it working correctly in Firefox, which is a massive improvement!
– Sudoku
Nov 12 at 18:49
I gave up trying to make the above work in the end and used an iframe from a seperate page to load the images. Got it working correctly in Firefox, which is a massive improvement!
– Sudoku
Nov 12 at 18:49
add a comment |Â
1 Answer
1
active
oldest
votes
0
The code is ok, the problem is that you misspelled the large image ID on the Js, is #largeImage, not #largeimage
$('#thumbs img').click(function()
$('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#description').html($(this).attr('alt'));
);
answered Nov 11 at 1:15
MartinBA
7161213
I've tried using lowercase 'image' instead and it makes no difference.
– Sudoku
Nov 11 at 12:42
This is what your are trying to achieve codepen.io/federicomartin/pen/xQEpqq ?
– MartinBA
Nov 11 at 14:47
Yes, except the main image is twice the size of the thumbnails, there is a logo across the top left of the page (in line with the menu on the right) and the background image of the page stretches and resizes with the browser. I wondered if the logo or page background was causing the issues, but I can't change these as they are default to the entire website.
– Sudoku
Nov 12 at 13:22
But the Js is ok?
– MartinBA
Nov 12 at 13:24
Yes, the error still happens either way. I don't think it's the JS code itself that's the issue, but it's conflicting with something else on the page that's preventing the JS from doing anything. But I can't work out what that conflict is. I'm not sure how to do it in CodePen, as I need 4 thumbnail images and 4 large images to show what is/isn't happening. The JS code should identify the thumbnail image clicked, then change the filename by swapping 'thumb' for 'large', then open the image with that filename and display it where the large image is.
– Sudoku
Nov 12 at 13:35
add a comment |Â
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
The code is ok, the problem is that you misspelled the large image ID on the Js, is #largeImage, not #largeimage
$('#thumbs img').click(function()
$('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#description').html($(this).attr('alt'));
);
answered Nov 11 at 1:15
MartinBA
7161213
I've tried using lowercase 'image' instead and it makes no difference.
– Sudoku
Nov 11 at 12:42
This is what your are trying to achieve codepen.io/federicomartin/pen/xQEpqq ?
– MartinBA
Nov 11 at 14:47
Yes, except the main image is twice the size of the thumbnails, there is a logo across the top left of the page (in line with the menu on the right) and the background image of the page stretches and resizes with the browser. I wondered if the logo or page background was causing the issues, but I can't change these as they are default to the entire website.
– Sudoku
Nov 12 at 13:22
But the Js is ok?
– MartinBA
Nov 12 at 13:24
Yes, the error still happens either way. I don't think it's the JS code itself that's the issue, but it's conflicting with something else on the page that's preventing the JS from doing anything. But I can't work out what that conflict is. I'm not sure how to do it in CodePen, as I need 4 thumbnail images and 4 large images to show what is/isn't happening. The JS code should identify the thumbnail image clicked, then change the filename by swapping 'thumb' for 'large', then open the image with that filename and display it where the large image is.
– Sudoku
Nov 12 at 13:35
add a comment |Â
0
The code is ok, the problem is that you misspelled the large image ID on the Js, is #largeImage, not #largeimage
$('#thumbs img').click(function()
$('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#description').html($(this).attr('alt'));
);
answered Nov 11 at 1:15
MartinBA
7161213
I've tried using lowercase 'image' instead and it makes no difference.
– Sudoku
Nov 11 at 12:42
This is what your are trying to achieve codepen.io/federicomartin/pen/xQEpqq ?
– MartinBA
Nov 11 at 14:47
Yes, except the main image is twice the size of the thumbnails, there is a logo across the top left of the page (in line with the menu on the right) and the background image of the page stretches and resizes with the browser. I wondered if the logo or page background was causing the issues, but I can't change these as they are default to the entire website.
– Sudoku
Nov 12 at 13:22
But the Js is ok?
– MartinBA
Nov 12 at 13:24
Yes, the error still happens either way. I don't think it's the JS code itself that's the issue, but it's conflicting with something else on the page that's preventing the JS from doing anything. But I can't work out what that conflict is. I'm not sure how to do it in CodePen, as I need 4 thumbnail images and 4 large images to show what is/isn't happening. The JS code should identify the thumbnail image clicked, then change the filename by swapping 'thumb' for 'large', then open the image with that filename and display it where the large image is.
– Sudoku
Nov 12 at 13:35
add a comment |Â
0
0
0
The code is ok, the problem is that you misspelled the large image ID on the Js, is #largeImage, not #largeimage
$('#thumbs img').click(function()
$('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#description').html($(this).attr('alt'));
);
answered Nov 11 at 1:15
MartinBA
7161213
The code is ok, the problem is that you misspelled the large image ID on the Js, is #largeImage, not #largeimage
$('#thumbs img').click(function()
$('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#description').html($(this).attr('alt'));
);
answered Nov 11 at 1:15
MartinBA
7161213
answered Nov 11 at 1:15
MartinBA
7161213
answered Nov 11 at 1:15
MartinBA
7161213
answered Nov 11 at 1:15
MartinBA
7161213
7161213
I've tried using lowercase 'image' instead and it makes no difference.
– Sudoku
Nov 11 at 12:42
This is what your are trying to achieve codepen.io/federicomartin/pen/xQEpqq ?
– MartinBA
Nov 11 at 14:47
Yes, except the main image is twice the size of the thumbnails, there is a logo across the top left of the page (in line with the menu on the right) and the background image of the page stretches and resizes with the browser. I wondered if the logo or page background was causing the issues, but I can't change these as they are default to the entire website.
– Sudoku
Nov 12 at 13:22
But the Js is ok?
– MartinBA
Nov 12 at 13:24
Yes, the error still happens either way. I don't think it's the JS code itself that's the issue, but it's conflicting with something else on the page that's preventing the JS from doing anything. But I can't work out what that conflict is. I'm not sure how to do it in CodePen, as I need 4 thumbnail images and 4 large images to show what is/isn't happening. The JS code should identify the thumbnail image clicked, then change the filename by swapping 'thumb' for 'large', then open the image with that filename and display it where the large image is.
– Sudoku
Nov 12 at 13:35
add a comment |Â
I've tried using lowercase 'image' instead and it makes no difference.
– Sudoku
Nov 11 at 12:42
This is what your are trying to achieve codepen.io/federicomartin/pen/xQEpqq ?
– MartinBA
Nov 11 at 14:47
Yes, except the main image is twice the size of the thumbnails, there is a logo across the top left of the page (in line with the menu on the right) and the background image of the page stretches and resizes with the browser. I wondered if the logo or page background was causing the issues, but I can't change these as they are default to the entire website.
– Sudoku
Nov 12 at 13:22
But the Js is ok?
– MartinBA
Nov 12 at 13:24
Yes, the error still happens either way. I don't think it's the JS code itself that's the issue, but it's conflicting with something else on the page that's preventing the JS from doing anything. But I can't work out what that conflict is. I'm not sure how to do it in CodePen, as I need 4 thumbnail images and 4 large images to show what is/isn't happening. The JS code should identify the thumbnail image clicked, then change the filename by swapping 'thumb' for 'large', then open the image with that filename and display it where the large image is.
– Sudoku
Nov 12 at 13:35
I've tried using lowercase 'image' instead and it makes no difference.
– Sudoku
Nov 11 at 12:42
I've tried using lowercase 'image' instead and it makes no difference.
– Sudoku
Nov 11 at 12:42
This is what your are trying to achieve codepen.io/federicomartin/pen/xQEpqq ?
– MartinBA
Nov 11 at 14:47
This is what your are trying to achieve codepen.io/federicomartin/pen/xQEpqq ?
– MartinBA
Nov 11 at 14:47
Yes, except the main image is twice the size of the thumbnails, there is a logo across the top left of the page (in line with the menu on the right) and the background image of the page stretches and resizes with the browser. I wondered if the logo or page background was causing the issues, but I can't change these as they are default to the entire website.
– Sudoku
Nov 12 at 13:22
Yes, except the main image is twice the size of the thumbnails, there is a logo across the top left of the page (in line with the menu on the right) and the background image of the page stretches and resizes with the browser. I wondered if the logo or page background was causing the issues, but I can't change these as they are default to the entire website.
– Sudoku
Nov 12 at 13:22
But the Js is ok?
– MartinBA
Nov 12 at 13:24
But the Js is ok?
– MartinBA
Nov 12 at 13:24
Yes, the error still happens either way. I don't think it's the JS code itself that's the issue, but it's conflicting with something else on the page that's preventing the JS from doing anything. But I can't work out what that conflict is. I'm not sure how to do it in CodePen, as I need 4 thumbnail images and 4 large images to show what is/isn't happening. The JS code should identify the thumbnail image clicked, then change the filename by swapping 'thumb' for 'large', then open the image with that filename and display it where the large image is.
– Sudoku
Nov 12 at 13:35
Yes, the error still happens either way. I don't think it's the JS code itself that's the issue, but it's conflicting with something else on the page that's preventing the JS from doing anything. But I can't work out what that conflict is. I'm not sure how to do it in CodePen, as I need 4 thumbnail images and 4 large images to show what is/isn't happening. The JS code should identify the thumbnail image clicked, then change the filename by swapping 'thumb' for 'large', then open the image with that filename and display it where the large image is.
– Sudoku
Nov 12 at 13:35
add a comment |Â
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53243716%2fshow-large-image-of-thumbnail-on-click-but-with-multiple-containers%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What is the specific question here? It does not work? Or what is the blocking point? Can you provide a working sample?
– Ashot
Nov 10 at 21:54
The thumbnails and main image show up in place. However, the main image does not change when a new thumbnail is clicked on and there is no description appearing on the side. I'm attempting to create a CodePen example, although that is causing entirely new errors.
– Sudoku
Nov 10 at 22:39
@Sudoku Have you tried some simple debugging like adding
console.log($(this).attr('src'));to your click function to double check the function is using the expected data?– NewToJS
Nov 10 at 23:48
@NewToJS - I just get "Object https: false, httpsAutoUpgrade: false, privacyScore: 2, entitiesBlocked: , entitiesNotBlocked: , scores: null " over and over in the console when I open the page.
– Sudoku
Nov 11 at 13:07
I gave up trying to make the above work in the end and used an iframe from a seperate page to load the images. Got it working correctly in Firefox, which is a massive improvement!
– Sudoku
Nov 12 at 18:49