How would I resize an html image with Javascript? I would like the "Pack" image to become larger after 7 seconds. Here is my code:
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Pack -->
<img id="pack" src="http://cloud.attackofthefanboy.com/wp-content/uploads/2013/07/fifa14pack.png">
<!-- Sparkles-->
<div id="sparkles">
<img id="sparkle1" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle2" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle3" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle4" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle5" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle6" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle7" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle8" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
</div>
You can register a timeout function to change the elements styles after 7 seconds with the following:
setTimeout(function(){
var pack = document.getElementById("pack");
pack.style.width = "100%;";
}, 7000);
You will probably want to customize this to your use case.
Try:
setTimeout(function(){document.getElementById("pack").style.width="soandsopx";document.getElementById("pack").style.height="soandsopx";},7000);
Where "soandsopx" is the number of pixels you want it to have, plus "px".
This will do the trick:
window.setTimeout(function () {
var pack_image = document.getElementById('pack');
if(pack_image && pack_image.style) {
pack_image.style.height = '700px';
pack_image.style.width = '700px';
}
},7000);
jsFiddle of this code
Related
<div class="view-content">
<img src="/img/img_01.png">
<img src="/img/img_02.png">
<img src="/img/img_03.png">
</div>
If i wanna change this to
<div class="view-content">
<img src="http://example.com/img/img_01.png">
<img src="http://example.com/img/img_02.png">
<img src="http://example.com/img/img_03.png">
</div>
Like this with using javascript or php str replace
How can i do this.
var count = $('.view-content img').length;
var url = window.location.hostname;
for(var i=0;i<count;i++){
var imgurl = $('.view-content').eq(i).attr('src');
$('.view-content img').eq(i).append(url+'/'+imgurl);
}
I've alreay tried this code but it doesn't work at all
You can use such simple script to add http at the begining of your src parameters for each image.
const images = document.querySelectorAll('.view-content img')
images.forEach(item => {
const src = item.getAttribute('src');
const newSrc = 'http://example.com' + src;
item.setAttribute('src', newSrc);
})
<div class="view-content">
<img src="/img/img_01.png">
<img src="/img/img_02.png">
<img src="/img/img_03.png">
</div>
Maybe this snip can help, all I did was loop through the img elements; grabbed the SRC and stored in a temp var; appended the http:// domain + the src as the new source attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1 class="mt-5">Test</h1>
<img src="/img/img_01.png">
<img src="/img/img_02.png">
<img src="/img/img_03.png">
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script>
$("img").each(function(){
var src = $(this).attr('src');
$(this).attr('src', 'http://www.blah.com' + src);
})
</script>
</body>
</html>
A variation on a theme perhaps
let host='http://example.com/';
let col=document.getElementsByTagName('img');
col.forEach( img =>{
if( !~img.src.indexOf( host ) )img.src = host + img.src;
});
what about just switching it manually in js with id's?
document.getElementById("1stPic").src="https://cdn.pbrd.co/images/HS0VtcX.jpg";
And if you need a new base URL for all the links on a page, you can avoid JS completely and use the <base> element.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
function init(){
th=document.getElementById('divId').getElementsByTagName('img');
for(c=0;c<th.length;c++) {
th[c].onclick=function() {
swapImage(this.src);
}
}
}
function swapImage(url){
str=url.lastIndexOf(".");
str1=url.substring(str-1);
str2=url.substring(str);
url=url.replace(str1,str2);
document.getElementById('mainImage').src=url;
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
I'm mainly new to JS here, my main issue is specifically the JS section please help, I've been going at this for 4 days now. What the code should do is display a top image, and 5 thumbnails at the bottom. When clicked the thumbnails should display on to by switching with the current image.
Here is the HTML section of the code:
<html>
<head>
<link href='gallery.css' type="text/css" rel ='stylesheet'/>
<title>Gallery</title>
</head>
<body>
<img id="mainImage" src="Images/alphamon.jpg"/>
<br />
<div align='center' id="divId" >
<img class="imgStyle" src="Images/alphamon.jpg" />
<img class="imgStyle" src="Images/gallantmon.jpg" />
<img class="imgStyle" src="Images/omnimon.jpg" />
<img class="imgStyle" src="Images/omnimon_2.jpg" />
<img class="imgStyle" src="Images/royal_knights.jpg" />
</div>
<script type='text/javascript' src='gallery.js'></script>
</body>
</html>
Everything is much easier.
function swapImage(url){
/* no need this code
str=url.lastIndexOf(".");
str1=url.substring(str-1);
str2=url.substring(str);
url=url.replace(str1,str2);
*/
document.getElementById('mainImage').src=url;
}
I wanted to generate an alert box when user moves his mouse on the star image. I tried to check the errors but I am not able to find error.
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="rating_style.css"/>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#1_star").hover(function() {
alert("hello");
});
});
</script>
</head>
<body>
<center>
<div class="rating-container">
<div class="rating-star">
<img src="sta.png" width="50" id="1_star" />
<img src="sta.png" width="50" id="2_star" />
<img src="sta.png" width="50" id="3_star" />
<img src="sta.png" width="50" id="4_star" />
<img src="sta.png" width="50" id="5_star" />
</div>
</div>
</center>
</body>
</html>
you should include jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#1_star").hover(function() {
alert("hello");
});
});
</script>
Working Example
Note: This code will work .. but please searching for how to include
jquery or how to install jquery because there are different ways to do
that
Since you don't need both a mouse in and a mouse out (that is what hover is really for), you might want to use .mouseover() instead.
you can use this method :
<div onmousemove="alert('hello')">
<p>onmousemove: <br> <span id="demo">Your Text</span></p>
</div>
It may be very silly question, I am new in javascript ,I Making a gallery using http://photoswipe.com/ js library ,I download js library from official site , I used given example index.html page
Normal working fine. But my problem when I append div $('.gallery-row').append('<div class="gallery-item"><img src="images/thumb/003.jpg" alt="Image 003" /></div>'); on <div class="gallery-row"></div> using jquery append method from load function.
My problem : image show but when I click on the image then it not open with swipe div .
I waste my whole day but didn't get anything.
my code:
<!DOCTYPE html>
<html>
<head>
<title>PhotoSwipe</title>
<meta name="author" content="Code Computerlove - http://www.codecomputerlove.com/" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<link href="styles.css" type="text/css" rel="stylesheet" />
<link href="photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="lib/simple-inheritance.min.js"></script>
<script type="text/javascript" src="code-photoswipe-1.0.11.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
// Set up PhotoSwipe with all anchor tags in the Gallery container
document.addEventListener('DOMContentLoaded', function(){
Code.photoSwipe('a', '#Gallery');
}, false);
function load(){
//append div from this function
$('.gallery-row').append('<div class="gallery-item"><img src="images/thumb/003.jpg" alt="Image 003" /></div>');
}
</script>
</head>
<body onLoad="load()">
<div id="Header">
<img src="images/codecomputerlovelogo.gif" width="230" height="48" alt="Code Computerlove" />
</div>
<div id="MainContent">
<div class="page-content">
<h1>PhotoSwipe</h1>
</div>
<div id="Gallery">
<div class="gallery-row">
<!--
<div class="gallery-item"><img src="images/thumb/001.jpg" alt="Image 001" /></div>
<div class="gallery-item"><img src="images/thumb/002.jpg" alt="Image 002" /></div>
<div class="gallery-item"><img src="images/thumb/003.jpg" alt="Image 003" /></div>
-->
</div>
</div>
</div>
</body>
</html>
Try doing the append in the DOMContentLoaded handler, before you call Code.photoSwipe. Also, jQuery provides a shorter way to write this:
<script>
$(function() {
$('.gallery-row').append('<div class="gallery-item"><img src="images/thumb/003.jpg" alt="Image 003" /></div>');
Code.photoSwipe('a', '#Gallery');
});
</script>
When you do this, remove onload="load()" from your <body> tag.
Perhaps it's the extra space in the href for your a tag? Try changing "images/full /003.jpg" to "images/full/003.jpg"
I guess, you need to do this :
document.addEventListener('DOMContentLoaded', function(){
Code.photoSwipe('a', '#Gallery');
}, false);
After the append
After some Test, DOMContentLoaded is fired before onload
I'm setting up orbit according to this guide and for some reason it is not working at all. I'm sure its something incredibly simple being that there are only like 2 steps to follow, but I'm really not seeing it and could use a second set of eyes. Let me know if you see what the issue is, thanks!
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.orbit.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/orbit.css">
<script type="text/javascript">
$(window).load(function() {
$('#featured').orbit();
});
</script>
<div id="featured">
<img src="1.jpg" alt="Overflow: Hidden No More" />
<img src="2.jpg" alt="HTML Captions" />
<img src="3.jpg" alt="and more features" />
</div>
Check your paths to jQuery and orbit JS files are correct and loading.
Try using $(document).ready();
<div id="featured">
<img src="1.jpg" alt="Overflow: Hidden No More" />
<img src="2.jpg" alt="HTML Captions" />
<img src="3.jpg" alt="and more features" />
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#featured').orbit();
});
</script>