[英]changing the image src attr
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". 在当前的迭代中,我得到的结果是,如果用户单击图像缩略图,则缩略图图像将显示在不同的div(主div)中,并且这样做会重写主div img src attr * update :带有缩略图img attr减去“-缩略图”。 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. 话虽如此,当用户单击缩略图并显示主要的div img后,它会持续存在……而我的意思是,例如,如果用户关闭div并重新打开它或另一个div,最后一张图片显示(停留)何时不应该在主div中显示。 Instead, it should be showing the first thumbnail img in the main div...
相反,它应该在主分区中显示第一个缩略图img。
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". * update :HTML部分位于名为“ t_1”的div类中。 I have 24 of these..."t_1", "t_2", "t_3" respectively.
我分别有24个...“ t_1”,“ t_2”和“ t_3”。 And within this class, I have what is posted below in all using the same div classes.
在这个类中,我使用相同的div类在所有内容中发布了以下内容。 The only difference is the folder names in the img tag.
唯一的区别是img标签中的文件夹名称。
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"... 因此,当用户单击该缩略图并且该缩略图被重写以使其可以显示在主div“ t_main_screenshot”中时,一切都很好...但是,如果用户单击了“ t_1”之外,等等。 div,并打开另一个“ t_2”,先前单击的最后一个图像缩略图显示在主div(t_main_screenshot)中,而不是“ t_2”中应显示的第一个图像缩略图...
Hopefully this is a bit better in clarity...It's kind of hard to explain. 希望这在清晰度方面会更好一点……有点难以解释。
HTML: 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: 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()
那是因为您使用的是
.fadeOut()
和.fadeIn()
So to fix this issue you can use .stop()
method to stop the previous animation before starting the new one 因此,要解决此问题,您可以在开始新动画之前使用
.stop()
方法停止上一个动画。
More details: https://api.jquery.com/stop/ 更多详细信息: https : //api.jquery.com/stop/
According to the question updates 根据问题更新
Here is the problem: $('.t_main_screenshot img').fadeOut(0, function() {
这是问题所在:
$('.t_main_screenshot img').fadeOut(0, function() {
You have to select the closest t_main_screenshot
您必须选择最接近的
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', '');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.