Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: Ultra-simple slideshow wanted
Just a general point on placement of the Javascript calls (Tye’s #5 above); these days it’s better to place them immediately before the </body> tag rather than between the <head> tags. This is true for most JS including all JQuery, Mootools and other JS Framework scripts. There are some exceptions and these are usually spelled out clearly in the scripts’ documentation, Modernizr and Typekit for instance.
Last edited by joebaich (2011-06-28 15:22:41)
Offline
Re: Ultra-simple slideshow wanted
My slideshows are set up within article forms using UPM’s plug-in and its handy multiple article images.
With the Cycle plug-in, it seems that all the images would pop up for a fraction of a second before the script kicked in; to counter this, I gave all but the first image a class which CSS hid using .img-next{display:none}.
I did the previously mentioned stages 1 to 5, but not 6. Here’s the essentials from my article form:
<div class="slideshow">
<txp:upm_article_image limit="1"/>
<txp:upm_article_image offset="1" class="img-next"/>
</div>It makes a slideshow for each article from its article image list.
The only niggle is, all articles on screen have synchronized slideshows, in that they all flip at the same time. See here.
I also got it to work with image captions and simple overlaid next/previous buttons, which was nice.
Offline
Re: Ultra-simple slideshow wanted
hicks wrote:
The only niggle is, all articles on screen have synchronized slideshows, in that they all flip at the same time. See here.
Hey Hicks,
Did you try adding sync : 0 to your Cycle init code? It defaults to 1.
Last edited by joebaich (2011-06-28 17:18:26)
Offline
Re: Ultra-simple slideshow wanted
Joe,
That only applies if your slideshows have different classes or IDs. Mine are all the same. At some point, I will probably wangle some way of making them all different using article forms with the init codes with those slideshow classes based on article ID in the header, the code in those forms enclosed with a <txp:upm_if_article_image_list> to avoid unnecessaries inits, then apply the article ID-based class tags to the divs within the body article’s article form… off the top of my head.
Offline
Re: Ultra-simple slideshow wanted
simpler? core txp jquery.
<txp:images category="cycle" wraptag="div" class="slideshow" break="">
<txp:image />
</txp:images>
<script>
$(function(){
$('.slideshow img:gt(0)').hide();
setInterval(function(){$('.slideshow :first-child').fadeOut(3000).next('img').fadeIn(3000).end().appendTo('.slideshow');}, 6000);
});
</script>forgot the css…
div.slideshow{
float:right;
clear:none;
position:relative;
height:300px;
width:500px;
overflow:hidden;
}
.slideshow img {
position:absolute;
left:0; top:0;
width:100%;
height:auto;
}Last edited by mrdale (2011-06-28 18:08:59)
Offline
Re: Ultra-simple slideshow wanted
Turned out Cycle’s sync setting had nothing to do with the sync I was on about; of course, it was its next designation. I made an article form:
<txp:upm_if_article_image_list>
<script type="text/javascript">
$(document).ready(function() {
$('#a<txp:article_id/>').cycle({
fx: 'fade',
speed: 100,
timeout: 3000,
next: '#a<txp:article_id/>',
pause: 1
});
});
</script>
</txp:upm_if_article_image_list>and put articles in the header with that form, disallowing form overrides. Then I gave any slideshow divs an id="a<txp:article_id/>" in the regular article forms. Works now. Niggle gone. I guess it might have worked with the $('.slideshow').cycle({ still in there rather than $('#a<txp:article_id/>').cycle({ but if it ain’t broke…
Offline
Re: Ultra-simple slideshow wanted
mrdale wrote:
simpler? core txp jquery.
Very, very nice MrDale and elegant too. It’s the core jQuery in general that still eludes me. Time to get the long burning candles out and do some old fashioned study.
Joe
Offline
Re: Ultra-simple slideshow wanted
Mr Dale,
What would your code replace and discard in Tye’s how-to? I’m fairly clueless at scripting; I’m more of a cut-n-paste-n-alterer.
Chris.
Offline
Re: Ultra-simple slideshow wanted
hicks wrote:
What would your code replace and discard in Tye’s how-to?
It’s a straight replacement, the only benefit of mine is one less js library, no need to…
<!-- include Cycle plugin -->
<script type="text/javascript" src="<txp:site_url />js/jquery.cycle.min.js"></script>Offline