jquery fade out and on click function

Question

hope you are all doing well.

So I have gallery that is not using any plugin

 $(document).ready(function() {
 var index =1;
    var images = ['1.jpg','2.jpg','3.jpg'];
    var caption_text = ["title1","title2","title3"];
    function rotateImage()
    {

       $('#gallery').fadeOut('fast', function() 
      { 
        $(this).attr('src','<?php echo base_url()."assets/highlight/";?>'+ images[index]);
        $('span').text(caption_text[index]);
        $(this).fadeIn('fast', function() 
        { 
          if (index == images.length-1)
          {
            index = 0;
          }
          else
          {
            index++;
          }

        });
      });

    } 
    setInterval (rotateImage, 2500);

$('.thumb').on('click', function() {
        var img = $('<img />', {src    : this.src,
                                'class': 'highlight_img'
                  });
        var imageTitle = $(this).attr("title");      
        $('.highlight').html(img).show();
        $('.highlight').append("<br/><span class='highlight_caption'>"+imageTitle+"</span>");
        setInterval (rotateImage, 5000);  
    });
 });

and this is my html

<div class='col-md-12 highlight'>
    <img id='gallery' src='<?php  echo site_url('assets/highlight/1.jpg');?>' height='300' class='highlight_img'/><br/>
    <span id='highlight_caption' class='highlight_caption'>title1</span>
</div>

<div class='list'>
 <div><img class='thumb' src='<?php  echo site_url('assets/highlight/1.jpg');?>' height='75' title='title1'/></div>
 <div><img class='thumb' src='<?php  echo site_url('assets/highlight/2.jpg');?>' height='75' title='title2'/></div>
 <div><img class='thumb' src='<?php  echo site_url('assets/highlight/3.jpg');?>' height='75' title='title3'/></div>

Now, I can do the image rotation when the page load with no problem. Also, when i click the image thumbnail, the #gallery div will also change image based on the thumbnail I click

But, when I invoke the thumbnail on click function, the rotateImage() does not work anymore, I need to refresh the page to get the image rotating again.

How should I code to perform this?

Thank you!

EDIT:

Sorry for not being clear My question is, I have put "setInterval (rotateImage, 5000);" inside .thumb on click() function, I know it's running because I tried to console.log, and the script does execute, BUT why the image isn't changing?

with this question you wont get much answeres. no one will code for you. they will help you to find bugs so change your question to something like `how can i avoid this issue` or some like this... — Dwza, Jul 07 '14 at 06:31

midstack · Accepted Answer · 2014-07-07T07:07:03.023

Can you try this;

JQUERY

 $(document).ready(function() {
    var index         = 1,
        images        = ['300x300','290x300','280x300'],
        caption_text  = ['title1','title2','title3'],
        timer         = null;

    function rotateImage () {

       $('#gallery').fadeOut('fast', function() { 
       $(this).attr('src','http://www.placehold.it/'+ images[index]);
       $('span').text(caption_text[index]);
       $(this).fadeIn('fast', function() { 
           if (index == images.length-1) {
             index = 0;
           } else {
             index++;
           }
        });
      });
    } 
timer = setInterval (rotateImage, 2500);

$('.thumb').on('click', function() {
    var $this      = $(this),
        img        = $this.attr('src'),
        imageTitle = $this.attr('title');      
    $('.highlight')
        .children('img')
        .attr('src',img)
        .show()
        .end()
            .children('.highlight_caption')
                .text(imageTitle);
        clearInterval(timer);
        setInterval (rotateImage, 5000);  
    });
 });

HTML

<div class='col-md-12 highlight'>
    <img id='gallery' src='http://www.placehold.it/300x300' height='300' class='highlight_img'/>    <br/>
    <span id='highlight_caption' class='highlight_caption'>title1</span>
</div>

<div class='list'>
    <div><img class='thumb' src='http://www.placehold.it/400x400' height='75' title='title1'/>    </div>
 <div><img class='thumb' src='http://www.placehold.it/500x500' height='75' title='title2'/></div>
 <div><img class='thumb' src='http://www.placehold.it/350x350' height='75' title='title3'/></div>

http://jsfiddle.net/DKw8D/6/

jquery fade out and on click function

1 Answers1