CODEWITHSUNDEEP
javascriptjqueryhtml
Stoyan
Stoyan

Reputation: 104

Simple jQuery slideshow repeats only one element

I have 3 img tags and I want to have them in slideshow but somehow it does not work as expected. Only the child of the fade div repeats with the fadeIn method.

HTML:

<div id="frame">
  <div class="imgwrap">
    <div class="fade">
    <img src="http://i.imgur.com/7zfqoYw.jpg"/>
    <img src="http://i.imgur.com/Nwz97Qt.jpg"/>
    <img src="http://i.imgur.com/inXJQNZ.jpg"/>
    </div>
  </div>
</div>

Jquery:

$(function SlideShow(){
  $('.fade:first-child').appendTo('.fade');
    setInterval(function()
  {
    $('.fade:first-child').hide().appendTo('.fade').fadeIn(2000).end();
  },4000);
});

In addition I am trying to find a way, this function related with input text form to be appended together with the slideshow.

JavaScript :

var num=1;
text1 = "Picture One [TEXT]"
text2 = "Picture Two [TEXT]"
text3 = "Picture Three [TEXT]"

function textSlideShow()
{
num=num+1
if (num==3)
{num=1}
document.joe.burns.value=eval("text"+num)
}

JSFiddle:

http://jsfiddle.net/C3f6J/2/

Upvotes: 0

Views: 115

Answers (3)

kadavre
kadavre

Reputation: 96

I think you want to select the image here, not the div.fade like this.

$(function SlideShow(){
  $('.fade img:first-child').appendTo('.fade');
    setInterval(function()
  {
    $('.fade img:first-child').hide().appendTo('.fade').fadeIn(2000).end();
  },4000);
});

Upvotes: 2

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

First, in you slideshow, you selector is wrong. You want to target the first-child of .fade. Just add a space : 

$('.fade :first-child')

Then your CSS transition will mess with the fadeIn. Be more specific:

   transition:width .25s ease-in-out, height .25s ease-in-out, margin .25s ease-in-out;
  -webkit-transition:width .25s ease-in-out, height .25s ease-in-out, margin .25s ease-in-out;
  -moz-transition:width .25s ease-in-out, height .25s ease-in-out, margin .25s ease-in-out;
  -o-transition:width .25s ease-in-out, height .25s ease-in-out, margin .25s ease-in-out;
  -ms-transition:width .25s ease-in-out, height .25s ease-in-out, margin .25s ease-in-out;

After the transition, call your text slideshow function :

$('.fade :first-child').appendTo('.fade').hide().fadeIn(2000).end();
textSlideShow()

Also change you slideshow function to that :

function textSlideShow()
{
    num=num+1
    if (num>3) num=1;
    $('input[NAME=burns]').val(window['text'+num])
}

Everything work fine : http://jsfiddle.net/C3f6J/28/

Upvotes: 2

Paul D.
Paul D.

Reputation: 2022

I think you're trying to go to fast on this : 

$('.fade:first-child').hide().appendTo('.fade').fadeIn(2000).end();

You're not selecting the image :

$('.fade img:first-child').hide().appendTo('.fade').fadeIn(2000).end();

This works better for me. Also, you're not calling your text function :

setInterval(function()
{
    $('.fade img:first-child').hide().appendTo('.fade').fadeIn(2000).end();
    textSlideShow(); // add this line to update your text
},4000);

And finally your text function doesn't properly handle cycling : 

function textSlideShow()
{
    if (num==3)
    {
        num=1;
    }
    else{
        num=num+1;
    }
    document.joe.burns.value=eval("text"+num); // why not a table instead of an eval ?
}

Upvotes: 1

Related Questions