changing the image src attr

0
votes

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', '');
    });
});
3
javascriptjqueryhtmlimage
can you please create a jsfiddle? – brk
You can use setAttribute() of javascript to do so. – Vasim Shaikh
@Vasim, how would I go about doing so if I may inquire? – This Guy
As i understand you need to replace '-thumbnail' to get an original path – Vasim Shaikh
_framework/images/slides/simplicity/4-thumbnail.png you want _framework/images/slides/simplicity/4.png – Vasim Shaikh

3 Answers

0
votes

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...

0
votes
$('.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;
    });
});
0
votes

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', '');
    });
});