I'm new to JavaScript.
I've already used Java and C# (and a bit of c++)
So far..
I'm using JavaScript to load pictures from a directory into an Array. After this I want to place this pictures on my page.
This works already.
The next step was to add a fullscreen function, to load the picture in fullscreen resolution.
var myfiles;
var pfad = "./bilder/" //directory of the images
var index = 0;
myfiles = new Array(); //String array with the names of the pictures
myfiles[0] = "01.png";
myfiles[1] = "01.png"; //usw.
myfiles[2] = "03.png";
myfiles[3] = "02.png";
function fullScreen(bild) {
document.write('<img src="'+ pfad + bild + '" border="0" width="100%">');
alert (bild);
}
function start() {
for(var i=0; i < myfiles.length; i++) {
pics[i].src = pfad + myfiles[i];
string = myfiles[i];
document.write('<img onclick="fullScreen(string);" src="'+ pfad + myfiles[i] + '" border="0" height="150px" >');
}
}
This code only loads the last picture of my array..
The function fullScreen() seems to take only the last value of string.
The HTML part
<script type="text/javascript">
start();
</script>
It is only evaluating string when it is clicked, when the loop has already finished.
You'll need to pass it directly:
for(var i=0; i < myfiles.length; i++) {
pics[i].src = pfad + myfiles[i];
string = myfiles[i];
document.write('<img onclick="fullScreen(\''+string+'\');" src="'+ pfad + myfiles[i] + '" border="0" height="150px" >');
}
SOLUTION
JS
var myfiles = [];
var pfad = "http://placehold.it/350x250/&text=";
var index = 0;
myfiles[0] = "Image 0";
myfiles[1] = "Image 1";
myfiles[2] = "Image 2";
myfiles[3] = "Image 3";
function fullscreen(){
if(this.className == 'fullscreen') this.className = '';
else this.className = 'fullscreen';
}
function createImage(src){
var img = document.createElement('img');
img.src = pfad + src;
img.addEventListener('click', fullscreen);
document.body.appendChild(img);
return img;
}
function start(){
for(var i=0; i < myfiles.length; i++) {
var img = createImage(myfiles[i]);
}
}
start();
CSS
html, body, .fullscreen {
height: 100%;
}
Related
<script>
var twitchApi = "https://api.twitch.tv/kraken/streams";
$.getJSON(twitchApi, function (json) {
for (var i = 0; i < 9; i++) {
var streamGame = json.streams[i].game;
var streamThumb = json.streams[i].preview.medium;
var streamVideo = json.streams[i].channel.name;
<!-- var streamViewers = json.streams[i].streamViewers; -->
$('#twitch').append('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"></img>');
}
});
</script>
So I've got this code. And I want to make it that onClick on an image or button it fetches 9 more stream previews. How can I do that? Could someone fix the code for me?
Also, how can I edit the Thumbnails which are getting fetched from the JSON?
You can get the data and persist in a variable, then display on demand.
$(function() {
//varianles
var i=0;
var twitchApi = "https://api.twitch.tv/kraken/streams";
var twitchData;
//Get data from API and store it in variable
$.getJSON(twitchApi, function(json) {
twitchData = json.streams;
//Set upon page load
setData()
});
function setData(){
var j = twitchData.length > (i + 9) ? (i + 9) : twitchData.length;
for (; i < j; i++) {
var streamGame = twitchData[i].game;
var streamThumb = twitchData[i].preview.medium;
var streamVideo = twitchData[i].channel.name;
<!-- var streamViewers = twitchData[i].streamViewers; -->
$('#twitch').append('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"></img>');
}
}
//Bind click handlers
$('#button').click(function() {
setData();
});
});
So I got multiple divs with different images embedded. Each one has its unique name attributes. I'm trying to apply the hover effect to each divs by changing the image source. I don't want to write multiple scripts, rather I'm trying to write a just one block of script that would effect every div.
<div id="div1" >
<img id="img1" name="img1" src="img1_up.jpg" />
</div>
<div id="div2">
<img id="img2" name="img2" src="img2_up.jpg" />
</div>...and so on
Now here is the script that I currently have for the rollover effects
<script>
var var1 = document.getElementById("div1");
var1.addEventListener("mouseover", changeImage1);
var1.addEventListener("mouseout", restoreImage1);
function changeImage1() {
document.getElementById("img1").src = "img1_ro.jpg";
}
function restoreImage1() {
document.getElementById("img1").src = "img1_up.jpg";
}
var var2 = document.getElementById("div2");
var2.addEventListener("mouseover", changeImage2);
var2.addEventListener("mouseout", restoreImage2);
function changeImage2() {
document.getElementById("img2").src = "img2_ro.jpg";
}
function restoreImage2() {
document.getElementById("img2").src = "img2_up.jpg";
}...and so on
</script>
I would like to use the name attributes from each images to create dynamic code to apply to all images. Here is what I have in mind but not sure the exact way to write it. PLEASE HELP
...
var dynamicVar = ????
dynamicVar.addEventListener("mouseover", changeImage();
dynamicVar.addEventListener("mouseout", restoreImage();
function changeImage() {
document.getElementById(dynamicVar).src = dynamicVar + "_ro.jpg";
}
function restoreImage() {
document.getElementById(dynamicVar).src = dynamicVar + "_up.jpg";
}
You can use loop to add event, don't need to specify id for each div:
var inputs = document.getElementsByTagName("div");
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].id.indexOf('div') >= 0) {
inputs[i].addEventListener("mouseover", changeImage);
inputs[i].addEventListener("mouseout", restoreImage);
}
}
function changeImage(){
var tmpStr = this.id;
var divIndex = tmpStr.substring(3, tmpStr.length);
document.getElementById("img" + divIndex).src = divIndex + "_ro.jpg";
}
function restoreImage(){
var tmpStr = this.id;
var divIndex = tmpStr.substring(3, tmpStr.length);
document.getElementById("img" + divIndex).src = divIndex + "_up.jpg";
}
See on fiddle: Link
try this
var parent = document.getElementById("parent");
var childs = parent.getElementsByTagName('div');
for (var i = 0; i < childs.length; i++) {
(function () {
var e = childs[i];
e.addEventListener("mouseover", function () {
changeImage(e);
});
e.addEventListener("mouseout", function () {
restoreImage(e);
});
}());
}
function changeImage(element) {
var imgs = element.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
alert(imgs[i].id);
}
}
function restoreImage(element) {
var imgs = element.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
imgs[i].src = img_ro;
}
}
you can check this fiddle
I am using freewall.js from http://vnjs.net/www/project/freewall/
The images would be dynamic. So html will have:
<div class="brick">
<img src="" width="100%">
</div>
JS
$(".free-wall .brick img").each(function(index, item) {
item.src = "images/" + (++index) + ".jpg";
});
The thing I want to do is to prepend a few more images to the freewall.
var temp = '<div class="brick"><img src="" width="100%"></div>';
$(".add-more").click(function() {
for (var i = 0; i < 4; ++i) {
wall.prepend(temp);
}
wall.fitWidth();
});
When the add-more button is clicked, 4 images will be prepended. the problem is how to append the image path in same way?
help appreciated!
Try
var temp = '<div class="brick"><img src="" width="100%"></div>';
$(".add-more").click(function () {
var start = $(".free-wall .brick img").length + 1;
for (var i = 0; i < 4; ++i) {
$(temp).prependTo(wall).find('img').attr('src', "images/" + (start + i) + ".jpg")
//or wall.prepend('<div class="brick"><img src="images/' + (start + i) + '.jpg" width="100%"></div>');
}
wall.fitWidth();
});
Update:
$(".add-more").click(function () {
var start = $("#freewall .brick img").length + 1,
$imgs = $(),
$img, loadcounter = 0;
for (var i = 0; i < 4; ++i) {
$img = $(temp).appendTo('.free-wall').find('img').attr('src', 'http://placehold.it/64&text=' + (start + i) + '.jpg').hide();
$imgs = $imgs.add($img);
}
$imgs.on('load error', function () {
loadcounter++;
if (loadcounter == 4) {
$imgs.show();
wall.fitWidth();
}
}).filter(function(){
return this.complete
}).trigger('load')
});
Demo: Fiddle
Try this,
$(".add-more").click(function() {
for (var i = 0; i < 4; ++i) {
src="images/"+(i+1)+".jpg";
wall.prepend('<div class="brick"><img src="'+src+'" width="100%"></div>');
}
wall.fitWidth();
});
I have added here 2 functions moveoutid() for creating img tag on click of button and it addes image src to img tag to show image on webpage. and moveinid() for removing selected image from img tag.
function moveoutid() {
var sda = document.getElementById('availableFruits');
var len = sda.length;
var sda1 = document.getElementById('orderFruits');
for (var j = 0; j < len; j++) {
if (sda[j].selected) {
alert(baseUrl + "/img/" + sda.options[j].value + ".jpg");
var img1 = document.createElement('img').src = baseUrl + "/img /" + sda.options[j].value + ".jpg";
var di = document.getElementById('d');
di.appendChild(img1);
var tmp = sda.options[j].text;
var tmp1 = sda.options[j].value;
sda.remove(j);
j--;
var y = document.createElement('option');
y.text = tmp1;
try {
sda1.add(y, null);
} catch (ex) {
sda1.add(y);
}
}
}
}
function moveinid() {
var sda = document.getElementById('availableFruits');
var sda1 = document.getElementById('orderFruits');
var len = sda1.length;
for (var j = 0; j < len; j++) {
if (sda1[j].selected) {
di = document.getElementById('d');
img1.src = baseUrl + "/img/" + sda1.options[j].value + ".jpg";
//img.className="";
di.removeChild(img1);
var tmp = sda1.options[j].text;
var tmp1 = sda1.options[j].value;
sda1.remove(j);
j--;
var y = document.createElement('option');
y.text = tmp;
try {
sda.add(y, null);
} catch (ex) {
sda.add(y);
}
}
}
}
I want to remove selected img tag from div (means which ever image selected by user in dropdown list that image should be remove.)
Instead of removing the tag it sounds like you just need to show and hide that image.
document.getElementById('Image').style.visibility='visible';
If I understood correctly. Or you could even destroy the element removing it from the DOM.
I have a forum site installed where I added a auto-resize mod which resizes all the images when the page is loaded
<script>
window.onload = resizeimg;
function resizeimg()
{
if (document.getElementsByTagName)
{
for (i=0; i<document.getElementsByTagName('img').length; i++)
{
var check = 0;
var str = 'http://sariylakirmizi.net/forum/styles/milky_way_red/imageset/sitelogo_small.png';
im = document.getElementsByTagName('img')[i];
var n =str.match(/sitelogo/gi);
if(n == null)
check = 1;
if (im.width > 600 && im.src !=str )
{
im.style.width = '600px';
eval("pop" + String(i) + " = new Function(\"pop = window.open('" + im.src + "','phpbbegypt','fullscale','width=400,height=400,scrollbars=1,resizable=1'); pop.focus();\")");
eval("im.onclick = pop" + String(i) + ";");
if (document.all) im.style.cursor = 'hand';
if (!document.all) im.style.cursor = 'pointer';
im.title=im.src;
im.alt=check;
}
}
}
}
</script>
Now what I am trying to is exclude my header logo, so that it would not be resized for that I introduced the string comparison and hardcoded my logo URL, I do not understand why that check fails and my logo still got resized; I also tried several other things like introducing a check variable whether the match function is working but obviously it does noet work, could you please help me with that?
window.onload = resizeimg;
function resizeimg() {
if (document.getElementsByTagName) {
var imgs = document.getElementsByTagName('img');
for (i=0; i<imgs.length; i++) {
var im = imgs[i];
if (im.width > 600 && !im.src.match(/sitelogo/)) {
im.style.width = '600px';
eval("pop" + String(i) + " = new Function(\"pop = window.open('" + im.src + "','phpbbegypt','fullscale','width=400,height=400,scrollbars=1,resizable=1'); pop.focus();\")");
eval("im.onclick = pop" + String(i) + ";");
im.style.cursor = (document.all) ? 'hand' : 'pointer';
im.title = im.src;
}
}
}
}