donboe
June 27, 2013, 6:38am
1
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?
donboe
June 27, 2013, 8:24am
3
Hi Pullo :). This is the page . And the menu Item is Hemingway!
Hi donboe,
Either the link is wrong, or the site is down
donboe
June 27, 2013, 9:12am
5
Hi Pullo. There was indeed some kind of kick-up on the server but here it is again. Sorry for the inconvienence
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?
donboe
June 27, 2013, 9:48am
7
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)
Cool
Can you point me to the code used to initialize your slideshow?
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.
donboe
June 27, 2013, 11:03am
11
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 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:
<!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 © 2013 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 © 2013 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>