Image gallery issue jquery - javascript

While I'm creating image gallery dynamically it isn't working. Here I'm adding all the images from a directory to a table dynamically. Its not completed now.
Here, I want to create image gallery dynamically and I'm new to jquery. see the partial code below.
sorry. The issue is image gallery is not working. while i clicking on a image it is going to displayed in another page.
in html,
<table id="tbl1">
</table>
in js,
<script type="text/javascript">
$(document).ready(function() {
var bss = $('a[rel=blogslideshow]').bsShow({
effect: 'Ladder',
direction: 'horizontal'
});
var arr1 = ["sample_fussen.jpg", "sample_zakopane.jpg", "sample_wurzburg.jpg", "sample_keukenhof.jpg"];
var cnt = 0;
var festname = "slides";
alert(arr1.length);
var rows = arr1.length / 5; //here's your number of rows and columns
var cols = 5;
for (var r = 0; r < rows; r++) {
var tr = $('<tr>');
for (var c = 0; c < cols; c++) {
if (cnt == arr1.length)
break;
var path = festname + '/' + arr1[cnt];
$("<td><img src="
"+path+"
" width="
100 " height="
100 " alt="
"/><h3><label><input type="
radio " name="
radio1 " value="
">Select Image</label></h3></td>").appendTo(tr);
cnt++;
}
$('#tbl1').last().after(tr);
}
table.appendTo('body');
})
</script>
I'm using reference link.
https://code.google.com/p/blogslideshow/downloads/list

First, you are trying to initialize the anchor tag which you are not adding in table. Second, you are initializing your plugin before appending to body which never works because it is not present in DOM.
So try to add anchor tag in td and wrap your image to anchor tag like,
$("<td><a rel='blogslideshow' title='Your title' href='"+path+"'><img src='"+path+"' width='100'"+
"height='100' alt=''/></a>"+
"<h3><label><input type='radio'"+
"name='radio1' value=''>Select Image</label>"+
"</h3></td>").appendTo(tr);
after appending the data you need to re-initialize your plugin
var bss = $('a[rel=blogslideshow]').bsShow({
effect: 'Ladder',
direction: 'horizontal'
});
Live Demo

Related

Displaying images with given URL in a json string on a html page

I am working on a project where I call a certain API and in response I get back a json string with all the information. I need to find a way using javascript to display this json string into a table format. I got a very basic version of this running. However, the problem I am having is that I cannot find a way to display a image in this block of code.
results.html file:
<!DOCTYPE HTML>
<html>
<head>
<title>
How to convert JSON data to a
html table using JavaScript ?
</title>
<h1>Results: </h1>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;" id = "body">
<h3>Showing resuls for: {{searchQuery}}</h3>
<p>{{responseText}}</p>
<br><br>
<table align = "center"
id="table" border="1">
</table>
<div id="header"></div>
<script>
var el_up = document.getElementById("GFG_UP");
var list = [];
list = "{{responseText|escapejs}}";
//console.log(list);
var titles = []
for (var i = 0; i < list.length-8; i++) {
if(list[i] == 't' && list[i+1] == 'i')
{
var title = '';
for(var j = (i+8); list[j] != ","; j++) {
title += list[j];
}
i = j;
console.log(title + ", ")
titles.push(title)
}
}
console.log(titles)
var images = []
for (var i = 0; i < list.length-8; i++) {
if(list[i] == 'h' && list[i+1] == 't')
{
var image = '';
for(var j = (i); list[j] != ","; j++) {
image += list[j];
}
i = j;
console.log(image + ", ");
var img = new Image();
img.src = image.slice(0, -1);
images.push(img);
}
}
console.log(images)
var restaurants = []
for (var i = 0; i < list.length-17; i++) {
if(list[i] == 'r' && list[i+1] == 'e' && list[i+2] == 's')
{
var restaurant = '';
for(var j = (i+17); list[j] != ","; j++) {
restaurant += list[j];
}
i = j;
console.log(restaurant + ", ")
restaurants.push(restaurant)
}
}
console.log(restaurants)
function createTable(tableData) {
var table = document.createElement('table');
var tableBody = document.createElement('tbody');
tableData.forEach(function(rowData) {
var row = document.createElement('tr');
console.log(typeof(cellData))
rowData.forEach(function(cellData) {
var cell = document.createElement('td');
cell.appendChild(document.createTextNode(cellData));
row.appendChild(cell);
});
tableBody.appendChild(row);
})
table.appendChild(tableBody);
document.body.appendChild(table);
};
var a = [titles, restaurants, images]
console.log(a)
createTable(a);
</script>
</body>
</html>
The function createTable is the one in question. It displays the text parts correctly. Im not sure how to get it to display images given the URLs of those images in a table.
output HTML file:
HTML output
You should show us the API response you are working with here.
Another thing is your createTable function expects to get table data. But onclick on your button pass there #table ID. Not sure if it should be like this.
Also you could run your JS script when all page is loaded:
window.onload = () => {
// Your JS script which should do something after page is loaded.
}
Finally it comes to the images. I think that you are not using img tag anywhere so your images simply won't be visible in the table. If you would like to see them just create img element and put it into td.
Few advices (not related with your question):
stop using console.log so much, place debugger statement in your code and debug it like a pro, if you don't know how just look for it in youtube,
please put your attention to a code style, it is a bit messy, if you have real trouble with it use ESlint to fix it for you.
EDIT
About images - if you want to create DOM element for img use code below instead of current one:
var img = document.createElement("IMG");
Than you can set src and other things like alt and so on:
img.src = imgUrlString;

looping throug divs and giving them id and then making them clickable

I am trying to make multiple div inside my loop display there own unique message when they are clicked.
But I can't get the code to work. what I am trying to do is...
div1 = hello im div1, div2 = hello im div2.
The divs display on the page as they should but I can't get the click message to work.
Thanks in advance for any help or advice :)
<script type="text/javascript">
var idcontainer = "";
var divs = "";
var clickcontent;
for (i = 1; i < 5; i++) {
divs += `<div class="divs" id="div${i}">Test${i}</div>`;
clickcontent += "Hello i am div" + i;
idcontainer += "#div" + i;
}
console.log(idcontainer);
$("#output").html(divs);
$(idcontainer).click(function(e) {
e.preventDefault();
alert(clickcontent);
});
</script>
You dont need id for that, just store content in data attr and show in click as below
var idcontainer = '';
var divs = '';
var clickcontent
for(i=1;i < 5;i++){
clickcontent = 'Hello i am div' + i;
divs += `<div class="divs" id="div${i}" data-content="`+clickcontent+`">Test${i}</div>`;
idcontainer += '#div' + i;
}
// console.log(divs)
$("#output").html(divs);
$('.divs').click(function (e) {
alert($(this).data('content'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="output"></div>
To select many divs you need to separate their ids by comma; now the idcontainer looks like this - #div1#div2..., so the jquery won't yield any element (check out this to find out why). If you were to store their ids in an array like:
var idcontainer = [];
var divs = '';
var clickcontent
for(i=1;i < 5;i++){
clickcontent = 'Hello i am div' + i;
divs += `<div class="divs" id="div${i}" data-content="`+clickcontent+`">Test${i}</div>`;
idcontainer.push('#div' + i);
}
And then use the jquery like this:
$(idcontainer.join(', ')).click(function (e) {
e.preventDefault();
alert(clickcontent)
});
This would work.
You can use the following code to generate divs dynamically and append to any tag you want, here I have appended to a body tag.
// Creating Divs and assign class by the name of "dynamicDiv"
for(i=1;i < 5;i++){
let div = document.createElement('div');
div.textContent = `I am div ${i}`;
div.className = 'dynamicDiv';
$("body").append(div);
}
// Attaching click event for each generated div by using class name
$('.dynamicDiv').on('click', function () {
alert($(this).text()); // Displaying the text of div
});

Insert/embed Button on image Javascript

I'm looking for a javascript snip which can insert button to all image in page(like google image) when hover the image.
I already build some code but I don't know why button no show up.
var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
imgs[i].addEventListener("mouseenter", function( event ) {
var btnGrab = document.getElementById('btn-images-toGrab');
var t = event.target.offsetTop;
var l = event.target.offsetLeft;
var w_center = event.target.offsetWidth / 2 + l;
btnGrab.style = 'top:'+ t +'px; left:'+ w_center +'px;';
btnGrab.style.display = 'inline-block'
});
}
Help me I don't know how to append or add button to img.
Thanks.
at the end of the for loop have you tried appending the button to the image?
imgs[i].appendChild(btnGrab)
if you change
btnGrab.style = 'top:'+ t +'px; left:'+ w_center +'px;';
to
btnGrab.style = 'position:absolute;top:'+ t +'px; left:'+ w_center +'px;';
and the button to the html
<button id="btn-images-toGrab" style="display:none;">Click me</button>
you should be fine

Add html code to a dynamically generated div

I have a js question that annoys me for the last couple of days.
i have a parallax template, where the parallax elements are generated automatically from js file.So i can add css style like transitions etc., but i would like to add some links on top of the divs, or some kind of on clik events.
What i think i have to look so far is in this fille (where the id of the divs are created):
enter //Parallax Element 2
var item = {};
item.name = "#tree21";
item.stackOrder = 1;
item.content = "image";
item.image = "images/parallax/bg2.png";
item.sizes = {w:"350",h:"350"};
item.screenPos = ["40%","-100%","300%","-115%"];
item.visibility = ["true","true","true","true"];
item.parallaxScene = true;
item.bPos = 200;
item.mouseSpeed = 15;
items.push(item);
and here (where i think the divs are generated
createScenes: function () {
//Resize Parallax Elements if responsive
if (responsive) {
var screenProp = this.maxWidth / 1920;
} else {
var screenProp = 1;
}
for (var i = 0; i < items.length; i++) {
if (jQuery(items[i].name).length == 0) {
jQuery("#parallax-container").append("<div id='" + items[i].name.substring(1, (items[i].name.length)) + "' class='parallaxItem'></div>");
}
Thank you!
Store a reference to your new div:
var div = jQuery("<div id='"
+ items[i].name.substring(1, (items[i].name.length))
+ "' class='parallaxItem'></div>")
.appendTo(jQuery("#parallax-container"));
jQuery(div).append('...');

Display images into dynamic table

I have a table which is generated based on user input to a form. That generates rows and cols. I want the nodes to be filled with an image. I am getting the table but nodes are filled with [object HTML image element]? I thiink this is trying to access the image but failing? Here is what I have tried. All help appreciated.
for (r = 0; r < howOften; r++) {
row = table.insertRow(-1);
for (c = 0; c < numDays; c++) {
col = row.insertCell(-1);
img=new Image();
img.src="../www/images/TEST.png";
col.appendChild(document.createTextNode(img));
};
};
You're just pasting the actual text of what the image object contains, which is definitely not what you want to do. Try something like the following.
img.onload = function() { //check to make sure that the image has loaded
col.appendChild(img);
};
If you want to use jQuery, this is one of the solutions
in html :
<div id="container"></div>
in js :
var table = $('<table></table>');
for (r = 0; r < howOften; r++) {
var row = $('<tr></tr>');
for (c = 0; c < numDays; c++) {
row.append('<td><img src="../www/images/TEST.png" /></td>');
};
table.append(row);
};
$('#container').append(table);

Categories