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
    1,967
    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,352
    Mentioned
    179 Post(s)
    Tagged
    9 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
    1,967
    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,352
    Mentioned
    179 Post(s)
    Tagged
    9 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
    1,967
    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,352
    Mentioned
    179 Post(s)
    Tagged
    9 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
    1,967
    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,352
    Mentioned
    179 Post(s)
    Tagged
    9 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
    1,967
    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,352
    Mentioned
    179 Post(s)
    Tagged
    9 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
    1,967
    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,352
    Mentioned
    179 Post(s)
    Tagged
    9 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
    1,967
    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,352
    Mentioned
    179 Post(s)
    Tagged
    9 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
  •