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 !
Related
There is a carousel on a home page and I would like to add an onclick event to it to send the data back to GA. Each part of the carousel is a link. But I want to specify which selection on the carousel they selected. When I hover over each of the carousel links, the end of the URL says
#carousel-modal1, #carousel-modal2, #carousel-modal3, #carousel-modal4, #carousel-modal5.
How do I programmatically get the number of modal that's selected?
I would like to add an onclick event with a function. When I tried, I added the onclick to the rest of the code below. I know how to send the info back to GA but I guess the most important question is how do get that modal #?
HTML:
<div class="carousel-item">
<a
id="modal-111"
href="#carousel-modal"
onclick="myFunction()"
role="button"
data-toggle="modal">
<img class="d-block w-100" alt="" src="/somepic.png" />
</a>
</div>
Your question is kinda all over the place, but it seems like the prevailing idea is that you want to get 111 from the example via the onclick event...
To do that, you can use this, which provides access the element that activated the click. Then you can use some js string magic to get the number, like so:
function myFunction(){
var id = this.id;
var number = id.substring(id.indexOf('-')+1,id.length);
}
As a sidenote, you may want to consider using jQuery, it makes stuff like this way easier:
<div class="carousel-item">
<a
id="modal-111"
href="#carousel-modal"
role="button"
data-toggle="modal">
<img class="d-block w-100" alt="" src="/somepic.png" />
</a>
</div>
<!-- include the jQuery code on your site -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$('.carousel-item a').click(function(){
var id = this.id;
var number = id.substring(id.indexOf('-')+1,id.length);
});
});
</script>
In this example, you're attaching a function to all anchor links inside carousel-item tags, so you don't need to add an onclick to each one.
And based on your update in the comments, it seems like you want the number that follows the href attribute. Here's how to do that:
function myFunction(){
var href = this.getAttribute( 'href' );
var number = href.substring( href.indexOf('modal')+1, href.length );
}
Take a look at how this answer changed based on what you asked. What you were really looking for was answers to two small problems:
How to get the value of an attribute.
How to search within that value, or how to search a string.
Both of these questions are easily answered with google.
As you build more advanced things, the SO community is not going to spend time deciphering your question.
Next time, be sure to spend a lot of time simplifying your question to the bare essentials. Make sure it is as easy to understand as possible. Also be sure to create a working example (or as close as you can get) of your code on jsfiddle or codepen.
You should aim to spend at least an hour writing a question. If you take this advice, 99% of the time you will answer your own question before you need to post it here, and that will save you a lot of time. Good luck.
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()
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
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.
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;