I have an image that uses jquery for when an image is clicked, this will return the image src for that image. I modified my HTML/CSS to give this image an overlay.
However, I have now added an overlay that comes from left to right when the image is hovered. This added complications, as now when the jquery tries to find the image src, it can't because the overlay is covering it.
This has meant I have to manually write the code for each image src, but this does not work because obviously when you click each image, each one will have a different img src.
To provide example:
$(".dogs img").click(function(){
var src = $(this).attr("src");
});
Now that I have an overlay, unless I'm really fast and beat the overlay covering my screen, I can't click the image, but only the overlay covering it.
<div class = "cover-overlay">
<img src = "dog-1.png">
</div>
<div class = "cover-overlay">
<img src = "dog-2.png">
</div>
<div class = "cover-overlay">
<img src = "dog-3.png">
</div>
So now I have to do,
$(".dogs .cover-overlay").click(function(){
var src = $(".dogs img").attr("src");
}
however this will obviously always return the source of the first image in dog class, because of how the click function now works with overlay. Any suggestions?
You can still use this to reference the clicked .cover-overlay element, but now you need to also use find() to get the child img from it:
$(".dogs .cover-overlay").click(function(){
var src = $(this).find('img').prop("src");
});
Related
Looking for some direction with this.
At this current iteration, I have it where if a user clicks on an image thumbnail, the thumbnail image displays in a different div (the main div) and in doing so, it rewrites the main div img src attr *update: with the thumbnail img attr minus the "-thumbnail". This part is good, or at least I believe it is.
With that said, after the user clicks on a thumbnail and the main div img appears, it lingers...and what I mean by lingers is that for example, if a user closes the div and re-opens it or another div just like it, the last image shows (stays) when it shouldn't in the main div. Instead, it should be showing the first thumbnail img in the main div...
Any suggestions is appreciated and below is what I currently have (or at least a portion of it). There is a lot more, but below is the main stuff that's giving me troubles...
*update: The HTML part is within a div class called "t_1". I have 24 of these..."t_1", "t_2", "t_3" respectively. And within this class, I have what is posted below in all using the same div classes. The only difference is the folder names in the img tag.
So, when a user clicks on that thumbnail and that thumbnail image gets rewritten so that it can be displayed in the main div "t_main_screenshot", all is good...but then, if the user clicks out of the "t_1" etc. divs, and opens up another "t_2", that last image thumbnail that was clicked previously shows in the main div (t_main_screenshot) instead of the first image thumbnail for what should be in "t_2"...
Hopefully this is a bit better in clarity...It's kind of hard to explain.
HTML:
<div class="t_main_screenshot">
<img src="_framework/images/slides/simplicity/2.png" alt="" title="" />
</div>
<div class="t_thumbnail_wrapper">
<div class="t_thumbnail active">
<img src="_framework/images/slides/simplicity/2-thumbnail.png" alt="" title="" />
</div>
<div class="t_thumbnail">
<img src="_framework/images/slides/simplicity/4-thumbnail.png" alt="" title="" />
</div>
<div class="t_thumbnail">
<img src="_framework/images/slides/simplicity/6-thumbnail.png" alt="" title="" />
</div>
</div>
JS / JQuery:
$('.t_thumbnail').click(function() {
$('.t_thumbnail').removeClass('active');
$(this).addClass('active');
var thumbNail = $(this).find('img').attr('src');
$('.t_main_screenshot img').fadeOut(0, function() {
$(this).fadeIn().css('animation','scale-in .75s ease-in 0s forwards')[0].src = thumbNail.replace('-thumbnail', '');
});
});
Your question isn't clear, but I think you mean when the user clicks two times so quickly, you will see a flash...
That's because you're using .fadeOut() and .fadeIn()
So to fix this issue you can use .stop() method to stop the previous animation before starting the new one
More details: https://api.jquery.com/stop/
According to the question updates
Here is the problem: $('.t_main_screenshot img').fadeOut(0, function() {
You have to select the closest t_main_screenshot
Correct way:
$(this).closest('.t_thumbnail_wrapper')
.siblings('.t_main_screenshot')
.find('img').fadeOut(0
Let me know if this works...
$('.t_thumbnail').click(function() {
$('.t_thumbnail').removeClass('active');
$(this).addClass('active');
var thumbNail = $(this).find('img').attr('src');
var res = thumbNail.substring(1, thumbNail.indexOf("-"));
res+=".jpg";
$('.t_main_screenshot img').fadeOut(0, function() {
$(this).fadeIn().css('animation','scale-in .75s ease-in 0s forwards')[0].src = res;
});
});
Finally figured out the answer to this:
$('.t_thumbnail').click(function() {
$('.t_thumbnail').removeClass('active');
$(this).addClass('active');
var thumbNail = $(this).find('img').attr('src');
$(this).parent().parent().siblings().find('.t_main_screenshot').children('img').fadeOut(0, function() {
$(this).fadeIn().css('animation','scale-in .75s ease-in 0s forwards')[0].src = thumbNail.replace('-thumbnail', '');
});
});
I have a gallery where I use the 'alt' as it's caption and I got it to perform correctly when calling the image, displaying image with the caption z-index'd above it but for some reason the caption is coming in too early (i noticed this because if i keep clicking the same image, everything fades in except the actual caption text).
I have all the css already provided and have created a div with append, actually it's probably easiest to just show the code
Here is the code:
function gallery(){
$('#gallery a').click(function(evt){
evt.preventDefault();
oldImage = $('#thumbs').next();
var imgPath = $(this).attr('href');
var newImage = $('<img class="galleryBig" src="' + imgPath + '">');
//get nextCaption information for each click(only applies to anchors)
var nextCaption = $(this).find('img').attr('alt');
newImage.hide();
$('#thumbs').after(newImage);
//displays caption for each image and replaces old caption (if applicable)
$('div.caption').replaceWith('<div class="caption">' + nextCaption + '</div>');
newImage.fadeIn();
oldImage.remove();
}); //end anonymous fcn
} //end gallery
I am completely stumped on how to get the caption to work with the image as if they were both one item (fade in fade out with eachother)
There's an easy workaround for this:
You could just use the following method which will allow you to fadeIn() the image and once the fadeIn has finished, then load the caption.
Here is the code:
$('.imageToFadeIn').fadeIn(800, function(){
//load here the caption
})
what the above code will do is that once the fadeIn() function is finished, it will perform the next function where you can load your caption.
Read the documentation for a better understanding of what the function after the duration does.
http://api.jquery.com/fadeIn/
If you want both to load at the same time, then get both elements, the picture and the caption into a div and then fadeIn() the div instead like this:
html:
<div class="pictureAndCaption">
<img src="source">
<span>Caption text</span>
</div>
jQuery:
$('.pictureAndCaption').fadeIn(800);
Im pretty new to web programming and im working on a site now. In one part of this site, I have collections of 3 pictures. 1 larger one and two smaller thumbnails below it. The goal is to create a way in which i can click on one of the thumbnails and they swap spots with the one large picture. any idea how I would go about doing this? Heres a snippet of code. Thanks!
<div class = 'picture-container'>
<div class = 'large-picture' id = 'lp1'>
<figure style = 'float:left;width:45%;'>
<img src = 'close_table_dupontstudios.png' width = '100%' height = '100%' class = 'no-mobile'>
<figcaption class = 'red-cap'>Our Set-Up</figcaption>
</figure>
<div class = 'picture-content'>
<div class = 'picture-title'>BOUTIQUE PRODUCTION STUDIO</div>
<div class = 'picture-text'>We built a boutique full service production studio that allows for one, two and three person filmed interviews and conversations. We have studio lights, a three camera set-up and remote monitoring. Additionally, our Infinity Wall creates a clean and professional look that allows the film to be about the message.</div>
<!--<div class = 'small-picture'>
<img src = 'hair_and_makeup_dupontstudios.png' width = '175' height = '100'>
</div>
<div class = 'small-picture'>
<img src = 'infinity_wall_dupontstudios.png' width = '175' height = '100'>
</div>-->
</div>
<div class = 'thumbnail-container'>
<figure class = 'thumbnail'>
<img src = 'infinity_wall_dupontstudios.png' width = '100%' height = '100%'>
</figure>
<figure class = 'thumbnail'>
<img src = 'infinity_wall_dupontstudios.png' width = '100%' height = '100%'>
</figure>
</div>
</div>
</div>
There are many ways to solve this problem. The easiest way is to dump all your images (large and small) and only show one at a time.
So in the source code all your large images except the first one will have a class of hidden, which makes them display: none. And then it's just a matter of showing the right large image when the thumbnail is clicked.
To show the right large image you need to associate the thumbnails with the large image by an identifier. Below is an example of setting the href of a thumbnail link to the large image id.
<a href="#lp1">
<figure class="thumbnail">...</figure>
</a>
Now you add the javascript (jQuery).
// preselect all large images
var largeImages = $('figure.large');
// add handler for thumbnail clicks
$('.thumbnail-container').on('click', 'a', function (e) {
e.preventDefault();
var thumbnailLink = $(this),
selectedLarge = $(thumbnailLink.attr('href'));
// hide all the large images
largeImages.addClass('hidden');
// show the large image that corresponds to the clicked thumbnail
selectedLarge .removeClass('hidden');
});
So, the easies way is hide/show, but this means is not the most efficient. It makes the client load all the images even if they are hidden.
A more efficient approach is to add data- attributes in the thumbnails and inside the thumbnail click handler update the large content area with the data from the clicked thumbnail.To "replace" the image you just need to replace src attribute.
I have a problem with a mouseover script. Everything works as it should but I have a small issue that I don't know how to solve. More precisely, the mouseover script creates a grayscale image hover effect. When the page loads the colored images are showing for a short time (1 second or less) and then the javascript is applied and they are all grayed out which is exactly how things should work.
How can I make it so that the colored images will not appear before the javascript is applied? Basically, I want the grayscale images to appear when the page loads not after. Is it possible?
You can see the script here and the webpage in question here.
I would remove the images from the HTML and load them dynamically.
I would use <a class="placeholder" href=""></a> as placeholders for the <img src="" /> and would style the links to either be hidden or go well with the design.
$('a.placeholder').each(function() {
var src = $(this).attr('href');
var image = new Image(); // this is not yet visible in the DOM.
image.onload = grayscale; // change the grayscale function to accept
// event parameters
image.src = src; // this triggers the onload event which
// grayscales the image
var dom_image = $('<img />').attr('src', src);
$(this).replaceWith(dom_image);
});
Of course you have to be doing the above on document ready not on window load.
I'd like it so when I hover over the image, the entire image becomes a link rather than just the text inside. Can someone help me with this?
Javascript:
$('.thumbnail').hover(function() {
$('.thumbnail img').stop(true,true).fadeTo(400, 0.2);
$('.description').stop(true,true).fadeIn(400);
}, function() {
$('.thumbnail img').stop(true,true).fadeTo(400, 1);
$('.description').stop(true,true).fadeOut(400);
});
Here is the jsfiddle: http://jsfiddle.net/LDs6C/15/
Is there a reason why you aren't just surrounding the img tag with an a tag?
<img src="..." width="200"/>
Doing so will accomplish what you need without the extra markup.
Like this: http://jsfiddle.net/LDs6C/16/
I made the link a block element and set the dimensions to equal the size of the image.
I think you should be able to add an on click handler that takes you to the desired location, e.g.
$('.thumbnail img').click(function(){window.location='someurl';});