Develop Reference

How to make the images bigger when clicked? JavaScrpit

I've made a gallery, but I'm having trouble getting the image to enlarge when clicked. I want to be able to click on the largest image and then it will enlarge and appear in the middle of the page.
Below is the link to the code:
function galleryFunction1(smallImg) {
let fullImg = document.getElementById('imageBox1');
fullImg.src = smallImg.src;
}
.wrapper {
margin: 0 auto;
width: 100%;
max-width: 1400px;
}
.gallery {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin: 100px 10px;
}
.gallery img {
cursor: pointer;
}
.boxOfimages .big-img img {
display: block;
margin: 0 auto;
width: 290px;
margin-bottom: 10px;
}
.boxOfsmallImgs {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.boxOfsmallImgs img {
width: 70px;
opacity: 0.7;
transition: opacity 0.4s ease;
margin: 2px;
}
.boxOfsmallImgs img:hover {
opacity: 1;
}
}
.boxOftext {
display: flex;
flex-direction: column;
align-items: start;
font-size: 0.8rem;
}
.boxOftext h2 {
padding: 20px 10px;
}
.boxOftext p {
padding: 10px 10px;
}
<main class="main wrapper">
<section class="gallery">
<div class="boxOfimages">
<div class="big-img">
<img id="imageBox1" src="https://cdn.pixabay.com/photo/2013/04/02/18/58/sculpture-99484_960_720.jpg" alt="">
</div>
<div class="boxOfsmallImgs">
<img src="https://cdn.pixabay.com/photo/2013/04/02/18/58/sculpture-99484_960_720.jpg" onclick="galleryFunction1(this)" alt="">
<img src="https://cdn.pixabay.com/photo/2016/09/07/16/19/pile-1651945_960_720.jpg" onclick="galleryFunction1(this)" alt="">
<img src="https://cdn.pixabay.com/photo/2018/05/11/08/11/pet-3389729_960_720.jpg" onclick="galleryFunction1(this)" alt="">
</div>
</div>
<div class="boxOftext">
<h2>“Dotyk burzy” / “Touch of Storm”</h2>
<p>rzeźba / sculpture gips patynowany, granit / patinated plaster, granite 100 x 28 x 28 cm 2020r.
</p>
<p>dostępna</p>
</div>
</section>
https://codepen.io/yerbamatepl/pen/mdBGoed
Thank you in advance for your help.

You can use a modal for this. Have a image tag inside the modal, and hide the entire modal by default.
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<img src="" id="modal-image" />
</div>
</div>
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 50px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
margin: auto;
text-align: center;
}
.modal-image {
display: inline-block;
}
When the image is clicked, show the modal and set the src of the modal image to which image triggered the event.
// Get the gallery box
var imageBox1 = document.getElementById("imageBox1");
// Get the modal image tag
var modal = document.getElementById("myModal");
var modalImage = document.getElementById("modal-image");
// When the user clicks the big picture, set the image and open the modal
imageBox1.onclick = function (e) {
var src = e.srcElement.src;
modal.style.display = "block";
modalImage.src = src;
};
You can also add a "X" that will close the modal as I added in my example below:
https://codepen.io/swampen/pen/vYezMGx

You need to create a popup window with an image element inside:
<div class="backdrop">
<div class="popup">
<img src="" class="popup-image" />
</div>
</div>
In CSS you need to make the backdrop element as fixed:
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
So your element will be pulled to each side
The popup element will have absolute positioning:
position: absolute;
width: 500px;
height: auto;
top: 50%; // to put it in the middle
left: 50%;
transform: translate(-50%, -50%);
And finally img element should have max-width as 100%.
Also you need to make open/close functionality, to do that you need to set display: block/none on the backdrop element accordingly on click

How to set auto scrolling on one side of the page, using class name?

I have the following html, which divides the page into left and right side. The left side should auto scroll down, while the right side is not moving. I've achieved this, and the auto scrolling also worked, while there was only one side. But now my javascript is not working, and I don't know how to modify it, to select just the left side of the page.
HTML:
<div class="container-fluid">
<div class="row wrapper">
<div class="col-8 left-side">
<p class="dream-id">asd</p>
<p class="dream-body">asd</p>
</div>
<div class="col-4 right-side">
<button class="about-button">?</button>
<button class="add-button">+</button>
</div>
</div>
</div>
CSS:
.left-side {
height: 100%;
overflow: auto;
}
.right-side {
height: 100vh;
width: 100vh;
background-color: red;
position: relative;
overflow: hidden;
}
.wrapper {
display: flex;
overflow: hidden;
height: 100vh;
margin-top: -100px;
padding-top: 100px;
position: relative;
width: 100%;
backface-visibility: hidden;
will-change: overflow;
}
.left-side,
.right-side {
overflow: auto;
height: auto;
padding: .5rem;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}
.left-side::-webkit-scrollbar,
.right-side::-webkit-scrollbar {
display: none;
}
JQuery:
$(document).ready( function() {
startScrollDown();
});
$(window).on('beforeunload', function(){
goToTop();
});
function startScrollDown() {
scroll = setInterval(function(){ window.scrollBy(0, 1); }, 15);
}
function goToTop() {
$(document).scrollTop(0);
}
Since window.scrollBy() is not good for this now, I have no idea how to approach this.
EDIT:
So I've found solutions, but these seems to start slowly, then speeding up. But I need the same speed, since people should be able to read the text:
function startScrollDown() {
let leftSide = $('.left-side');
leftSide.stop().animate({
scrollTop: leftSide[0].scrollHeight
}, 120000);
}

Controlling JQuery Animate Function

I've been playing with "marginLeft: "100%"" but that only moves the div off the screen entirely. I want the div, onClick, to float:right against the edge of the right side of the screen.
JSFiddle:
https://jsfiddle.net/487r8qza/
HTML
<div id="footer">
<one id="one">
</one>
<two id="two">
</two>
<three id="three">
</three>
</div>
JavaScript
$("#footer").click(function(){
$("#one").animate({
marginLeft: "+=900px",
}, 2000 );
$("#two").animate({
marginLeft: "+=900px",
}, 800 );
$("#three").animate({
marginLeft: "+=900px",
}, 333 );
});
$("#three").click(function() {
$("#three").animate({
marginLeft: "100%"} , 1000
);
});
CSS
#footer {
margin: 0;
padding: 0;
float: left;
width: 100%;
max-width: 100%;
height: 115px;
background-color: #4a4a4a;
}
one {
margin: 0;
padding: 0;
float: left;
width: 300px;
background-color: #070707;
height: 115px;
margin-left: -900px;
}
one,two,three {
text-align: center;
color: white;
font-family: "Raleway", Arial, Helvetica, Trebuchet MS, Tahoma, sans-serif;
font-weight: bold;
font-size: 16px;
line-height: 115px;
}
one:hover {
background: black;
margin: 0;
padding: 0;
width: 300px;
height: 115px;
float: left;
transition: all 0.3s ease-out;
cursor: pointer;
}
two:hover {
background: black;
margin: 0;
padding: 0;
width: 300px;
height: 115px;
float: left;
transition: all 0.3s ease-out;
cursor: pointer;
}
three:hover {
background: black;
margin: 0;
padding: 0;
width: 300px;
height: 115px;
float: left;
transition: all 0.3s ease-out;
cursor: pointer;
}
two {
margin: 0;
padding: 0;
float: left;
width: 300px;
background-color: #1a1a1a;
height: 115px;
margin-left: -900px;
}
three {
margin: 0;
padding: 0;
float: left;
width: 300px;
background-color: #2c2c2c;
height: 115px;
margin-left: -900px;
}

Sorry if it took this long, something came up. Right, so I got it working. Hope this helps
JSFIDDLE
As for CSS, I kept it as simple as possible. The trick here is to make your DIVs display inline-block, so that at the very start, they are neatly stacked next to each other. You will also want to have them all be float right.
CSS:
.box-container{
width: 100%;
height: 115px;
position: relative;
overflow: hidden;
}
.box-item{
width: 300px;
height: 115px;
position: relative;
display: inline-block;
float: right;
cursor: pointer;
}
.b0{
background: #7888D9;
}
.b1{
background: #76D54E;
}
.b2{
background: #DF7B41;
}
Next, in your HTML, you need to give each DIVs the same classname, which will simplify the Jquery click event. Finally, we will also give our first DIV a classname of "current". This will control which DIV must move and which DIV must wait and stay idle as long as the one beside him hasn't moved. You'll understand soon enough.
HTML:
<div class="box-container">
<div class="box-item b0 current">
Box 1
</div>
<div class="box-item b1">
Box 2
</div>
<div class="box-item b2">
Box 3
</div>
</div>
Finally, as for the Jquery, this is where it gets a bit complicated, I'll try to explain the best I can. Bare in mind that math is not quite my forte. Since our DIVS all float right in the CSS, well, they will all be stacked to the right (of course). To counter that and position them to the left, we need to give each DIV a right position. This position will be some kind of offset. To get this number, we need to multiply the width of a DIV by the total number of DIVs. After that, we must subtract this number to the total width of our DIVs' container (basically the browser width).
As for the click event, we must first check if the DIV we clicked has our "current" classname. If it does, we move it, if not, we don't. The easy part is moving them. By resetting a DIV's right value to 0, each one will slide accordingly to the right with our animate event. Once this is done, we switch the "current" classname to the next DIV. We then increment a counter. This will help to see if all DIVs has been moved.
Once all DIVs have been moved to the right, there is an IF statement that will check our counter and see if it is greater than our total number of DIVs. If it is, the sliding motion is inverted and all DIV's will return to the left. In the same manner, if the clicked element is not the current DIV, it will not move. if it is, it will move back to the left. When all DIV's have been move back in default position, ou counter is reset and our "current" classname is reassigned to the very first DIV.
The resize function is not optimal, but it deals with any responsive issue you could face. It will reset all DIVs to the left and recalculate the offset, so that each DIV never slide offscreen. Needs a little work, but it's better than nothing for now.
JQUERY:
var $boxWidth;
var $screenWidth;
var $offsetRight;
var $count = 0;
$(function () {
$boxWidth = $('.box-item').width();
$screenWidth = $('.box-container').width();
$offsetRight = $screenWidth - ($boxWidth*$('.box-item').length);
$('.box-item').css('right',$offsetRight);
$('.box-item').click(function(event) {
if($(this).hasClass('current')){
if($count < $('.box-item').length){
$(this).animate({
right: "0px",
}, 2000, function(){
$count++;
$(this).removeClass('current');
if($count < $('.box-item').length){
$(this).next().addClass('current');
}
else{
$(this).addClass('current');
}
});
}
else{
$(this).animate({
right: $offsetRight,
}, 2000, function(){
$count++;
$(this).removeClass('current');
console.log($count);
if($count < ($('.box-item').length*2)){
$(this).prev().addClass('current');
}
else{
$(this).addClass('current');
$count = 0;
}
});
}
}
});
window.onresize = myResize;
myResize();
});
function myResize(){
$screenWidth = $('.box-container').width();
$offsetRight = $screenWidth - ($boxWidth*$('.box-item').length);
$('.box-item').each(function(){
$(this).css('right',$offsetRight);
});
$('.box-item').eq(0).addClass('current');
$count = 0;
}

div popup not working

What I am doing wrong?
When you click on class divtop, it should show a div popup in the middle of the page. At that time back page should become not clickable. escape or a button in popup will close it.
<html lang="en" class=" en">
<head>
<title>My Test Popup</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.divtop
{
width: 800px;
height: 300px;
border:solid;
}
.divbottom
{
top: 400px;
}
.localmenu {
border: 1px solid black;
background: #fff;
margin-left : auto;
top: 50px; width: 300px;
padding-top: 25px;
margin-top: 100px;
height: 150px;
}
.appContent{
width: 800px;
border:solid;
height: 600px;
display: block;
margin-left: auto;
margin-right: auto;
}
.maincontent{
width: 100%;
}
</style>
</head>
<body>
<div class="appContent" >
<div class="maincontent" >
<div class="divtop" >Top</div>
<div class="divtop divbottom" >Bottom</div>
</div>
<div id="popup" style="width : 100%; height: 600px;display: none;">
<div class='localmenu'>
Text in Div Popup<br/>
<button id="btnHide">Close</button><br/>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.divtop').click(function() {
$('#popup').show().css("top", "500px").animate({top: 50}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('#popup').hide();
});
});
</script>
</body>
</html>

Fiddle
I added some CSS to your #popup and it's now all in the CSS (not inline in the html). Changed also your jQuery animate to 50px, instead of just 50.
I think you have small adjustments to do to the CSS, like in .localmenu I'm not sure why you have both padding-top: 25px; margin-top: 100px;.
CSS
#popup {
position:absolute;
display: none;
float: left;
left:30%;
z-index:1;
}
#popoverlay {
position: fixed;
display:none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
}
jQuery
$(document).ready(function () {
$('.divtop').click(function () {
$('#popoverlay').show();
$('#popup').show().css("top", "500px").animate({
top: "50px"
}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function () {
$('#popup').hide();
$('#popoverlay').hide();
});
});
HTML
<div class="appContent">
<div class="maincontent">
<div class="divtop">Top</div>
<div class="divtop divbottom">Bottom</div>
</div>
<div id="popup">
<div class='localmenu'>Text in Div Popup
<br/>
<button id="btnHide">Close</button>
<br/>
</div>
</div>
</div>

To get it to work properly, even if there is a vertical scroll bar, you have to use position "fixed". Place popup as a direct child of body and make it's position: fixed, and width and height 100%. Place localmenu as a direct child of body as well. Working example at jsbin.
Html:
<div id="popup">
<!--// This is to stop the user from interacting with the content in the back
// and to give a visual clue about that
-->
</div>
<div class='localmenu'>
<div>
Text in Div Popup<br/>
<button id="btnHide">Close</button><br/>
</div>
</div>
<div class="appContent" >
<div class="maincontent" >
<div class="divtop" >Top</div>
<div class="divtop divbottom" >Bottom</div>
</div>
</div>
CSS:
//Use opacity to give a visual clue. Please note that this doesn't work in -all- browsers
#popup {
position: fixed;
width: 100%;
height: 100%;
display: none;
background: black;
opacity: .5;
top: 0;
left: 0;
}
//This is just to be able to center the actual menu
.localmenu {
top: 20%;
left: 0;
width: 100%;
position: fixed;
height: 150px;
display: none;
}
.localmenu > div {
border: 1px solid blue;
background: #fff;
margin-left : auto;
margin-right: auto;
width: 300px;
height: 150px;
}
Javascript: (This is mostly the same, although I removed the animate, because I don't know exactly how it works and it needs to end at 'top: 0'. As localmenu and popup are seperate, we show them seperate as well.)
$(document).ready(function() {
$('.divtop').click(function() {
$('#popup').show().animate(200);
$('.localmenu').show();
//$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('#popup').hide();
$('.localmenu').hide();
});
});

To block the div tags at the back from being clickable:
Add a div with the following style in your HTML. Im gonna call it overlay.
.overlay {
width: 100%;
height: 100%;
background-color: #000;
left: 0;
opacity: .8;
position: absolute;
top: 0;
z-index: 10000;
display: none;
}
This will essentially cover up your page when shown up.
To center your popup:
I added some extra styles to #popup and removed some from .localmenu. You were missing position: absolute and z-index, added those in. (z-index of popup must be > z-index of overlay)
#popup {
background: #fff;
position :absolute;
left : 40%;
width : 300px;
height: 600px;
height: 150px;
display: none;
z-index: 10001;
}
.localmenu
{
border: 1px solid black;
}
Then, in your JS,
In your animate method, I changed 50px to 30% to center div#popup
Added code to hide and show .overlay along with #popup.
After the changes,
$(document).ready(function () {
$('.divtop').click(function () {
$('#popup').show().css("top", "500px").animate({
top: "30%"
}, 200);
$('.overlay').show();
});
$('#btnHide').click(function () {
$('#popup,.overlay').hide();
});
});
Demo
http://jsbin.com/olasog/1
Code
http://jsbin.com/olasog/1/edit

Try this:
$(document).ready(function() {
$('.divtop').click(function() {
var div = $('.appContent');
$('.localmenu').css({'margin': '200px auto'});
$('#popup').show().css({top: "500px", position: 'absolute', width: div.width(), height: div.height()}).animate({top: 0}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('.mainContent').css("background-color", "");
$('#popup').hide();
});
});

How do I scale this layout?

Been working on this layout for some time now and each way I take I run into some sort of obstacle (v1 of this here: https://stackoverflow.com/questions/14572569/how-can-i-contain-pos-abs-div-within-specific-area)
What I'm trying to do now is to have the size of .spread adapt to the browser windows width and height, so it'll never exceed what the user currently can see in their browser (.spread currently have fixed width/height, for demo purposes). The ideal would to be able to resize on the fly and it adapts instantly (i.e. no media queries).
It works as it should in the v1 version I link to above, but then I had problems with the fade effect due to that .spread lacked an actual width/height.
Here's the new demo:
http://jsbin.com/uciguf/1
UPDATE: The markup can be changed as long as it works as described.
<div class="scrollblock" id="scroll_spread-1">
<div class="action"><!-- --></div>
<!-- -->
</div>
<div class="scrollblock" id="scroll_spread-2">
<div class="action"><!-- --></div>
<!-- -->
</div>
<div class="contentblock" id="spread-1">
<div class="inner windowwidth windowheight">
<div class="content">
<span></span>
<div class="spread">
<div class="fade"><!-- --></div>
<div class="left centerimage">
<img src="http://s7.postimage.org/8qnf5rmyz/image.jpg">
</div>
<div class="right centerimage">
<img src="http://s7.postimage.org/kjl89zjez/image.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="contentblock" id="spread-2">
<div class="inner windowwidth windowheight">
<div class="content">
<span></span>
<div class="spread">
<div class="fade"><!-- --></div>
<div class="left centerimage">
<img src="http://s7.postimage.org/5l2tfk4cr/image.jpg">
</div>
<div class="right centerimage">
<img src="http://s7.postimage.org/fjns21dsb/image.jpg">
</div>
</div>
</div>
</div>
</div>
html {
height: 100%;
}
body {
background: #eee;
line-height: 1.2em;
font-size: 29px;
text-align: center;
height: 100%;
color: #fff;
}
.scrollblock {
position: relative;
margin: 0;
width: 100%;
min-height: 100%;
overflow: hidden;
}
.contentblock {
margin: 0;
width: 0;
min-height: 100%;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
}
.contentblock .inner {
z-index: 2;
position: absolute;
right: 0;
top: 0;
background: #eee;
}
.fade {
width: 100%;
height: 100%;
position: absolute;
right: 0;
top: 0;
background-color: #000;
opacity: 0;
z-index: 3;
}
.content {
height: 100%;
}
.content span {
height: 100%;
vertical-align: middle;
display: inline-block;
}
.content .spread {
vertical-align: middle;
display: inline-block;
}
#spread-1 {
color: #000;
z-index: 105;
}
#spread-2 {
z-index: 110;
}
.spread {
max-height: 800px;
max-width: 1130px;
position: relative;
}
.spread .left {
position: relative;
width: 50%;
float: left;
text-align: right;
height: 100%;
}
.spread .right {
position: relative;
width: 50%;
float: left;
text-align: left;
height: 100%;
}
div.centerimage {
overflow: hidden;
}
div.centerimage img {
max-width: 100%;
max-height: 100%;
}
div.centerimage span {
height: 100%;
vertical-align: middle;
display: inline-block;
}
div.centerimage img {
vertical-align: middle;
display: inline-block;
}
P.S. The title is really bad, don't know what I'm looking for, but please change to something more informative if you can think of anything better.

Three-Quarters of the Way to a Full Solution
This is not quite a full solution yet, as it cannot accommodate a super narrow width window size (like your old version did). However, it is a good step toward what you seek.
Here is the example.
The key things that have been changed:
Added
.spread { height: 93%; } /* You had originally wanted a height difference */
Removed
overflow: hidden from div.centerimage.
width: 50% from .left and .right.

maybe you could just pin your .spread divisor
.spread {
bottom: 11px;
left: 11px;
right: 11px;
top: 11px;
position: absolute;
/* ... */
}
This way, it will be resized the same of the viewport area.
Here a jsFiddle to demonstrate.
Carry on

I know you were probably looking for a solely CSS/HTML solution, but really you're probably best off using some Javascript. There's no way to be clean and precise just using CSS & HTML.
But if you run a tiny bit of JavaScript on page load and window-resize, then your divs can have actual height/width values and scale cleanly.
The trick is to have the outside div get its width/height set by the JavaScript, and then all its children use % dimensions so they grow appropriately.
Here's the basics using some JQuery:
<script type="text/javascript">
//Function to get the current window dimensions.
function get_window_dims() {
var dims = [];
if (parseInt(navigator.appVersion)>3) {
if (navigator.appName=="Netscape") {
dims[0] = window.innerWidth;
dims[1] = window.innerHeight;
}
if (navigator.appName.indexOf("Microsoft")!=-1) {
dims[0] = document.body.offsetWidth;
dims[1] = document.body.offsetHeight;
}
}
return dims;
}
function ResizeDivs {
var dims = get_widnow_dims();
var div_width = Math.floor(dims[0] * 0.93); // calculating the div width to be 93% of the window width
$('div.spread').css('width',div_width+'px');
}
$(function() {
ResizeDivs();
$(window).resize(function(){
ResizeDivs();
});
});
</script>
You could easily clean up this code to be more concise, but I figured I'd put it out here this way for you to see all the parts.
If you wanted to spend the extra time, you could even add more JQuery to animate the divs when the window resizes.
Hope this helps.

Have you considered using a responsive framework to solve your issue? You can set width's and heights to percentages and have min-width, min-height.