Slideshow with images and text

Hi all I have a sliding (horizontal, vertical, diagonal) website. On one of the slides I have a fade in/out slide show with images and text blocks, for wich I use the following function:


<script>
$(function(){
	$('.fadein p:gt(0)').hide();
	setInterval(function(){$('.fadein > :first-child').fadeOut().next('p').fadeIn(1400).end().appendTo('.fadein');}, 8000);
});
</script>

What I would like to accomplish is that the slideshow only starts when the menu item (#item8) for that slide is clicked and that it will stop when another menu item (#2 - #7) is clicked. Because now the slideshow start as soon as you land on the page, and keeps continueing when I navigate to another slide. How would I do that?

Thank you in advance

Hi donboe,

Do you have a link to the page in question?

Hi Pullo :). This is the page. And the menu Item is Hemingway!

Hi donboe,

Either the link is wrong, or the site is down :frowning:

Hi Pullo. There was indeed some kind of kick-up on the server but here it is again. Sorry for the inconvienence :frowning:

Hi donboe,

Starting/resuming the slideshow is easy enough. That should happen when a user clicks on “Hemmingway”.
Would it maybe be a good idea to pause the slideshow when a user clicks on one of the other links (e.g. Artwork, Video, The Artist, Counterfeit, Gallery, Contact) to navigate away from the page?

Hi Pullo. Yes that is what I ment with:

What I would like to accomplish is that the slideshow only starts when the menu item (#item8) for that slide is clicked and that it will stop when another menu item (#2 - #7) is clicked.

#item8 is Hemingway :slight_smile: and #item2 - #item7 are the others (e.g. Artwork, Video, The Artist, Counterfeit, Gallery, Contact)

Cool :slight_smile:

Can you point me to the code used to initialize your slideshow?

Hi Pullo,

<script>
$(function(){
$(‘.fadein p:gt(0)’).hide();
setInterval(function(){$(‘.fadein > :first-child’).fadeOut().next(‘p’).fadeIn(1400).end().appendTo(‘.fadein’);}, 8000);
});

This should be the one!

Looks good, but as you can see, it fires on page load and loops endlessly.

What about moving that into a function, e.g.

function startSlideshow(){
  $('.fadein p:gt(0)').hide();
  setInterval(function(){$('.fadein > :first-child').fadeOut().next('p').fadeIn(1400).end().appendTo('.fadein');}, 8000);
}

and starting it when the user clicks Hemmingway, e.g.

$(".hemmingway").on("click", function(){
  startSlideshow();
});

Let me know if that works, then we can see about pausing it when the user navigates away as a second step.

Hi Pullo, I don’t know what is happening but now I see the first photo and last text block on top of each other! Should I hide the .fadein div in the first place?

Hi donboe,

Could you please make a demo page for me with only the Hemmingway menu point (plus slideshow) and one other menu point, removing all other unnecessary content.

Hi Pullo. Here it is!

Hi donboe,

So, it helps if one spells Hemingway correctly :slight_smile:

Here’s a link to a working example.

And to be complete, here’s the code:

<!doctype html>
<html>
  <head>
    <base href="http://diem.sothenwhat.com" />
    <meta charset="utf-8">
    <title>Peter Diem | Artist and Museum in Amsterdam</title>
    <link rel="stylesheet" type="text/css" href="css/cssBase.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css?v=2.1.4" media="screen" />
    </head>

  <body>
    <div id="wrapper">
      <div id="mask">
        <div id="item7" class="item">
          <div class="header">
            <ul class="menu">
                <li><a href="#item8" class="hemingway panel" title="Hemingway">Hemingway</a></li>
                <li><a href="#item7" class="cont panel" title="Contact">Contact</a></li>
            </ul>
          </div>

          <div class="container">
            <div class="main">
              <div class="table">
                <div id="contact">
                  <div class="contact">
                    <div  id="cf_layout1372355710864" style="">
                      <div  id="cf_layoutarea1372355710865" style="overflow:hidden;">
                        <form id="contact-form" action="/index2.cfm" method="post" onsubmit="return ColdFusion.Ajax.checkForm(this, _CF_checkCFForm_1,'cf_layoutarea1372355710865')">
                          <input name="name" id="name"  type="text" placeholder="name"  class="contactinput"  />
                          <input name="email" id="email"  type="text" placeholder="email"  class="contactinput"  />
                          <input name="email" id="email"  type="text" placeholder="telephone"  class="contactinput"  />
                          <input name="email" id="email"  type="text" placeholder="subject"  class="contactinput"  />
                          <textarea name="comment"  id="comment" placeholder="comments" class="contacttext" ></textarea>
                          <input name="submit_button" id="submit_button"  type="submit" value="Send" class="button"  />
                          <input name="reset_button" id="reset_button"  type="reset" value="Reset" class="button"  />
                        </form>
                      </div>
                    </div>
                  </div>
                  <div class="contactR">
                    <h2>Address</h2>
                    Diem Gallery<br />Prinsengracht 821<br />1017 KA Amsterdam<br />The Netherlands<br /><br />Tel: +31 (0)20 623 50 00
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="footer">
            <p>Copyright &copy;  2013 &nbsp;&nbsp;Peter Diem. All rights reserved.</p>
          </div>
          <img class="background-image" src="page_backgrounds/contact.jpg">
        </div>
        <div id="item8" class="item">
          <div class="header">
            <ul class="menu">
              <li><a href="#item8" class="hemingway panel" title="Hemingway">Hemingway</a></li>
              <li><a href="#item7" class="cont panel" title="Contact">Contact</a></li>
            </ul>
          </div>
          <div class="container">
            <div class="main">
              <div class="table">
                <div class="fadein">
                  <p><img src="hemmingway/hemingway1.jpg"></p>
                  <p class="textslide">A meeting between the American author Ernest Hemingway (1899-1961) and the Dutch artist Peter Diem.</p>
                  <p><img src="hemmingway/hemingway2.jpg"></p>
                  <p class="textslide">In the twenties, Hemingway was accompanied by his friend, the painter Waldo Peirce, on his deep-sea fishing trips off the coast of Florida.</p>
                  <p><img src="hemmingway/hemingway3.jpg"></p>
                  <p class="textslide">Waldo recorded these holidays in Key West with his camera: photographs he later passed on to his son, Michael, an artist and photographer who now lives in Brussels.</p>
                  <p><img src="hemmingway/hemingway4.jpg"></p>
                  <p class="textslide">Peter Diem is a friend of Michael Peirce and managed to persuade him to take part in a unusual fusion of reality and artistic staging in 1999 on the occasion of the 100th anniversary of Hemingway's birth.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="footer">
            <p>Copyright &copy;  2013 &nbsp;&nbsp;Peter Diem. All rights reserved.</p>
          </div>
          <img class="background-image" src="page_backgrounds/video.jpg">
        </div>
        <div class="item"></div>
        <div class="clear"></div>
      </div>
    </div>
    <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.scrollTo.js"></script>
    <script>
      $(document).ready(function() {
        var i;

        $('a.panel').click(function () {
          $('a.panel').removeClass('selected');
          $(this).addClass('selected');
          current = $(this);
          $('#wrapper').scrollTo($(this).attr('href'), 800);

          $('.fadein p:gt(0)').hide();
          if($(this).attr("class").match(/hemingway/)){
            i = setInterval(function(){$('.fadein > :first-child').fadeOut().next('p').fadeIn(1400).end().appendTo('.fadein');}, 3000);
          } else {
            clearInterval(i);
          }
          return false;
        });
      });
    </script>
  </body>
</html>