JavaScript: Load Images in a div after clicking a button - javascript

I have a hidden div (by using max-height and transition) that show up when I click a button. This div contains several images that load up when you first load the site. I would like them to load when I click the button to show the div, to make the site lighter.
<!DOCTYPE html>
<html>
<head>
<style>
.class1 {
max-height:0px;
transition:max-height 1s;
overflow:hidden;
}
</style>
<script>
function show() {
document.getElementById('id1').style.maxHeight = "200px";
}
</script>
</head>
<body>
<button onclick="show()">Show Images</button>
<hr>
<div id="id1" class="class1">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
<img src="img4.jpg" alt="">
</div>
<hr>
</body>
</html>


I would suggest using an attribute on the img tags to store the intended src attribute, then apply it on the button click. This would avoid having to maintain a list of src urls in your JavaScript.
function show() {
document.getElementById('id1').style.maxHeight = "200px";
var images = document.querySelectorAll("#id1 img");
for(var i = 0; i < images.length; i++)
{
images[i].src = images[i].getAttribute('data-src');
}
}
.class1 {
max-height:0px;
transition:max-height 1s;
overflow:hidden;
}
<button onclick="show()">Show Images</button>
<hr>
<div id="id1" class="class1">
<img data-src="https://picsum.photos/400/200" alt="">
<img data-src="https://picsum.photos/400/200" alt="">
<img data-src="https://picsum.photos/400/200" alt="">
<img data-src="https://picsum.photos/400/200" alt="">
</div>
<hr>


Here's the working fiddle https://jsfiddle.net/6ve7ub79/
You can do it easily using jQuery
jQuery
$(document).ready(function(){
$('button').bind('click', function(){
$('.i1').attr('src', 'img1.jpg');
$('.i2').attr('src', 'img2.jpg');
$('.i3').attr('src', 'img3.jpg');
$('.i4').attr('src', 'img4.jpg');
});
});
HTML
<button onclick="show()">Show Images</button>
<hr>
<div id="id1" class="class1">
<img class="i1" src="" alt="">
<img class="i2" src="" alt="">
<img class="i3" src="" alt="">
<img class="i4" src="" alt="">
</div>
<hr>
CSS
.class1 {
transition:max-height 1s;
}


try this code
<!DOCTYPE html>
<html>
<head>
<style>
.class1 {
max-height:0px;
transition:max-height 1s;
overflow:hidden;
}
</style>
<script>
function show() {
document.getElementById('id1').innerHTML= '<img src="img1.jpg" alt=""><img src="img2.jpg" alt=""><img src="img3.jpg" alt=""><img src="img4.jpg" alt="">';
document.getElementById('id1').style.maxHeight = "200px";
}
</script>
</head>
<body>
<button onclick="show()">Show Images</button>
<hr>
<div id="id1" class="class1">
</div>
<hr>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
<style>
.class1 {
max-height:0px;
transition:max-height 1s;
overflow:hidden;
}
</style>
<script>
function show() {
document.getElementById('id1').style.maxHeight = "200px";
}
</script>
</head>
<body>
<button onclick="show()">Show Images</button>
<hr>
<div id="id1" class="class1">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
<img src="img4.jpg" alt="">
</div>
<hr>
</body>
</html>

Related

how to add variable link in html

i have a remote php file located on a server
https://webserver.com/file.php
and i have several images in html file on another server that are linked through
<div class="apps">
<img src="https://anysite.com/image.jpeg" alt="image" border="0"></br>
logo
</div>
i want to replace the main link with a variable and add it to my images.
should appear link the following:
<div class="apps">
<img src="https://anysite.com/image.jpeg" alt="image" border="0"></br>
logo
</div>
and the final link of the image will be:
https://webserver.com/file.php?type=1
Anyone can help please?
the html code is as follows:
<html>
<head> </head>
<?php
var $variable = "https://webserver.com/file.php";
?>
<body>
<div class="apps">
<img src="https://anysite.com/image.jpeg" alt="image" border="0">
logo
</div>
<div class="apps">
<img src="https://anysite.com/image2.jpeg" alt="image2" border="0">
logo
</div>
</body>
</html>

It's PHP, not Javascript question. You try something like this?
<div class="apps">
<img src="https://anysite.com/image.jpeg" alt="image" border="0"></br>
logo
</div>
EDIT:
complete example:
<?php
$variable = "https://webserver.com/file.php";
?>
<html>
<head> </head>
<body>
<div class="apps">
<img src="https://anysite.com/image.jpeg" alt="image" border="0">
logo
</div>
<div class="apps">
<img src="https://anysite.com/image2.jpeg" alt="image2" border="0">
logo
</div>
</body>
</html>

image src transitions appears for the user

I was doing a simple design for a mobile phonegap application and i just wanted to change the src of an image in a div according to a certain click event but this src is in another div and when the src changes according to the click the transition between the previous src of the image and the next src appears for the user and i just dont want such Defoe in the application..
So all what i need is to make the src change while moving to the other div of the app without letting the user notice such a thing
....Here are my html,css,javascript
document.getElementById("Golds").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="goldsgymlogo.png";
x.style.display = "inline";
});
document.getElementById("Titans").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="Titans.jpg";
x.style.display = "inline";
});
document.getElementById("Smart").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="smart.png";
x.style.display = "inline";
});
document.getElementById("SamiaAllouba").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="Samia-Allouba.jpg";
x.style.display = "inline";
});
document.getElementById("Fibers").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="fibers.jpg";
x.style.display = "inline";
});
/*
Thats My CSS
*/
#GymLogin{
display: none;
margin-left:30%;
margin-top:15%;
max-width:135px;
max-height:135px;
}
<!--HTML CODE HERE-->
<!DOCTYPE html>
<html>
<head>
<title>Phone Gap trial</title>
<link rel= 'stylesheet' href='css/bootstrap.css' />
<link rel= 'stylesheet' href='css/font-awesome.min.css' />
<link rel= 'stylesheet' href='css/style.css' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="childbrowser.js"></script>
<script type="text/javascript" charset="utf-8" src="Torch.js"></script>
</head>
<body>
<div id="start" class="ourteam text-center">
<!--start container-->
<div class="team">
<section class="header">
<div>
<h1>Train & Game</h1>
</div>
</section>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="person">
<img id="Golds" class="teamphotos img-circle" src="img\goldsgymlogo.png"/>
<h6>Gold's Gym</h6>
</div>
</div>
<div class="col-xs-4">
<div class="person">
<img id="Titans" class="teamphotos img-circle" src="img\Titans.jpg"/>
<h6>Titans Gym</h6>
</div>
</div>
<div class="col-xs-4">
<div class="person">
<img id="Smart" class="teamphotos img-circle" src="img\smart.png"/>
<h6>Smart Gym</h6>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-6">
<div class="person">
<img id="SamiaAllouba" class="teamphotos img-circle" src="img\Samia-Allouba.jpg"/>
<h6>Samia Allouba</h6>
</div>
</div>
<div class="col-xs-6">
<div class="person">
<img id="Fibers" class="teamphotos img-circle" src="img\fibers.jpg"/>
<h6>Fibers Gym</h6>
</div>
</div>
</div>
</div>
<!--end container-->
</div>
<!--end team-->
</div>
<!--Our team div end-->
<!-- Start Login Page -->
<div data-role="page" id="loginpage" onblur="deletesrc()">
<img id="GymLogin" class="img-circle" src=""/>
<input type="text" size="15" id="Usernameinput" placeholder="Username">
<span id="asterisk1" class="asterisk"> </span>
<input type="password" id="Passwordinput" placeholder="Password">
<span id="asterisk2" class="asterisk"> </span>
<button class="btn btn-danger" id="GymName">Omar</button>
</div>
<!-- End Login Page -->
<script src="js/jquery-2.1.4.min.js"> </script>
<script src="js/jquery.mobile-1.4.5.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>
<script src="js/index.js"></script>
</body>
</html>

Although there's much better ways to do what you're trying to do, you can try this it might help
Instead of changing the ".src" of the images, just have multiple images loaded and hidden, and change the the display of the one you want.
So your HTML becoms
<img id="golds" class="GymLogin img-circle" src="golds..."/>
<img class="GymLogin img-circle" src="titans..."/>
<img class="GymLogin img-circle" src="samia..."/>
<img class="GymLogin img-circle" src="fibers..."/>
Your css
.GymLogin{
opacity: 0;
}
Your javascript
document.getElementById("Golds").addEventListener('touchstart', function(){
$('.GymLogin').hide();
$('#golds').show();
});
Haven't tried it but you get the idea.

I have created a simple test portfolio site, but the images move on resize

I created a simple test website where the user can edit a jQuery code to insert images into a portfolio. I have created the html and css and everything but when i resized the screen the images moved. I would like the screen to just move over top the images. How can i do this, i tried putting position:absolute; but that did not work. All help would be appreciated! THANKS!
HTML:
<html>
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="imageBlocks">
<div class="img1">
<img src="/" alt="Cannot load image">
</div>
<p class="label">Brick image</p>
Read more &gt&gt
</div>
<div class="imageBlocks">
<div class="img1">
<img src="/" alt="Cannot load image">
</div>
<p class="label">Brick image</p>
Read more &gt&gt
</div>
<div class="imageBlocks">
<div class="img1">
<img src="/" alt="Cannot load image">
</div>
<p class="label">Brick image</p>
Read more &gt&gt
</div>
<div class="imageBlocks">
<div class="img1">
<img src="/" alt="Cannot load image">
</div>
<p class="label">Brick image</p>
Read more &gt&gt
</div>
<div class="imageBlocks">
<div class="img1">
<img src="/" alt="Cannot load image">
</div>
<p class="label">Brick image</p>
Read more &gt&gt
</div>
<div class="imageBlocks">
<div class="img1">
<img src="/" alt="Cannot load image">
</div>
<p class="label">Brick image</p>
Read more &gt&gt
</div>
<div class="imageBlocks">
<div class="img1">
<img src="/" alt="Cannot load image">
</div>
<p class="label">Brick image</p>
Read more &gt&gt
</div>
</div>
</body>
</html>
CSS:
*{margin:0px;padding:0px;}
body{
width:80%;
margin-left:100px;
}
.container{
width:100%;
}
img{
height:100px;
width:200px;
margin:30px;
}
.imageBlocks{
height:100px;
width:200px;
display:inline-block;
margin-right:30px;
}
.imageBlocks p{
font-family:Arial;
text-align:center;
}
.imageBlocks a{
font-family:Arial;
margin-left:50px;
color:#3CABCE;
text-decoration: none;
}
Javascript:
$("document").ready(function(){
//Bellow you can change the images and add new ones!
//<---If you would like to change it, just change the location
//The number beside the .img is the the image that will change, from right to left
// |Image #| |Location|
$(".img1 img").attr("src", "brick.png");
$(".img2 img").attr("src", "brick.png");
$(".img3 img").attr("src", "brick.png");
$(".img4 img").attr("src", "brick.png");
$(".img5 img").attr("src", "brick.png");
$(".img6 img").attr("src", "brick.png");
$(".img7 img").attr("src", "brick.png");
$(".img8 img").attr("src", "brick.png");
$(".img9 img").attr("src", "brick.png");
$(".img10 img").attr("src", "brick.png");
$(".img11 img").attr("src", "brick.png");
});
And you can use just any image at all because it resize with css
Also as you can see, I used javascript/jquery to change the images, but is there an easier way i could learn? Maybe some type of config file? I only ask because someone has asked me to make a website like this where they can easily change the images without a database.

You'll need to set a fixed width to the container div. The current 100% width will make it cover 100% of the window when resized - so the images will stack on minimizing. If you set the width in pixels it should stay. You can also do an xml file for client if you know how to do that.

Set container min-width to your liking, or if you would like it to always remain the same size set width to that value.
https://jsfiddle.net/Ly41gog5/

Hide/show div, what am i doing wrong

im trying to build a gallery that loads a div with images when a button i clicked.
the problem is that when i have 2 buttons only the last images are clickable, a little hard to explain but you can try it out on my page: http://www.bravitus.com/#gallery
is it wrong having two javascrips like that
script1:
<script type="text/javascript">
$(document).ready(function(){
$(".slidingpriv").hide();
$(".show_priv").show();
$('.show_priv').click(function(){
$(".slidingpriv").slideToggle();
});
});
script2:
<script type="text/javascript">
$(document).ready(function(){
$(".slidinggf").hide();
$(".show_gf").show();
$('.show_gf').click(function(){
$(".slidinggf").slideToggle();
});
});
html:
<div class="row">
<div class="container">
<!---section--->
<div class="center">
Private projects
</div>
<div class="slidingpriv">
<a href="pages/inasecond/inasecond.html"><div id="imgstyle" class="image">
<img href="" src="img/inasecond.jpg" width="300" height="300" alt=""/></a>
</div>
<a href="pages/2012/2012.html"><div id="imgstyle" class="image">
<img src="img/2012.jpg" width="300" height="300" alt=""/> </div></a>
<a href="pages/greenlights/greenlights.html"><div id="imgstyle" class="image">
<img src="img/Cover-text.jpg" width="300" height="300" alt=""/> </div> </a>
</div>
<!---section--->
<div class="center">
Grundforløb
</div>
<div class="slidinggf">
<a href="pages/inasecond/inasecond.html"><div id="imgstyle" class="image">
<img href="" src="img/inasecond.jpg" width="300" height="300" alt=""/></a>
</div>
<a href="pages/2012/2012.html"><div id="imgstyle" class="image">
<img src="img/2012.jpg" width="300" height="300" alt=""/> </div></a>
<a href="pages/greenlights/greenlights.html"><div id="imgstyle" class="image">
<img src="img/Cover-text.jpg" width="300" height="300" alt=""/> </div> </a>
</div>
css:
.center{
position:relative;
width:100%;
height:100%;
margin:0 auto;
text-align:center;
/*background-color:#0C3;*/
}
.show_priv {
display:none;
position:relative;
height:100%;
/*background-color: #99CCFF;*/
}
.slidinggf {
height:100%;
/**background-color: #99CCFF;**/
width:100%;
position:relative;
}
.show_gf {
display:none;
position:relative;
height:100%;
/*background-color: #99CCFF;*/
}
.slidingpriv {
height:100%;
/**background-color: #99CCFF;**/
width:100%;
position:relative;
}
Thanks ;)

You should look at using your browser developer tools which has some very easy to use tools for debugging, such as the inspect element.
https://developer.chrome.com/devtools
https://developer.mozilla.org/en-US/docs/Tools
With this you can find what may be blocking your ability to click on some elements, even if you're sure they should work.
Also try to combine scripts into the same document ($(document).ready(function(){});)

how to change the image of div on click of other image

I have two image div in HTML i want that onclik of one image other image should change
<div class="image_21"><img src="pagetwo_graph_two_4.png"/></div>
<div class="alignment"><img src="pagetwo_graph_one.png"/></div>
<div class="image_one"><img src="pagetwo_graph_two_1.png"/></div>
<div class="image_two"><img src="pagetwo_graph_two_2.png"/></div>
<div class="option_image"><img src="option1.png"/></div>
<div class="option_image_label">Option 1</div>
<div class="option_image_one"><img src="option1.png"/></div>
<div class="option_image_label_one">Option 2</div>
I want that on click on option_image_one it should change image of image_one and imagetwo

UPDATE
<html>
<head>
<script type="text/javascript">
function changeImage(){
document.getElementById('toChange').src='3.jpg';
}
</script>
</head>
<body>
<div class="option_image_one"><img src="1.jpg" onclick="changeImage()"/></div>
<div class="image_two"><img src="2.jpg" id="toChange"/></div>
</body>
</html>
Here the code that works for me

onclick = "document.getElementById('option_image_one').getElementsByTagName('img')[0].src='pagetwo_graph_two_2.png' "
It would work.

Best option is to give images some id and then do something like document.getElementById('yourId').src='newimage' (this should be some js function that you assign to onClick event on your first div)

You can try the following:
<div class="option_image_one">
<img onclick="document.getElementById('image2').src='http://www.w3schools.com/images/compatible_firefox.gif'" src="http://www.w3schools.com/images/compatible_chrome.gif"/>
</div>
<div class="image_two">
<img id="image2" src="http://www.w3schools.com/images/compatible_safari.gif"/>
</div>
Note that I have added an ID to the second image.
See the live example on this interactive HTML/JS editor

div are useless
<img src="option1.png" id="img1" onclick="document.getElementById('img2').src='newImage.png'"/>
<img src="pagetwo_graph_two_2.png" id="img2"/>

If you could use jQuery it would be like this:
$(".option_image_one img").onclick(function(event) {
$(".image_two img").attr('href','different_image,jpg').hide().fadeIn("fast");
});
To use jQuery import the jQuery library by including the following in your header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

As per Thomas's and Filype's answers, I would suggest that use divs but put onClick for img tag and not div tag.
This is for future enhancement so that if you would like to add anything else to these divs.

complete code just copy it and paste
jQuery(document).ready(function(){
jQuery('.small').click(function(){
if(jQuery(this).hasClass('active')!=true);
{
jQuery('.small').removeClass('active');
jQuery(this).addClass('active');
var new_link=jQuery(this).children('img').attr('src');
jQuery(countainer).children('img').attr('src',img_link);
}
});
});
</script>
</head>
<body>
<div class="countainer">
<img src="image/slideme-jQuery-slider.jpg" width="400" heiht="200"/ alt="">
</div>
<div class="clear"></div>
<br/>
<div class="mini">
<div class="small active">
<img src="image/Galleria-JavaScript-Image-Gallery.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/Trip-Tracker-slideshow.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/Visual-Lightbox-Gallery.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/RoyalSlider_-_Touch-Enabled_Image_Gallery_and_Content_Slider_Plugin.jpg" alt="" height="50" width="50" />
</div>
<div class="small">
<img src="image/UnoSlider-jQuery-image-slider.jpg" height="50" width="50" />
</div>
</div>

Categories