-1

I'm a newbie in Javascripting so plase bear with me anyway here is my question:

Here is the site in question : http://jemmarieann.com/flipbookslideshow/marcbuils-Flippage-c46f6d1/exemples/exemples3.html

So I used this premade Jquery: http://marcbuils.github.io/Flippage/

  1. The problem is to turn a page you must click the image I want it so the images flip automatically every 3-5 seconds or so.

    What I was able to do was automatically turn page 1 to page 2 but nothing happens after that. I'm pretty sure I'm missing a lot since I'm a newbie.

  2. I was able to make it flip automatically with the help of dreamweiver but it stops when it reaches the last image how do I make it go back to the first image and loop?

         <script type="text/javascript">



    setInterval(check, 1000); // trigger check function every 1 sec

    function check()

   {

      var $nextItem = $('.exemples.active')
      .trigger('next')
      .removeClass('active')
      .next('.exemples');


   if ($nextItem.length == 0) $nextItem = $('.exemples').first(); 

       $nextItem.trigger('next').addClass('active');

    };



   </script>

Here is the body code 

<body>
<div>
<div id="wrapper">
<div class="exemples">
    <div><img src="img/1.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/1.jpg" style="margin-left: -683px;" /></div>
    <div><img src="img/FA_WEB1B.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/FA_WEB1B.jpg" style="margin-left: -683px;" /></div>
    <div><img src="img/2.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/2.jpg" style="margin-left: -683px;" /></div>
    <div><img src="img/front.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/front.jpg" style="margin-left: -683px;" /></div>
    <div><img src="img/3.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/3.jpg" style="margin-left: -683px;" /></div>
    <div><img src="img/lopulent5.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/lopulent5.jpg" style="margin-left: -683px;" /></div>
  </div>
  </div>
            <div><a href="#" onClick="$('.exemples:eq(0)').trigger('previous'); return false;">Previous</a> - <a href="#" onClick="javascript:$('.exemples:eq(0)').trigger('next'); return false;">Next</a></div>
        </div>  
</body>
Community
  • 1
  • 1
Kitsu
  • 64
  • 4

1 Answers1

0

I have checked the plugin and its functionality, i guess you need to auto trigger the next option automatically.

Im doing it this way 

setTimeout(check, 1000); // trigget check function every 1 sec
function check()
{
    $('#exemples').trigger('next');
}
dreamweiver
  • 6,002
  • 2
  • 24
  • 39
  • I tried this and it has the same result, only flips from image 1 to image 2. – Kitsu May 11 '13 at 05:00
  • Okay Managed to get it to work by using setInterval instead of setTimeout the problem is now making the slideshow loop – Kitsu May 11 '13 at 05:15
  • Editted the question I hope what I'm trying to do is clearer now :) – Kitsu May 11 '13 at 10:08
  • @Kitsu: what exactly is the status of question now? – dreamweiver May 12 '13 at 07:46
  • Well I still can't figure out how to make the animation loop ... so it's partly answered thanks to you but yeah I still haven't figured out how to loop it and if there is some way I can make the jquery responsive... – Kitsu May 12 '13 at 10:54
  • @Kitsu: Can u Simulate the same on jsfiddle, so that i can give it a try :) – dreamweiver May 13 '13 at 05:44
  • I tried, to set up a fiddle but even that I couldn't do right...http://jsfiddle.net/Kitsu/bSNDq/ I have no idea how to link the external scripts but everything necessary resources that I used are located here: http://jemmarieann.com/flipbookslideshow/marcbuils-Flippage-c46f6d1/ I managed to link the images but I don't know how to link the external Jquery – Kitsu May 13 '13 at 08:18