I made a modal using jQuery, but it doesn't seem to work properly. I'm calling my images in a javascript function, and the modal is in my window.onload in the same page the images are loaded. I'm loading the images first, but the modal only works if i put the imgs directly in the HTML and if i take everything else from the window.onload. That's how i'm calling all imgs:
function maisGaleria(n){
var galeria = new Array();
var img = document.querySelector("#gallery");
var pic = 0;
if(n == 1){
pic = 4;
}else if(n == 2){
pic = 7;
}else{
pic = 4;
}
img.innerHTML = "<div class='row'>";
img.innerHTML += "<div class='six columns'>";
img.innerHTML += "<h4>Galeria "+n+"</h4>";
for(var i = 0; i < pic; i++){
galeria[i] = "foto"+n+"_"+(i+1)+".jpg";
}
for(var i = 0; i < galeria.length; i++){
img.innerHTML += "<img src='img/"+galeria[i]+"' class='imgs-modal'>";
}
img.innerHTML += "</div>";
img.innerHTML += "</div>";
}
and the window.onload with the modal:
window.onload = function(){
var rdSocial = document.querySelector("#social");
var teste = document.querySelector("#teste");
var fb = '<img src="img/fb.png" value="1" class="img" onclick="redireciona(this);">';
var twt = '<img src="img/twitter.png" value="2" class="img" onclick="redireciona(this);">';
var insta = '<img src="img/insta.png" value="3" class="img" onclick="redireciona(this);">';
rdSocial.innerHTML += fb;
rdSocial.innerHTML += twt;
rdSocial.innerHTML += insta;
var x = location.search.split("?gal=")[1];
y = document.querySelector("#pics");
//console.log(x);
y.onload = maisGaleria(x);
//the modal starts here
$('.imgs-modal').on('click', function(){
var obj = $(this).clone();
console.log(obj);
$("#box_modal").html(obj);
$("#modal").fadeIn(1000);
});
$(".fechar").on('click', function(){
$("#modal").fadeOut(1000);
});
}
#anuseranother there are few errors in you code.
Before calling maisGaleria method in window.onload, you have to declare/define it.
As per your jsfiddle, it is throwing errors like maisGaleria is not defined. So define maisGaleria it before using it.
After fixing this error, another error is "Cannot set property 'onload' of null". There is no #pics element in the dom (y = document.querySelector("#pics")) and you are referencing it and adding onload method to it. Please update these two and let us know exactly how you need a modal with images any example in internet.
Related
I want to display all images in a array on my web page. Can I call img tag in a loop? Or if anyone could suggest a way to print all images with source urls in a array will be very helpful?
<div id="wrapper"></div>
<script>
var container = document.getElementById("wrapper");
function myFunction() {
var index;
var urls = ["Banana.jpg", "Orange.jpg", "Apple.png", "Mango.jpg"];
for (index = 0; index < urls.length; index++) {
var newImage = '<img src="+url[index]+" alt="#" /> ' + index;
container.innerHTML += newImage;
}
}
</script>
PS: I'm newbie in JS
You really shouldn't use the innerHTML += method. Use the insertAdjacentHTML() method instead.
var container = document.getElementById("wrapper");
var urls = ["Banana.jpg", "Orange.jpg", "Apple.png", "Mango.jpg"];
for( i=0; i<urls.length; i++){
container.insertAdjacentHTML('beforeend', '<img src="'+urls[i]+'">');
}
<div id="wrapper"></div>
PS, if you are going to wrap this code inside a function. Remember to call the function.
First of all your syntax for building the img tags are wrong, notice below that the array isn't par of the string literal but concatenated to it.
'<img src="'+url[index]+'" alt="#" /> '
Also I would build the html first, then add it to the div.
var newImages = '';
for (index = 0; index < urls.length; index++) {
newImages += '<img src="'+url[index]+'" alt="#" /> ' + index;
}
container.innerHTML += newImages;
I am trying to change picture in div on mouse over and on click using JS. Like that:
var favs = document.getElementsByClassName("fav-wrapper");
for (var i = 0; i < favs.length; i++) {
favs[i].innerHTML = '<img src="images/favorite.png" />';
favs[i].onMouseOver = function () {
favs[i].innerHTML = "<img src='images/favorite_hover.png' />";
}
favs[i].onClick = function () {
favs[i].innerHTML = "<img src='images/favorite_on.png' />";
};
}
But for some reason it won't work. What am I doing wrong?
Try lowercase event handlers and actually you need a closure to have the [i] work inside the loop. I prefer using this in your case.
var favs = document.getElementsByClassName("fav-wrapper");
for (var i = 0; i < favs.length; i++) {
favs[i].innerHTML = '<img src="images/favorite.png" />';
favs[i].onmouseover = function () {
this.innerHTML = "<img src='images/favorite_hover.png' />";
}
favs[i].onclick = function () {
this.innerHTML = "<img src='images/favorite_on.png' />";
}
}
but why not just change the src of the images?
var favs = document.getElementsByClassName("fav-wrapper");
for (var i = 0; i < favs.length; i++) {
var fav=favs[i];
fav.getElementsByTagName("img")[0].src="images/favorite.png";
fav.onmouseover = function () {
this.getElementsByTagName("img")[0].src="images/favorite_hover.png";
}
fav.onmouseout = function () {
this.getElementsByTagName("img")[0].src="images/favorite.png";
}
fav.onclick = function () {
this.getElementsByTagName("img")[0].src="images/favorite_on.png";
}
}
you could do all this with CSS by the way
you can try this method using pure css changing background on hover and on click
.image{width:500px;height:500px;background-image: url("http://www.toolsformoney.com/financial_software_demos.jpg");background-repeat: no-repeat;}
.image:hover{background-image: url("http://www.hostpph.com/blog/wp-content/uploads/2012/06/free-bookie-software-demo-large.jpg");background-repeat: no-repeat;}
.image:focus{background-image: url("https://www.arxan.com/wp-content/uploads/assets1/images/demo.png");background-repeat: no-repeat;outline: 0;transition:0s;}
<div class="image" tabindex="0">
</div>
I have a place for the main photo (id = "main") and other photos in the table (id = "pic+1(2,3,4,5,6)"). I would like to click on a photo with id = "pic n" and to load it in the element with id "main". How to realize this?
Also I have an error
Uncaught TypeError: Cannot set property 'onclick' of null.
Here is my code:
<img id="main" src="">
galery(dir){
...
...
function createPreview() {
var f = document.createElement("table");
var row = f.insertRow();
for(var j = 0; j < count ; j++) {
var cell = row.insertCell(j);
var img = new Image();
img.src = dir + '/' + j + ".jpg";
img.width = "100";
img.id = 'pic' + j;
cell.appendChild(img);
}
document.body.appendChild(f);
}
document.getElementById(this.pic).onclick = function() {
document.getElementById('main').src = this.src;
}
...
}
Although your code has many errors and misunderstandings on how js works here is some simple code that solves this issue
//fake an image directory
var count = 3;
var dir = 'http://lorempixel.com/300/300/abstract/'
//setup a table
var f = document.createElement("table");
var row = f.insertRow();
for (var j = 0; j < count; j++) {
var cell = row.insertCell(j);
imagepath = dir + j;
cell.innerHTML = '<img src="' + imagepath + '" width="100" onclick="showmain(' + j + ')">';
}
document.body.appendChild(f);
//change imagesrc in main tag
function showmain(image) {
document.getElementById('main').src = dir + image;
}
This is the most basic (noob) thing you do with javascript.
I strongly suggest you read some more tutorials before coming back with such basic questions.
Here is a Plunker.
No onload handler, so the script is at the end of the page.
You have a lot of errors in your code:
1) You define var f inside the function, so its scope is inside the function. But then you try to get it outside the function with document.body.appendChild(f); which doesn't work. you should move document.body.appendChild(f); inside the function.
2) Then you get Uncaught TypeError: Cannot set property 'onclick' of null. because document.getElementById(this.pic) returns null. this.pic returns no id.
3) close your img tag.
4) You have 2 extra }
And I am sure there are more if you show us all your code.
I'm trying to make my page so a user can type a number value between 1 and 200 to get to whichever image they want to view. I've played around with the code, but I can't seem to get anything to work. Below is my code that I've tried to do this with. What am I doing wrong?
Edit: New Code:
`
<html>
<head>
<title></title>
</head>
<body style="background-color: teal;">
<form>
<center>
<div width="50%" style="width: 50%;">
<div id="main" align="middle">
<img src="page1.jpg" alt="" id="mainImg" height="90%">
</div>
<div id="imglist">
<a href="javascript:previousImage('mainImg')"><img src="previous.png" alt=""
align="left"></a>
<input id="myid" name="myid" size="3" type="text"></input>
<img src="next.png" alt="" align="right">
<script>
var imgArray = new Array();
var imgs = [];
for (var i = 0; i < 200; i++) {
imgs[i] = new Image();
imgs[i].src = "page" + (i + 1) + ".jpg";
}
function nextImage(element)
{
var img = document.getElementById(element);
for(var i = 0; i < imgArray.length;i++)
{
if(imgArray[i].src == img.src) // << check this
{
if(i === imgArray.length){
document.getElementById(element).src = imgArray[0].src;
break;
}
document.getElementById(element).src = imgArray[i+1].src;
break;
}
}
}
function previousImage(element)
{
var img = document.getElementById(element);
for(var i = 0; i < imgArray.length;i++)
{
if(imgArray[i].src == img.src)
{
if(i === 0){
document.getElementById(element).src = imgArray[imgArray.length-1].src;
break;
}
else{
document.getElementById(element).src = imgArray[i-1].src;
break;
}
}
}
}
window.onload = function() {
var elm = document.getElementById("myid"),
var img = document.getElementById("mainImg");
elm.onkeyup = function(event) {
if (this.value) {
var num = parseInt(this.value, 10);
if (num >= 1 && num <= 200 {
img.src = "page" + num + ".jpg";
}
}
}
}
</script>
</div>
</div>
</center>
</form>
</body>
</html>
Perhaps you mean for this:
if (this.value.length === 1,2,3) {
to be this:
if (this.value.length <= 3) {
In addition, I think you want to be converting the whole input value to a number, not using the individual keycodes.
I might suggest this different/simpler way of doing this that is much more DRY (don't repeat yourself):
// preload images
var imgs = [];
for (var i = 0; i < 200; i++) {
imgs[i] = new Image();
imgs[i].src = "page" + (i + 1) + ".jpg";
}
window.onload = function() {
var elm = document.getElementById("myid");
var img = document.getElementById("mainImg");
elm.onkeyup = function(event) {
if (this.value) {
var num = parseInt(this.value, 10);
if (num >= 1 && num <= 200) {
img.src = "page" + num + ".jpg";
}
}
}
}
Working Demo: http://jsfiddle.net/jfriend00/4dqbP/
Summary of changes:
Preload images in a loop rather than copied code
Construct image names dynamically
Make img variable to a local variable rather than an implicit global with var in front of it
Check to see if the input field is empty
Use parseInt() to parse the value of the input field into a number
Range check the parsed number
If in valid range, then construct the image name using that number
I want to get the id of the image the mouse hovers. But I do not understand how to get the ID. Can some one help me :). TY!
function placeImage(x){
var div = document.getElementById("thumbnails");
div.innerHTML = ""; // clear images
for (var i =0; i <= x; i++) {
var image=document.createElement("img");
image.className += " Atributes";
image.src="images/foto_klein_"+i+".jpg";
image.width="135";
image.height="90";
image.alt="foto_klein_"+i;
image.id="image"+i;
image.position="relative";
div.appendChild(image);
image.style.marginRight = '10px';
_img.push(image);
}
};
With the placeImage function i place the images. Now I want to add an mouse event and change the class of the image who is targeted.
<div id="thumbnails" onmouseover="mouseOver(this);" ></div>
I added a mouse over to all the thumbnails. But I cannot get the id of the image of which the mouse hovers. I want to call the id or change the image.className of that particlair image. But I do not know how to call it. Now it only alerts "thumbnial"
function mouseOver(e){
alert(e.id);
}
Use this keyword:
<div id="thumbnails" onmouseover="mouseOver(this);" ></div>
function mouseOver(e){
alert(e.id);
}
Edit from the comments:
var image=document.createElement("img");
image.className += " Atributes";
image.src="images/foto_klein_"+i+".jpg";
image.width="135";
image.height="90";
image.alt="foto_klein_"+i;
image.id="image"+i;
image.mouseover = mouseOver;
image.position="relative";
div.appendChild(image);
image.style.marginRight = '10px';
_img.push(image);
}
Note the mouseOver function being called when the image is hovered. this will refer to the image element and not the div.
To get the id of an image when you hover over it, try this:
function placeImage(x){
var div = document.getElementById("thumbnails");
div.innerHTML = ""; // clear images
for (var i =0; i <= x; i++) {
var image=document.createElement("img");
image.className += " Atributes";
image.src="images/foto_klein_"+i+".jpg";
image.width="135";
image.height="90";
image.alt="foto_klein_"+i;
image.id="image"+i;
image.position="relative";
image.onmouseover = mouseOver; // <-- Added this
div.appendChild(image);
image.style.marginRight = '10px';
_img.push(image);
}
}
function mouseOver(e) {
alert(this.id);
}
Hope this helps, though I'm not sure about it working on a dynamically added image.
document.ready = function () {
var thumbnails = document.getElementById("thumbnails");
var imgs = thumbnails.getElementsByTagName("img");
for( var i=0; i<imgs.length; i++ ) {
imgs[i].onmouseover = function() {
alert( this.id );
}
}
};