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!
Related
I dont have much experience in javascript but trying to achieve a slideshow like in https://district2.studio/ where the text and image changes as you scroll. In the example no matter the amount you scroll at a time or inbetween the image changing animation, the image will change only once at a time. I'm trying to achieve this using javascript only and no additional plugin or libraries. Hope someone can help me.
You have some errors.
First of all, you have to wait the DOM is ready. You could movet he entire before de body tag closes to ensure that or use window.onload
class prop elements it's an array.
window.onload = function() {
document.getElementById("image1").onscroll = function() {
if(document.getElementById("image2").classList.contains("scroll")){
document.getElementById("image2").classList.remove("scroll");
} else {
document.getElementById("image2").classList.add("scroll");
}
};
}
Something like this should work
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();
});
What I am trying to do is have four links that each will display and hide a certain div when clicked. I am using slideToggle and I was able to get it to work with really sloppy and repetitive code. A friend of mine gave me a script he used and I tried it out and finally was able to get something to happen. However, all it does is hide the div and wont redisplay. Also it hides all the divs instead of just the specific one. Here is a jsfiddle I made. Hopefully you guys can understand what I am trying to do and help! Thanks alot.
Here is the script I'm using.
$(document).ready(function () {
$(".click_me").on('click', function () {
var $faq = $(this).next(".hide_div");
$faq.slideToggle();
$(".hide_div").not($faq).slideUp();
});
});
http://jsfiddle.net/uo15brz1/
Here's a link to a fiddle. http://jsfiddle.net/uo15brz1/7/
I changed your markup a little, adding id attributes to your divs. The jquery, gets the name attribute from the link that's clicked, adds a # to the front, hides the visible div, then toggles the respective div. I also added e.preventDefault to stop the browser from navigating due to the hash change. As an aside, javascript don't require the $ prefix.
$(document).ready(function () {
$(".click_me").on('click', function (e) {
e.preventDefault();
var name = $(this).attr('name');
var target = $("#" + name);
if(target.is(':visible')){
return false; //ignore the click if div is visible
}
target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo
$('.hide_div').slideUp(); //hide all divs on link click
target.slideDown(); // show the clicked one
});
});
Welcome to Stack Overflow!
Here's a fiddle:
http://jsfiddle.net/uo15brz1/2/
Basically, you need a way to point to the relevant content <div> based on the link that's clicked. It would be tricky to do that in a robust way with your current markup, so I've edited it. The examples in the jquery documentation are pretty good. Spend some time studying them, they are a great way to start out.
I am trying to find in the Galleria JavaScript file a place where I tell it to run a JavaScript function every time the current picture is changed (prev, next, or clicking on a thumbnail)
Does anyone with experience with galleria have any ideas?
http://galleria.io/
When you set up your Gallery bind to the image function and you will receive the event every time the image changes. I use it to load text into another area of my page like so.
Galleria.ready(function() {
this.bind("image", function(e) {
$("#text_div").text(arrayOfText[e.index]);
});
});
To make sure you have things setup correctly use it like this,
Galleria.loadTheme('galleria/themes/kscreates/galleria.classic.js');
Galleria.configure();
Galleria.ready(function() {
this.bind("image", function(e) {
console.log(e.index);
});
});
Galleria.run('#galleria');
and have a look in your Safari console and you will see the index of the currently displayed image.
Hope this helps.
I have seen a lot of websites which "wrapper" width is 960px. As a background image they have an image which is clickable (some kind of advertise) and the whole webpage is over that image, like on this site.
Can you give me tutorial or something on that ?
Tom's code was a huge help, but I needed pointer cursor for this type of ad, but not for all the site, so I came up with this solution:
$('body').bind('click', function(e) {
if ($(e.target).closest('#container').size() == 0) {
alert('click');
}
}).bind('mouseover', function(e) {
if ($(e.target).closest('#container').size() == 0) {
$(this).css('cursor','pointer');
} else {
$(this).css('cursor','default');
}
});
In the first place you put the ad image as the website background then basically you have to capture the click on the whole body and check if it was in-or-outside of the page content. To do that you have to check if the event target element have the content wrapper (or wrappers if there are multiple) as one of its parent nodes - if not it means the click was outside of the page content.
If you'd like to do it here on StackOverflow you could do it with this bit of code.
$('body').bind('click', function(e){
if(!$(e.target).closest('#content').length) {
alert('ad outside content clicked');
}
});
Feel free to try it in your javascript console - SO is using jQuery so it will work - when you will click outside of the content area (at the edges of the screen) you will get alert that ad was clicked.
You'd obviously have to replace the alert with any kind of callback you'd have for your commercial - opening a new web page or whatever
Hope that helps
Tom
ps.
Keep in mind that this example is using jQuery for simplicity not native JS so you'd need the library for it to work.