I want an image, which is not clicked after 5 seconds, to turn into another image, which then returns to the original image when clicked.
So
image > (user not clicked on image after 5 secs) > image prompting user to click > (user clicks) > image back to original.
Any ideas?
Sure, not a problem. You can do it with the following code:
HTML
<img id="clickable" src="http://fullahead.org/gallery/toronto-2010/image/thumb/DSC_3356.jpg" style="cursor: pointer" title="Clicky!"/>
Javascript
// Get a reference to the image and save its original source
var img = document.getElementById('clickable');
var origSrc = img.src;
// Create the timeout to change the source (2 seconds in code below)
var timeout = setTimeout(function(){
img.src = 'http://fullahead.org/gallery/ilse-de-grand-calumet-2010/image/thumb/DSC_3163.jpg';
}, 2000);
// Register the click event handler for the image and clear the timeout
img.onclick = function(){
clearTimeout(timeout);
this.src = origSrc;
}
You can see it in action here.
This is very easy with jquery
what we will do is: when the document is ready, get all the images with class "promptimage", set a timer on them, when timer passes -> change their source to another source, and when it is clicked, set it to default src.
$(function(){
var original_src = $('.promptimage').attr("src");
$('.promptimage').attr("src",'set your image source with the prompting image').delay(800);
$('.promptimage').click(function(){
$('.promptimage').attr("src",original_src);
});
});
I'm not sure exactly where you are having problems so I'll give a general overview of what I think is needed:
Image should have an onclick event that can determine when it has been clicked. This can set a flag and reset the image if necessary. It can also cancel the timer in the next step if it is still running.
On page load set a 5 second timer. Once that is up run a function that checks if the image has been clicked. If it hasn't change the image. If it has do nothing.
I'd suggest search or reasking a new question on specific bits you are having problems with.
Related
My page (built using wordpress) uses some jquery to show a modal when an image is clicked. The modal contains the image that was clicked and I used the below jquery to do this.
Trouble is that when the page is loaded, the first image click shows the modal but the src of the modal image hasnt been updated with the url of the clicked image.
It looks like the jquery hasnt run. Once the modal is closed and a new image is clicked it works.
The page does have lazy loading but the image says "loaded" in the image tag
Any ideas?
page link: https://www.musiciansforscreen.com/musicians/flavio/
.prof-image is the imafge the user clicks
.lightbox-image is the image in the modal
jQuery('.prof-image').click( function() {
var image = jQuery(this).attr('src');
jQuery('.lightbox-image').attr('src', image );
});
Ok I actually solved this by updating the code to change the "data-lazy-src" as well as the "src" attribute. The "data-lazy-src" attribute was cueing up the placeholder image so changing that sorted the issue.
your code does not run in the first time and then it runs in the second time because the modal was about "showing" and not "shown" yet ..
so that's why the ".lightbox-image" will be not used to set your image because it was not loaded yet in the dom (in the first step).
in that case you have to use the "on shown event" of the modal" , after that put your code insde .
look at this modal events
here is my code solution:
var lastImgSrc = null;
/** change #myModal to your modal id **/
jQuery('#myModal').on('shown.bs.modal', function (e) {
// if the modal is fully loaded and the lastImgSrc is not null, set the src url with the wanted value.
if(lastImgSrc){
jQuery('.lightbox-image').attr('src', lastImgSrc );
}
});
jQuery('.prof-image').click( function(e) {
e.preventDefault();
lastImgSrc = jQuery(this).attr('src');
jQuery('#myModal').modal('show'); // show modal manually
});
jQuery('#myModal').on('hidden.bs.modal', function (e) {
lastImgSrc = null; // if modal closed then reset the variable;
})
I have an application form that shows an image on the left part and some input texts on the right part. The users will have to fill the input texts and click next to show the next image. The problem is that the images are big and it is taking a long time to load and it is time consuming.
What I want to do is when the user starts filling the form from the first image for example, I want to start downloading the next image with ajax asynchronously, by the time the user finishes working on the first image the next image will be downloaded to the client, and when the user clicks next, the browser will show the next image, and so on.
I tried this code but it is not working as I explained. The page is waiting until the both images are loaded then it is showing the first image, any help would be appreciated:
HTML
<img id="currentImage" src="currentImage.png" onload="currentImageLoad()"></img>
<img id="nextImage" style="display: none;"></img>
Javascript
function currentImageLoad(){
$('#nextImage').attr('src' , 'nextImage.png');
}
javascript is synchronous. You can delay the loading of the second image to prevent this:
function currentImageLoad(){
setTimeout(function() {
$('#nextImage').attr('src' , 'nextImage.png');
}, 10); // 10ms
}
You can lazy load the image using jquery unveil plugin.
http://luis-almeida.github.io/unveil/
This is what you need, it's not complicated. JQuery is only used here for simplified selecting / DOM Manipulating.
<!-- click this button to append the image to #image-frame -->
<button id="append-image">append image</button>
<!-- image will go here -->
<div id="image-frame"></div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(){
// 1. create a image object and load the image file (this will display nowhere)
var image_url = 'https://image.spreadshirtmedia.net/image-server/v1/compositions/123658308/views/1,width=300,height=300,version=1472099537/evil-maenner-premium-t-shirt.jpg',
image = new Image();
image.src = image_url;
// 2. create a new <img> element and append to the frame
// (the image will load from cache if the previous download is finished, or load from remote if it's not)
$('#append-image').on('click', function(e){
e.preventDefault();
$('<img src="'+image_url+'">').appendTo($('#image-frame'));
});
});
</script>
I have a problem with Javascript code
Problem Statement: I have a button and an image on page. When I click the button the image is replaced with another for a certain time (e.g. 3 minutes) and after time ends, image is replaced with initial image.
Note: I would like to achieve this without page refresh.
Can anyone help please?
$(document).on("click", "#my_btn", function() { // This is how event binding should be done.
// Change source of image here
setTimeout(function(){
// Reset source of image here
}, 180000)
});
For reference - http://api.jquery.com/on/
http://www.w3schools.com/jsref/met_win_settimeout.asp
Wait people I know a lot of things about PHP , CSS and SQL and I've already created a website from the beginning but about Javascript I don't know a lot just the main definitions
I have a field and a container for an image.
In this container there is a default image.
I want the user to put a link of an image and then submit it, this then adds the image to the
src attribute of the default image.
My question, how should I load image, and during this time show a progress bar to the user, and after loading finishes, hide the URL. My main concern now is how to load the resource.
Now I have written this script:
jQuery("#logo-file-upload").on("click", function(){
// when user clicks the submit button
$("#url-logo-progress").show(); // show the progress bar to it
var logoUrl = $("#logo-url").val(); // pick up the inserted URL
$("#image-width").attr("src", logoUrl); // and put the URL into the src attribute of the image
});
Though I need something like this:
$.imageLoad({ url : "url/to/image.jpg",
complete : function(){
alert("upload finished!");
});
I have no problem to writen callbacks and status's, but I don't know how to load a resource.
Thanks in advance
You just miss the onload handler. When you set the src attribute on the image (the DOM image element), it begins loading the resource. When the resource is loaded, image will trigger the onload event.
So, instead of
jQuery("#logo-file-upload").on("click", function(){
// when user clicks the submit button
$("#url-logo-progress").show(); // show the progress bar to it
var logoUrl = $("#logo-url").val(); // pick up the inserted URL
$("#image-width").attr("src", logoUrl); // and put the URL into the src attribute of the image
});
do
jQuery("#logo-file-upload").on("click", function(){
// when user clicks the submit button
$("#url-logo-progress").show(); // show the progress bar to it
var logoUrl = $("#logo-url").val(); // pick up the inserted URL
var image = $("#image-width")[0];
image.onload = function(){alert("upload finished!");}
image.src = logoUrl; // and put the URL into the src attribute of the image
});
so that you're dealing with the reference to the Image DOM element directly, not with the jQuery reference. Of course, when the resource is loaded, you will have to hide the progress bar etc... not just alert the message.
I have a button which acts as an indicator, so has two states; pressing it toggles the state, and moves on to the next page.
Pressing the button calls a JavaScript function which handles this.
Having changed a button's 'src' image, using jQuery, I wish for the user to see the image change, pause for a fraction of a second, and only then see the next page displayed.
I am finding that the image does not visibly change until the JavaScript function returns, but this is after the pause, and after the page change. I.e. the browser does not show the page changes until the button's function has exit.
So I wish to cause the page to repaint in the browser, before the pause.
All the solutions I have tried refresh the page to its state on the server, and any changes I made to it in jQuery are lost.
Is there a way to force the page or button to be repainted, which will honor the changes I made to it in JavaScript/jQuery?
$("#YourButtonWhichTriggersChanges").click(function() {
// page repaint code, image change, etc.
setTimeout(function(){
window.location.reload();
// use window.location.href = "my/new/url.html";
// or window.location.replace("my/new/url.html");
// to change the page instead of just reloading.
}, 1000);
});
Where 1000 is the number of milliseconds you want to wait before refreshing the page.
Edit: I think you want this code instead:
$("#ApproveButton").css('backgroundImage', 'url(\'img/but/proof/ApprovePageButton.png\')');
The extra backslashes are in there to escape out the single quotes in the url parameter.
Another edit: Here's a combination of the two solutions I supplied which should work:
$("#ApproveButton").click(function() {
// actually repaint the button's background image
$(this).css('backgroundImage', 'url(\'img/but/proof/ApprovePageButton.png\')');
// change the page after 1000 milliseconds have gone by.
setTimeout(function(){
window.location.reload();
/* use window.location.href = "my/new/url.html";
* or window.location.replace("my/new/url.html");
* to change the page instead of just reloading.
*/
}, 1000);
});