This is my website .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 e 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.

This is my website http://www.alienchela./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 e 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.

• javascript
• jquery

• Which browser shows up this problem? – Javier Brooklyn Commented Feb 17, 2013 at 6:23

5 Answers 5

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

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

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?

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.

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