First image is become visible every time before next image is loaded

Question

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

First click any client image it's OK.

But if you click on next button every time then you can see. First the previous image is come then the next image is load.

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 am not so good is JS.

Any help is appreciated.

Which browser shows up this problem? – Javier Brooklyn Feb 17 '13 at 06:23 — Javier Brooklyn, Feb 17 '13 at 06:23

ATOzTOA · Accepted Answer · 2013-02-17T10:11:13.567

Here you go:

Analysis

1. 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. Click on "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 the header image for "AC". And they don't have the CSS display:none;, meaning those divs are visible. When you execute,

$('.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 next one is shown. During the transition period, both the current and the next items will be partially hidden, and the image in the background div shows.

Problematic 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);
});

Solution

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

Also, 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 on "AC" and then click Next, the code becomes this:

<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, making the order wrong for next iterations.

Solution

There is no need to rearrange the div elements. Just use an array of titles and a index to handler next and prev.

Thanks for your answer sorry but it's not helpful. But it's take my attention to what is going wrong. Here what i did when i click on .work li **$('.img_panel:visible').load(cltxt);** — sandeep, Feb 17 '13 at 13:37
@sandeep Your code (`$('.img_panel:visible').load(cltxt);`) won't work. Try clicking `Menu` and then clicking on an item and then `Next`. I can still see it in your website. The problem is, the div won't become `visible` until the `fadeIn` finishes. — ATOzTOA, Feb 17 '13 at 13:57

Lrdwhyt · Answer 2 · 2013-02-04T20:26:15.517

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

The default order is: pixi mus flash dir rpi ac css nagraj.

The problem with your code is that when the page is freshly loaded and you select an image from the menu, it will take you there. It assumes, once it has taken you there, that the active div is at the top, when it could be anywhere, including the middle.

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

Your relevant code is actually here, when an item is selected from 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);
});

@sandeep Are you sure? I tested it with Firebug myself and it worked. Make sure you're editing script/main.js and replacing `$(".work li").click()` completely - I don't see any changes there. — Lrdwhyt, Feb 05 '13 at 09:47
Sorry @Lrdwhyt for the late reply. Yes i replaced the code but it's not work. — sandeep, Feb 16 '13 at 16:54

score 2 · Answer 3 · edited May 23 '17 at 11:59

2

It must be something like a bug or cross-browser problem as it works good in IE-8 and in mozilla 18.0.2., the first image loading happens only for the first round of next buttons, after that it displays correctly. A possible bug could be in the .children() function as mentioned here - What is the difference between children and childNodes in JavaScript?

edited May 23 '17 at 11:59

Community

1
1

answered Feb 17 '13 at 06:30

Javier Brooklyn

624
3
9
25

Under linux debian 7.0 with Iceweasel 10.0.12 error arise. In fact the first time image are loaded from website it appears from top to bottom fully one image after the other, when going back and next over same images it shows properly like a wave from left to right. – philippe lhardy Feb 23 '13 at 15:52

xpy · Answer 4 · 2016-02-25T13:45:15.403

Suggestion... Add a class active to the active .img_panel when you first visit it, and then use something like this for the navigation:

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 supposed that will do the job and the loop... (it did when I tested it) Just remember to remove the active class from every element when nothing is active...

score 2 · Answer 5 · answered Feb 21 '13 at 12:11

It seems that you missed the fact that in your code you initiate the transition of an empty div. Once the transition has finished you start loading content into that 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 straight away, but you got the idea.

First image is become visible every time before next image is loaded

5 Answers5