I'm making a practice webpage with a list of guitars. What I want to do is when a thumbnail for the guitar Fender Telecaster is clicked, a for-loop runs through all the images with a class name of "gallery", takes that information and places it on various different parts of the DOM. Important things to know:
-- The thumbnails of these guitars all have class names of "gallery," and I have five guitars in this order: Fender Stratocaster, Fender Telecaster, Gibson Les Paul, Gibson SG, Gretsch Electromatic.
-- Each has a title which corresponds to the name of the guitar AND the file name of the various images related to the guitar (for example, the title "gibson-les-paul" and the image files are "gibson-les-paul.jpg" and "gibson-les-paul-big.jpg")
-- Each image thumbnail has four data attributes which JavaScript takes and places on the DOM.
THE PROBLEM: The for-loop works fine EXCEPT when I click any of the thumbnails the last image with a class of "gallery" (Gretsch Electromatic) and all of its information appears in the DOM. So if I click on any of the five, it takes information from the last element in the loop.
The first bit of code I have included just so the rest makes sense. It's the second bit of code I have trouble with:
function replaceNodeText(id, newText) {
var node = document.getElementById(id);
while (node.firstChild)
node.removeChild(node.firstChild);
node.appendChild(document.createTextNode(newText));
}
var gallery = "gallery";
var images = "images/";
var big = "-big.jpg";
// Above is all fine and good, it's below where the issue is:
function bigChange() {
var runThrough = document.getElementsByClassName(gallery);
for (var i = 0; i < runThrough.length; i++) {
var dataKey1 = runThrough[i].getAttribute("data-key1");
var dataKey2 = runThrough[i].getAttribute("data-key2");
var dataKey3 = runThrough[i].getAttribute("data-key3");
var dataKey4 = runThrough[i].getAttribute("data-key4");
var title = runThrough[i].getAttribute("title");
document.getElementById("popUpPic").src = images + title + big;
if (title != "fender-telecaster") {
document.getElementById("photo_large").src = images + title + ".jpg";
}
else {
document.getElementById("photo_large").src = images + title + ".png";
}
replaceNodeText("guitarTitle", dataKey1);
replaceNodeText("guitarBrand", dataKey2);
replaceNodeText("caption1", dataKey3);
replaceNodeText("guitarPrice", dataKey4);
}
}
Thanks in advance!
:-)
Try using break in your if/else statement so that it doesn't loop through all of the pictures
Related
I'm a absolute beginner to HTML CSS and javascript. I have almost finished the website I'm building but stuck at one javascript thing... On different pages I have made image arrays with Javascript, no problems there. Only the text info next to the image has to change with the same button click.... I have tried several things but I need some help. I hope someone will help me.
HTML
<div><img style="width:573px" src="images/omejan.jpg" class="omejan-images"></div>
<div><p class="titel">ome<br>Jan</p>
<p class="platte-tekst">Een dressoir, bloemenvaas, lamp, kalender, telefoon en een lijstje. Elke week verse bloemen voor hun broer.</p>
<p class="voetnoot">Onderdeel van het project de tantes</p>
<p id="imageinfo" class="foto-info">2007</p><!--only this text line has to change-->
</div>
<div></div>
<div></div>
<div></div>
<div>
<div><button class="pijl-links" onclick="prev()"><img src="images/pijl_links.svg"></button></div>
<div><button class="pijl-rechts" onclick="next()"><img src="images/pijl_rechts.svg"></button></div>
</div>
<div></div>
<div></div>
Javascript
var slider_img = document.querySelector('.omejan-images');
var images = ['omejan_2007.jpg', 'omejan_2009.jpg', 'omejan_2010.jpg', 'omejan_2011.jpg', 'omejan_2013.jpg', 'omejan_2014.jpg'];
var i = 0;
//var imageinfo = ['2007', '2009', '2010', '2011', '2013', '2014'];
//document.getElementById("imageinfo").innerHTML= imageinfo[0];
//I have tried the two lines above, won't work.
function prev(){
if(i <= 0) i = images.length;
i--;
return setImg();
}
function next(){
if(i >= images.length-1) i = -1;
i++;
return setImg();
}
function setImg(){
return slider_img.setAttribute('src', "images/"+images[i]);
}
////next option I have tried
function shuffle(){
var images1 = [], descriptions = [],
index1 = 0;
images1[0] = "images/omejan_2007.jpg";
images1[1] = "images/omejan_2009.jpg";
images1[2] = "images/omejan_2010.jpg";
images1[3] = "images/omejan_2011.jpg";
images1[4] = "images/omejan_2013.jpg";
images1[5] = "images/omejan_2014.jpg";
descriptions[0] = "2007";
descriptions[1] = "2009";
descriptions[2] = "2010";
descriptions[3] = "2011";
descriptions[4] = "2013";
descriptions[5] = "2014";
index1 = Math.floor(Math.random() * images1.length);
document.getElementById("omejan-images").src = images1[index1];
document.getElementsByClassName("foto-info")[0].innerText = descriptions[index1];
}
///With the code above I was glad to have some movement on the page, only it is shuffle... I want the Images and text in order. Couldn't solve it
// myself...
You could make use of objects here in order to keep your image information together - e.g.
const images = [{
src: 'omejan_2007.jpg',
description: '2007'
}, {
src: 'images/omejan_2009.jpg',
description: '2009'
},
{
//...etc
}];
As we're still using an array (just an array of objects instead of strings), your next() and prev() functions still work to set the index. So, we'd just need to make a slight change to setImg:
function setImg(){
const image = images[i];
const description = document.getElementById("imageinfo"); //this could also be declared at the top with your other variables
description.innerHTML = image.description;
slider_img.src = image.src;
}
As an aside, there are a few other "code review"-y things I've noticed.
Typically, you should try to avoid onclick="function" attributes. The more preferred way of doing this is to use event handlers, e.g.
<!-- adding ids to the buttons -->
<div><button class="pijl-links" id="prev"><img src="images/pijl_links.svg"></button></div>
<div><button class="pijl-rechts" id="next"><img src="images/pijl_rechts.svg"></button></div>
<script>
document.getElementById("prev").addEventListener("click", prev);
document.getElementById("next").addEventListener("click", next);
</script>
i isn't the most descriptive variable name - this should probably be renamed to something like current_image
var is no longer recommended for variable declarations - instead you should look to use const (for constant variables) or let.
You are returning from setImg, next and prev, but not doing anything with the return value. You probably don't need to do this? If it's to do with the page refreshing and/or jumping, you can add the type attribute to the button to stop it from being treated as a submit
<button type="button" class="pijl-links" id="prev"><img src="images/pijl_links.svg"></button>
Basically I want to create next and previous buttons for a JQuery Image Gallery I'm working on. Each button has an id of "next" and "prev" respectively. What I'm trying to do is change a number that is in the source of the main image in the gallery (which has an id of mainImg). I have been able to target the number within the source of each image but I can't seem to increment it correctly and then replace the current image's source number with the new, incremented number. I tried using a while loop, for loop, and if statement but none of them worked correctly. To see the gallery that I have so far, I have it uploaded here: http://tiger.towson.edu/~abarso2/463/projecta/index.html If you go into my script.js file you'll see a block commented out at the bottom. That is the function I have so far that targets the number within the image's source and parses it to an integer. Thanks in advance for any help.
Here's what I have currently:
(function(){
var mainImg = $('#mainImg').attr('src');
var mainImgStr = mainImg.charAt(mainImg.length - 5);
var mainImgNum = parseInt(mainImgStr);
$('#next').click(function(){
});
}());
This should solve your problem
$(function(){
var mainImg = $('#mainImg');
var slidshow = $('#slideShow');
$('#next').click(function(){
var src = mainImg.attr('src').replace('thumb','shot');
var next = $('img[src="' + src +'"]', slidshow).next();
if(next.length){
mainImg.attr('src',next.attr('src').replace('thumb','shot'));
}
});
$('#prev').click(function(){
var src = mainImg.attr('src').replace('thumb','shot');
var prev = $('img[src="' + src +'"]', slidshow).prev();
if(prev.length){
mainImg.attr('src',prev.attr('src').replace('thumb','shot'));
}
});
});
Here is the revised code. The regexp will work better. The user can click the next button multiple times but no image will be skipped as the main image will only go to the next if and when the next image is loaded. So if you click next quickly 5 times only the next image will show (not skipping 4 images).
(function(){
// replace all non digit characters from src
// only the last set of numbers so www.123.com/image7.jpg
// will give us 7
function getNumber(src){
return parseInt(src.replace(/[\d]+(?=[\/])/g,"")
.replace(/[^\d]/g,""),10);
}
// replaces last number of a source with the number provided
// www.123.com/imgage7.jpg will be www.123.com/image8.jpg
// if number 8 is given
function setNumber(src,num){
return src.replace(/[\d]+(?![\d])/g,num);
}
var $mainImg = $('#mainImg');
$('#next').click(function(){
var src= $mainImg.attr('src'),
mainImgNum = getNumber(src);
var $img=$(document.createElement("img"));
$img.data("checkNext",false);
$img.on("load",function(){
// image exsist, load it as main image src
if($img.data("checkNext")===true){
$img.remove();
}else{
$mainImg.attr('src',$img.attr('src'));
$("#prev").show(1000);
$img.data("checkNext",true);
$img.attr('src',setNumber($img.attr('src'),
new String(mainImgNum+2));
});
$img.on("error",function(){
if($img.data("checkNext")===true){
$("#next").hide(1000);
}
// clean up
$img.remove();
});
$img.attr('src',setNumber(src,new String(mainImgNum+1)));
});
}());
I am trying to work out a way to change the text that goes along with an image that is changed with javascript...
var x = 0;
var images = new Array(".jpg", ".jpg", ".jpg", ".jpg", ".jpg");
var i = setInterval(auto, 10000);
function auto() {
x++;
if (x == images.length) x = 0;
document.getElementById('bigImage').src = images[x];
}
function changeImage(img, imagetitle) {
document.getElementById('bigImage').src = img;
/* document.getElementById('mainimagetitle').innerHtml = imagetitle; */
}
The commented part is how i suppose I could possibly change the text that goes with the image. How do i code the html. Should i use a with the id mainimagetitle?
If so, where and how do i add the different texts i want to show and hide?
As I see from your posting, this should do the job.
<img id="bigImage" src="img1.jpg" alt="" />
<div id="mainimagetitle"></div>
Be sure to add a (filled) src tag or you will get strange results in IE. As you start with the second image (x++ before the change) this will be no problem. Happy accident I think. ;-)
// Edit: Of course any element will do as long as you use the right id. But you didn't tell us what html you use (xhtml/html5/...).
You could potentially have another array that stores the captions for each of the images
var captions = ['Caption 1', 'Caption 2', ...];
Assuming the mainimagetitle is an id of a <p> element, you could do:
function changeImage(img, imagetitle) {
document.getElementById('bigImage').src = img;
document.getElementById('mainimagetitle').innerText = imagetitle;
}
You can see the full example, based on your code here.
So basically what I am looking for is how to have a random image javascript code but the images are in two different divs but I would like the random images to come from the same array.
I plan to take a JS class this summer so I don't have to ask anymore because I feel like this should be simple...
Currently I am just using the code from javascript kit in two different locations:
<script language="JavaScript">
<!--
/*
Random Image Script- By JavaScript Kit (http://www.javascriptkit.com)
Over 400+ free JavaScripts here!
Keep this notice intact please
*/
function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="image1.gif"
myimages[2]="image2.gif"
myimages[3]="image3.gif"
myimages[4]="image4.gif"
myimages[5]="image5.gif"
myimages[6]="image6.gif"
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)ry=1
document.write('<img src="'+myimages[ry]+'" border=0>')
}
random_imglink()
//-->
</script>
but what I hope to achieve is:
<script language="JavaScript">
<!--
/*
Random Image Script- By JavaScript Kit (http://www.javascriptkit.com)
Over 400+ free JavaScripts here!
Keep this notice intact please
*/
function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="image1.gif"
myimages2[1]="image1a.gif"
myimages[2]="image2.gif"
myimages2[2]="image2a.gif"
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0) ry=1
document.write('<img src="'+myimages[ry]+'" border=0>')
}
random_imglink()
//-->
</script>
RENDERED CODE WITHIN DIVS
<div class="one"><img src="img1.gif"></div>
<div class="two"><img src="img1a.gif"></div>
REFRESHED
<div class="one"><img src="img2.gif"></div>
<div class="two"><img src="img2a.gif"></div>
Here's one particular approach.
I start out by identifying all of the variables I plan on using:
var rIndex1, rIndex2,
oContainer1, oContainer2,
aImages;
Now I assign initial references to DOM containers, as well as populate my images array:
oContainer1 = document.getElementById("left");
oContainer2 = document.getElementById("right");
aImages = ['http://placekitten.com/200/200','http://placekitten.com/201/201',
'http://placekitten.com/202/202','http://placekitten.com/203/203',
'http://placekitten.com/204/204','http://placekitten.com/205/205'];
Because I'll be generating random index values a few times, I create a simple function for this logic:
function rIndex ( iMax ) {
return Math.floor( Math.random() * iMax );
}
In order to see the effect over and over, I'm running the logic within an anonymous function, stored within an interval that runs every second. You, of course, could just wrap it up in a named function to be called once.
setInterval(function(){
Setting initial random values for my index variables.
rIndex1 = rIndex( aImages.length );
rIndex2 = rIndex( aImages.length );
We don't want both images to be the same, so as long as we have selected identical values, let's choose another index value for the second index.
while ( rIndex2 == rIndex1 ) rIndex2 = rIndex( aImages.length );
Lastly, I overwrite the innerHTML property of the containers with new image elements.
oContainer1.innerHTML = '<img src="%s" />'.replace( /%s/, aImages[ rIndex1 ] );
oContainer2.innerHTML = '<img src="%s" />'.replace( /%s/, aImages[ rIndex2 ] );
}, 1000);
Demo: http://jsbin.com/ubuxoj/edit#javascript,html
This could be improved upon a bit. For instance, it's possible that while aImages[2] is currently being shown in oContainer2, it may be reapplied the next time around. You could check to make sure you only select an image other than that which is currently being displayed in your container.
For what you are wanting to do, I don't see the point to store them on arrays and do complex stuff to get them.
If the URL paths are the same, there is no need to chose them from an array:
function refreshImages() {
var max = 10;
var rand = (Math.floor(Math.random() * max) + 1); //1-10
var src1 = "http://example.com/image" + rand + ".gif";
var src2 = "http://example.com/image" + rand + "a.gif";
document.getElementById("div1").innerHTML = "<img src='" + src1 + "' />";
document.getElementById("div2").innerHTML = "<img src='" + src2 + "' />";
}
window.onload = function() {//need to wait until the divs are loaded
refreshImages();
}
and in your HTML:
<div id="div1"></div>
<div id="div2"></div>
Note: I added +1 to rand because in your example you started at image1, if you want the possibility to start at image0, just remove the +1 and the range of possibilities will change to 0-9
jsFiddle demo (because the images don't exist, you need to see the source code)
If your purpose is to be extensible (e.g., if you don't know how many images you will have), I would normally recommend appending to the DOM and creating the <div/> randomly as well, and also looping to create the divs so you don't need to create them manually. However, if this is not the case, by using the pattern you have used, you could do something like this:
<script>
var random = Math.random();
function random_imglink(arr){
var ry = Math.floor(random*arr.length);
document.write(
'<img src="'+arr[ry]+'" border=0>'
);
}
var myimages = [
"image1.gif", "image2.gif"
],
myimagesA = [
"image1a.gif", "image2a.gif"
];
</script>
<div class="one"><script>random_imglink(myimages);</script></div>
<div class="two"><script>random_imglink(myimagesA);</script></div>
We first make a random number which we reuse throughout the life of the script on this page load. Then we define the writing function and then make our 2 arrays available so they can be referenced by the function calls within the divs. It's hard to know exactly what you want without more detail, but hopefully this will give some ideas.
Please can anyone see what is wrong in this code,
I have 2 class images with .man and .girl which contains 10 images in each.
next I have 2 div's #manCount and #girlCount which display total images number (10 in each)
when I move one image to #drop, It decrease 1 number from #manCount. So ther are total 10 images with class name .man, When the last image is moved to #drop I get a pop up that all images are processed.
now I also wants to process .girl class images but when i have both classess initialize it only work with .girl class.
function Dragger(c){
this.classname = c;
}
Dragger.prototype.Init = function(){
var classM = this.classname;
var manCount = parseInt($("#"+classM+"Count").text());
$("."+classM).draggable();
$("#drop").droppable({
drop: function() {
if(manCount <= 0){
alert("There are no more pictures left. " + classM );
return false;
}
manCount -= 1;
$("#"+classM+"Count").text(manCount);
}
});
};
var man = new Dragger("man");
man.Init();
above code runs just fine but when I initilize a new object
var man = new Dragger("man");
man.Init();
var girl = new Dragger("girl");
girl.Init();
It always pick girl object, any help where I am doing wrong?
It always return me female object on drag.
A screenshot of display: http://screensnapr.com/v/SrsyGz.png
Here is problem: http://screensnapr.com/v/hxrZYa.png
Thanks
Edit:
Ok i have fixed this issue by adding mouseover event, i am not sure how perfect it is thogh as i am pretty new to it but it works as expected
$(".man").mouseover(function(){
var man = new Dragger("man");
man.Init();
});
$(".girl").mouseover(function(){
var girl = new Dragger("girl");
girl.Init();
});
Maybe it’s because you are calling $('#drop').droppable() in the Init function, so it gets initiated more than once on the same element (#drop).