SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    Code:
    <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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi donboe,

    Do you have a link to the page in question?

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo . This is the page. And the menu Item is Hemingway!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi donboe,

    Either the link is wrong, or the site is down

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo. There was indeed some kind of kick-up on the server but here it is again. Sorry for the inconvienence
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  6. #6
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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?

  7. #7
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 and #item2 - #item7 are the others (e.g. Artwork, Video, The Artist, Counterfeit, Gallery, Contact)
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  8. #8
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Cool

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

  9. #9
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  10. #10
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Looks good, but as you can see, it fires on page load and loops endlessly.

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

    Code JavaScript:
    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.

    Code JavaScript:
    $(".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.

  11. #11
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  12. #12
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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.

  13. #13
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo. Here it is!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  14. #14
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi donboe,

    So, it helps if one spells Hemingway correctly

    Here's a link to a working example.

    And to be complete, here's the code:

    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •