I've created a sliding image viewer here. As you can see, there's 4 small clickable images to change/slide the image. I want the small image to change to this image alt text http://beta.d-load.org/images/etc/imagev-on.png when it's clicked, or when the appropriate main image is showing. That way the users can tell which main image is being shown. Can anyone maybe look at the source and explain how to do this? Thanks!
try the following code !!
var src = [];
src['normal'] = "http://beta.d-load.org/images/etc/imagev-norm.png";
src['active'] = "http://beta.d-load.org/images/etc/imagev-over.png";
$(document).ready(function() {
$('a',$('.paging')).click(function() {
$('a',$('.paging')).find('img').attr('src',src['normal']);
$(this).find('img').attr('src',src['active']) ;
});
});
Here you go, Demo : http://jsfiddle.net/qTB9g/
Related
There are multiple clickable images on the screen. I want to keep which image I clicked in a variable. How can I do this with javascript? Can you help me, please ?
You can add a listener on the images click event, then take the src for example of the image clicked and store it in a variable like this:
$('img').click(function (e) {
var clickedImge = '';
clickedImge = e.target.src;
});
I try create a quick prototype where user can see how an animation has looked like in the past. For this I need a screenshot gallery. So far I have in my HTML:
<div id="screenshot"></div>
This function is called based on some events:
function handlePicture() {
console.log("Greetings from server");
var img = document.createElement("img");
img.src = renderer.domElement.toDataURL(); // catching the Three.js scene as image
var src = document.getElementById("screenshot");
src.appendChild(img);
}
This shows the current screenshot. Great! But I want to have 10, 20, 300 or more of them, so that the screenshot is not replaced but a new image is appended next to it.
I would want the animation's timeline to be presented as a gallery, maybe with the help of CSS galleries https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive
I would need help with the next steps. How could each function call save renderer.domElement.toDataURL(); as a new image and create an element for it? I'm confused if I should make a new div for every image or put them all under div "screenshot". Many thanks!
I have set up a pen to demonstrate creating an image element with a button.
renderer.domElement.toDataURL() Is an async function so you would need to wrap it in a callback function.
var imgBtn = document.getElementById("addImage");
document.addEventListener("click", function(){
var newImage = document.createElement("img")
document.body.appendChild(newImage)
newImage.setAttribute("src",
"https://via.placeholder.com/150/0000FF/808080%20?
Text=Digital.com%20C/O%20https://placeholder.com/)")})
https://codepen.io/sijbc/pen/MWJeveL
I am using jQuery ImageAreaSelect for image area selection like this:
$('#image').imgAreaSelect({}); //#image is a img id
Below this image, I have a bunch of image thumbnails, clicking on which will populate that image as #image. This way user can load each image and then select its area.
My problem is that when a new image is loaded, the dotted line which indicates the area selected for previous image still remains and gets shown on the newly loaded image. I do not want this and want this to go away every time a new image is loaded.
I read and tried this answer and this answer but they are not working for me...
My current (non-working) code is:
$('#load').click(function() {
$('#image').imgAreaSelect({hide:true,remove:true}); //try to remove old instance
$('#image').imgAreaSelect({}); //create new instance...
});
Any help is appreciated.
I have never used such pluggin but the documentation explains how to disable/re-enable it.
Save the variable when you initialize the pluggin
var ias = $('#image').imgAreaSelect( // your original initalization
Then call disable on it as the documentation states:
ias.setOptions({hide:true,remove:true})
Try this way
$('#load').click(function() {
$('#image').cancelSelection();
});
I am trying to put a photo view/slideshow on my webpage and I am not getting the results I am looking for. I have created a Fiddle HERE to show you what I am trying to do. What I want it to do is when you click a thumbnail it switches the thumbnail into the main photo spot and the main photo into the thumbnail spot. It works at first but after you start clicking the other thumbnails it starts not switching the correct photo into the main slot. Also if you reclick the thumbnail you just clicked it does nothing. Here is my jquery code but take a look at my fiddle and you will be able to see what I am trying to do.
$('.thumb1').click(function() {
$('.thumb1, .main').fadeIn().toggleClass('thumb1 main');
});
$('.thumb2').click(function() {
$('.thumb2, .main').fadeIn().toggleClass('thumb2 main');
});
$('.thumb3').click(function() {
$('.thumb3, .main').fadeIn().toggleClass('thumb3 main');
});
$('.thumb4').click(function() {
$('.thumb4, .main').fadeIn().toggleClass('thumb4 main');
});
I changed your classes similarly to how Joao did, but my JavaScript is a little different
$('.thumb').click(function () {
var newHTML = this.innerHTML;
this.innerHTML = $('.main')[0].innerHTML
$('.main').html(newHTML);
});
Instead of just changing the src, you will also keep all other attributes of the images, such as the alt attribute, which you should add to your images for accessibility purposes.
I didn't implement the idea of not having clicking the same one do nothing, because then if they want to look at the image they just looked at they can't.
JSFiddle: http://jsfiddle.net/howderek/RfKh4/6/
I was looking at your code, and I wouldn't recommend switching around classes between elements like that since it might throw out a couple of bugs like yours. I played around with your code and simplified a little bit:
$('.thumb').click(function () {
var previousSrc = $('.main').children().attr('src');
$('.main').children().attr('src', $(this).children().attr('src'));
$(this).children().attr('src', previousSrc);
});
Here's the updated fiddle: http://jsfiddle.net/RfKh4/5/
Basically what I did was save the previous src attribute of the .main div image inside previousSrc and then I change the div's image to the one in the thumbnail. And finally change the thumbnail's image to the one that was on the .main div. Hope it helps you!
The problem:
I have set of pictures, when the user presses on one of them, it's grow to an area in the page.
The exchange of the pictures is done with the help of js.
Tthe picture is weigh about 0.5M, therefore it's take about 3 sec until the picture is showed.
I would like to present a type of animation while the picture is not displayed.
How can I do this with the help of js?
There's always the "marquee" tag with a "loading" message that you turn off as soon as your image is swapped in. Of course, even I would downvote anyone advocating marquee.
Use the load event, something like:
$("img.something").click(function() {
$(".someDiv").html('<img src="loading.gif"/>');
var $img = $('<img src="bigImage.jpeg" style="display:none"/>');
$img.load(function() {
// once the loading has completed
$(".someDiv").html($(this));
$(this).fadeIn("slow");
});
});
Insert a placeholder element and attach an onload event callback to the <img> element. With jQuery,
var imageElem = $('<img />'),
placeholder = $('<div class="loading">Loading...</div>');
imageElem.attr('src', 'http://example.com/big_image.jpg');
$('#images').append(placeholder).append(imageElem);
imageElem.hide().load(function() {
placeholder.remove();
imageElem.fadeIn();
});