We Keep Coding

jquery switch images based on radio ID with pop up

Here is the radio selection:
<ul id="radio-attribute" class="radio-attribute">
<li class="radio-attribute">
<label for="1" class="radio-attribute">
<input type="radio" id="1" name="Choose color" value="36" onClick="change_image(this.id)">
<img src="images/Red.jpg" alt="Red SE1017" title=" Red SE1017 " width="25" height="25" />
</label>
</li>
<li class="radio-attribute">
<label for="2" class="radio-attribute">
<input type="radio" id="2" name="Choose color" value="157" onClick="change_image(this.id)">
<img src="images/Orange.jpg" alt="Orange" title=" Orange " width="25" height="25" />
</label>
</li>
</ul>
This works fine.
I am looking to swap the images displayed based on the radio selection. The radio selection will vary so I was planning to use the id for this.
The display container:
<div id="piGal" style="float: left;">
<a href="http://www.example.com/images/main.jpg">
<img src="images/main.jpg" alt=" Seals" title=" main image " width="250" height="106" />
</a>
</div>
This displays fine on initial load.
I am trying to use an array I build dynamically with php so the javascript looks like this:
function change_image(radioID) {
var images = ["main.jpg", "Red.jpg", "Orange.jpg"];
document.getElementById("piGal").innerHTML = "<img src='images/'+ images[radioID]>";
}
I can get this working using AJAX, but it will not allow me to have a pop up with it, rather will open in a new page. I have been trying to use this so I can use a modal. I am very new to javascript like this though.

First of all, if this form should be sent to php I strongly discourage you to use names with spaces. I once experienced some kind of problems with php and I still don’t know why.
Your problem might be in change_image():
function change_image(radioID) {
var images = ["main.jpg", "Red.jpg", "Orange.jpg"];
document.getElementById("piGal").innerHTML = "<img src=\"images/"+ images[radioID] +"\" />";
}
You haven’t generated the right HTML code for the img. You were making a mess with HTML attribute quotes and JavaScript string quotes. Try it now.
Now if
image[radioID] == "main.jpg"
JavaScript will generate
<img src="images/main.jpg" />
Which is correct HTML. Your code would generate the string as is, which is not correct HTML, and your browser fails silently.
**EDIT: ** to open the popup:
window.open("main.jpg", "imgWindow",
"location=no,width=600,height=600,scrollbars=yes,top=100,left=700,resizable=no");
The first argument is the URL of the file to open, the second argument is a unique name for the window (if you open another file with the same window name, the same window will be selected), the third argument is a list of parameters separated by commas (I guess the names are intuitive). You can put it in a function callable on the onClick event of the img tag your creating in change_image()

How to update an image/logo when user(s) reload the page?

I have a search input box, and on top of that I have an image/logo.
What is the most efficient way to change image/logo every time user refresh the page ?
<img class="" id="Default Logo" src="/img/logo/logo_3.png" alt="logo" width="150px" >
<span class="input-icon input-icon-right">
<input id="searchbox" placeholder="Enter SKU or name to check availability " type="text" />
<i class="ace-icon fa fa-search red"></i>
</span>
Right now, I use logo_3.png, but I have 10 of them.

If you are using backend (and I think you are), then just build the output randomly every time when a user visit your page.
In case of PHP for example:
<img id="Logo" src="/img/logo/<?php echo $random_logo_name; ?>.jpg" alt="logo">

Set your img src strings in a JavaScript array and get a random element from the array on page load. Assuming they are all the same width.
var image = images[Math.floor(Math.random()*images.length)];

First off, your ID needs to be one word.
<img id="default-logo" src="/img/logo/logo_1.png" alt="logo" ... />
As long as all of your images are named "logo_*.png", you're fine to randomize the number. Otherwise, you'll need to add the file names into an array, and select the index randomly.
$(document).ready(function () {
var image = $('#default-logo'),
num = ((Math.random() * 10 | 0) + 1);
image.prop('src', '/img/logo/logo_' + num + '.png');
});

Already answered in here:
How to reload/refresh an element(image) in jQuery
Changing img src through jQuery: image won't refresh
How to refresh the src of <img /> with jQuery?
Force refresh an image in jquery mobile
But basically, every time you refresh a page, you should call your backend image server with an appended random number to it (like: img_1, img_2, img_3...)

Solution : I use php function : rand()
<img src="/img/logo/<?php echo rand(1,10); ?>.jpg" alt="logo" width="200px" >
Output - notice image will randomly change !

Jquery dynamically enter values

below is my code
<img src="1.gif"></i>
<img src="2.gif">
as shown in the above code when user clicks on smiley image it changes the value of text area #chat_textarea values are different for different smiley images,above code works fine... but what if i have more then 100 smileys? is there any way i can change the value of chat_textarea dynamically...? because to load images Iam just for loop which loads all images 1 to given number...
Updated:Hi all I know that we can use classname
$('.add_smile').on('click', function(){
// Prepend the ALT of the image to the textarea
$('#chat_textarea').val( $('#chat_textarea').val()+ this.alt );
});
But my question is different...i can not add alt / value to each image, it should be loaded automatically,something like fetching ;) from json file by passing id ....is there any ways to fix in that way....

Below some simpeler html.
If you want to load them dynamicly, just use your language of choice to loop through an array:
// Php
foreach($smileys as $img=>$code){ echo '<img src="'.$img.'" alt="'.$code.'" />';}
// Javascript
$.each(smileys, funcion(index,smile){
$('#smileWrap').append('<img src="'+smile.src+'" alt="'+smile.alt+'" />')
});
<img class="add_smile" src="/img1.jpg" alt=":)" />
<img class="add_smile" src="/img2.jpg" alt=":(" />
<img class="add_smile" src="/img3.jpg" alt=";)" />
$('.add_smile').on('click', function(){
// Prepend the ALT of the image to the textarea
$('#chat_textarea').val( $('#chat_textarea').val()+ this.alt );
});
jQuery doesnt care what you add the click to, the image is just fine. If you want a pointer as mouse, just css that.
Now you can use php to loop and place as many images as needed. Images are required to have an alt, that's fixed. And we can easily access it in javascript, not needing extra html (the anchor) to get that.
My jsFiddle, with auto space-add if not present

Remove unnecessary links, add a ClassName and a data-val attribute to each smiley and modify your HTML like this:
<img src="1.gif" class="smiles_btn" data-val=':#'>
<img src="2.gif" class="smiles_btn" data-val='8D'>
<img src="1.gif" class="smiles_btn" data-val=':#'>
<img src="2.gif" class="smiles_btn" data-val='8D'>
Then use this JQuery:
$('.smiles_btn').click(function(){
$('#chat_textarea').val($('#chat_textarea').val() + ' ' + $(this).data('val')).focus();
});
Check JSFiddle Demo

javascript change Image by clicking thumbnail

I am a newbie in javascript and tried a lot of things for hours, but nothing worked.
I will change a big imgage by clicking on a thumbnail.
Untill now I got following script. Not much really... :-(
<script type="text/javascript">
function changeImage() {
document.getElementById("img").src="img/upload/test1.jpg";
}
</script>
<img id="img" name="change" src="img/upload/test.jpg">
<img src="img/thumbnail/test.jpg" alt="" id="imgClickAndChange" onclick="changeImage()">
<img src="img/thumbnail/test1.jpg" alt="" id="imgClickAndChange" onclick="changeImage()">
All big picture are under src"img/upload/xxx.jpg" and all thumbnails under src="img/thumbnail/xxx.jpg". When I click the thumbnail, it have to change the big picture and it have to give the parameter in the javascript. Like onclick="changeImage(xxx.jpg).
The problem is every page have other pictures. I get them from a database. So the name of the picture is like a variable. I hope you understand. It is hard for me to explain. :-(
Thanks for your help in advance.
Greets Yanick

Pass the image parameter to the function like,
function changeImage(image) {
document.getElementById("img").src=image;
}
<img src="img/thumbnail/test.jpg" alt="" id="img"
onclick="changeImage('img/upload/test1.jpg')" />

Keep ids unique. DOM elements "must" possess unique IDs for all practical reasons.
Though you could do an inline onclick, a better way to proceed with it is something as follows.
Assuming you have the images generated from some templating library either on the client or from the server, add data attributes with the image sources and a common class to all of these elements right there and add an event listener from your Javascript bound to elements matching the class and picking up the data attribute to replace the image source.

How to get an attribute from a hierarchy? (read)

I've got the following code (example):
<body>
<div id="obj1">
<span id="obj2">
<img src="someimage2.jpg" class="image" />
</span>
<img src="someimage2.jpg" class="image" />
</div>
<img src="someimage3.jpg" class="image" />
<button onClick="getUrl();">Get it?</button>
</body>
I need JavaScript to get the url of the image which is located at body >> obj1 >> obj2 >> img
I can imagine a markup similar to this...
function getUrl() {
alert(document.getElementById("obj1").getElementById("obj2").img.getAttribute("src"));
}
But (what a surprise!) it doesn't work, apparently.
Any help? :)
What I am trying to do (if this helps):
I've got an input and a button. Say I type this into input:
Cyber Dragon
This code is called upon the button is pressed:
'do something' or here: document.write('<input id="src" /><button onClick="getImg();">Get</button><br /><iframe src="http://yugioh.wikia.com/wiki/' + document.getElementById("src").value.replace(" ","_") + '"></iframe>');
Then, I'd need to get the image's src attribute from the site (which is "http://yugioh.wikia.com/wiki/Cyber_Dragon" in this case), but it's not all that simple.
The site stores it in an img, not an ID's Div, and can only be told from other images by its hierarchy position. Also, the img's src is complicated and not universal. For example, one's adress would be
http://images3.wikia.nocookie.net/__cb20060929013607/yugioh/images/thumb/e/e5/CyberDragonCRV-EN-SR.jpg/300px-CyberDragonCRV-EN-SR.jpg
and another would look like
http://images1.wikia.nocookie.net/__cb20090402012158/yugioh/images/thumb/a/a6/HonestLODT-EN-ScR-1E.png/300px-HonestLODT-EN-ScR-1E.png

Since you can only have one element in any document with any given id, you only need the one getElementById. You can then use getElementsByTagName to find the image and then the src property to find the image's source:
var imgsrc = document.getElementById('obj2').getElementsByTagName('img')[0].src;