The first image becomes visible each time before loading the next image

Question

This is my website http://www.alienchela.com/portfolio.html .

First click on any client image. OK.

But if you click the next button every time, then you can see. First, the previous image appears, then the next image is the download.

Here is the code:

var ticker = $('.img_wrap'); $('.next').click(function () { $('.img_panel:visible').fadeOut(1000, function() { $(this).appendTo(ticker); ticker.children().first().show(function(){ var artit = $(this).attr('title'); $(this).load(artit+'.txt'); }); }); $(ticker).hide().delay(1500).fadeIn(1000); }); 

I did a hack. I made the transition with some delay.

 $(ticker).hide().delay(1500).fadeIn(1000); 

I'm not so good, it's JS.

Any help is appreciated.

Answer 1

Here you go:

Analysis

1. The initial state

 <div class="img_wrap"> <div class="img_panel" title="pixi">pixi</div> <div class="img_panel" title="mus">mus</div> <div class="img_panel" title="flash">flash</div> <div class="img_panel" title="dir">dir</div> <div class="img_panel" title="rpi">rpi</div> <div class="img_panel" title="ac">ac</div> <div class="img_panel" title="css">css</div> <div class="img_panel" title="nagraj">nagraj</div> </div> 

2. Press "AC"

 <div class="img_wrap"> <div class="img_panel" title="pixi"> <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant"> </div> <div class="img_panel" title="mus"> <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant"> </div> <div class="img_panel" title="flash"> <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant"> </div> <div class="img_panel" title="dir"> <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant"> </div> <div class="img_panel" title="rpi"> <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant"> </div> <div class="img_panel" title="ac" style="display: block;"> <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant"> </div> <div class="img_panel" title="css"> <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant"> </div> <div class="img_panel" title="nagraj"> <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant"> </div> </div> 

Explanation

Each img_panel has a header image for "AC". And they do not have CSS display:none; , which means that these divs are visible. When you do

 $('.img_panel:visible').fadeOut(1000, function() { $(this).appendTo(ticker); ticker.children().first().show(function(){ var artit = $(this).attr('title'); $(this).load(artit+'.txt'); }); 

the current item is hidden and the next one is displayed. During the transition period, both the current and the following elements will be partially hidden, and the image in the background div will be displayed.

Problem code

 $('.work li').click(function(){ var clientitle = $(this).attr('title'); $('.work').fadeOut(500), $('.big_images').delay(500).fadeIn(); $('.img_panel[title="'+clientitle+'"]').fadeIn(); var cltxt = clientitle+'.txt' $('.img_panel').load(cltxt); }); 

Decision

 // Only load data to active div $('.img_panel[title="' + clientitle + '"]').load(cltxt); 

In addition, it is better to do this:

 // Hide all divs $('.img_panel').hide(); // Load and unhide active div $('.img_panel[title="' + clientitle + '"]').load(cltxt).show(); 

---

Problem 2

When you click "AC" and then click Next , the code will be as follows:

 <div class="img_wrap" style="display: block;"> <div class="img_panel" title="pixi" style="display: block;">...</div> <div class="img_panel" title="mus">...</div> <div class="img_panel" title="flash">...</div> <div class="img_panel" title="dir">...</div> <div class="img_panel" title="rpi">...</div> <div class="img_panel" title="css">...</div> <div class="img_panel" title="nagraj">...</div> <div class="img_panel" title="ac" style="display: none;">...</div> </div> 

See, the ac element goes to the last one, doing the wrong order for the next iterations.

Decision

No need to rearrange div elements. Just use an array of headers and an index for the Next and prev handler.

Answer 2

 var ticker = $('.img_wrap'); $('.next').click(function () { //When the next button is clicked $('.img_panel:visible').fadeOut(1000, function() { //Fade out the current active image $(this).appendTo(ticker); //And move its div to the bottom of ticker ticker.children().first().show(function(){ //Then show the first div in ticker var artit = $(this).attr('title'); $(this).load(artit+'.txt'); }); }); $(ticker).hide().delay(1500).fadeIn(1000); }); 

Default order: pixi mus flash dir rpi ac css nagraj.

The problem with your code is that when the page is loaded and you select an image from the menu, it will lead you there. It is assumed that after it takes you there, the active div is at the top when it can be anywhere, including the middle one.

To solve this problem, you want to move all the divs in the ticker to the bottom to keep the original order pixi mus flash dir rpi ac css nagraj, but the one that is active is at the top, as it should be.

Your corresponding code is actually here when an item is selected in the menu:

 $('.work li').click(function(){ var clientitle = $(this).attr('title'); $('.work').fadeOut(500), $('.big_images').delay(500).fadeIn(); $('.img_panel[title="'+clientitle+'"]').fadeIn(); var cltxt = clientitle+'.txt' $('.img_panel').load(cltxt); }); 

Something like this should fix the problem:

 $('.work li').click(function(){ var clientitle = $(this).attr('title'); $('.work').fadeOut(500), $('.big_images').delay(500).fadeIn(); $('.img_wrap').children().each(function() { if ($(this).attr('title') == clientitle) { return false; } $(this).appendTo($('.img_wrap')); }); $('.img_panel[title="'+clientitle+'"]').fadeIn(); var cltxt = clientitle+'.txt' $('.img_panel').load(cltxt); }); 

Answer 3

It should be something like a bug with a bug or cross-browser, since it works well in IE-8 and in mozilla 18.0.2., The first image is downloaded only for the first round of the following buttons, after which it displays correctly, Possible error can be in the .children () function, as indicated here - What is the difference between child and child Nodes in JavaScript?

Answer 4

Suggestion ... Add the active class to the active .img_panel on the first visit, and then use something like this to navigate:

 var ticker = $('.img_wrap'); $('.next').off('click').click(function () { ticker.fadeOut(500,function(){ var $current = $('.img_panel.active'); var nextIndex = ($current.index()+1)<$('.img_panel').length?$current.index()+1:0; var $next = $('.img_panel').eq(nextIndex); $current.hide().removeClass('active'); $next.show(function(){ var artit = $(this).attr('title'); $(this).load(artit+'.txt',function(){ ticker.fadeIn(500)}).addClass('active'); }); }); }); 

For the previous function, just change

 var nextIndex = ($current.index()+1)<$('.img_panel').length?$current.index()+1:0; 

to

 var nextIndex = ($current.index())>0?$current.index()-1:$('.img_panel').length-1; 

I assumed that I would complete the task and the cycle ... (this was when I tested it). Remember to remove the active class from each element when nothing is active ...

Answer 5

It seems you have missed the fact that in the code you are initiating the transition of an empty div. When the transition is complete, you will start loading the content into this div.

So you should do something like this:

 var ticker = $('.img_wrap'); $('.next').click(function () { $('.img_panel:visible').fadeOut(1000, function(){ $(this).appendTo(ticker); var placeholder = ticker.children().first(); var artit = placeholder.attr('title'); placeholder.load(artit+'.txt', function(){$(this).show()}); }); }); 

Not sure if the code above will work right away, but you got this idea.