Ultra-simple slideshow wanted

hicks · 2010-07-23 01:09:01

Hello.

My site’s posts only have one image as it is, designated by article_image.

What I’d really like is to have a dead-simple slideshow in that place, when I have more than one same-size image to show. I envision it flipping slides after a few seconds, and/or users being able to flip ahead a slide by clicking on the image. No extra navigation would be necessary.

I use hak_article_image on another site to get multiple article images in a post; with that, you can just stick in a list of article IDs and it posts them all up. Is there something that simple for a slideshow as simple as I want it?

Here’s a Dreamweaver-generated page on my site that uses a click-on-image to flip ahead. See? Simple. That’s what I want.

Thanks all,

Chris

joebaich · 2010-07-23 04:26:49

Hello Chris

You could use jQuery Cycle Plugin to power the slide show. It is powerful with lots of options but very well documented and so easy to set up and use on your site. There are some plug-ins like jk_article_images that facilitate multiple article images but I haven’t used any of them. Better perhaps, would be to use wet_for_each_image and use image categories read from a custom field to generate your list of images for each article. Wet’s instructions for that are clear and easy to understand.

Good Luck

Joe (Ex UK too)

jsoo · 2010-07-23 11:51:37

I second Joe’s recommendation for jQuery Cycle. Using it with hak_article_image, which you’re already using, would be simple: Cycle simply wants the images grouped together in a div designated by class.

The only challenge might be distinguishing between articles with single images and articles with multiple images. soo_image is one option; it checks for this. Or you could toss in a bit of raw PHP to check for the presence of one or more commas in the article image field.

hicks · 2010-08-10 03:37:13

Thanks both. I looked at that Cycle plugin (before I got bogged down with paying work, apologies for late thanks) and I think it might be just the ticket. I’ll give it a go when I get a proper chance.

CodeWalker · 2010-08-13 09:49:41

Cycle plugin is ok. Ive used nathan searle’s looped slider on my own textpattern powered portfolio. Very easy to setup.

tye · 2010-08-13 12:02:53

jQuery Cycle is the way to go – its so easy, even I got it set up :)

Mal is also active in the using jquery plugins forum and is really helpful if start to experiment with it more

hicks · 2010-09-11 03:29:30

Thanks all. I got it working with Cycle and hak_article_image within about twenty minutes; all very simple, just the way I wanted it.

helmz · 2010-09-16 00:45:47

Is it possible to use lightbox, fancybox or something like that?

Last edited by helmz (2010-09-16 00:47:27)

StanInStudio · 2011-06-28 05:44:10

Hi Guys.. My hope is that most or all of you are still engaged in TextPattern. I’m discovering it difficult to find current, resolved issues addressing setting up a database-driven gallery, slideshow mechanism. It appears from the comments rendered here jQuery Cycle is a good choice with hak_article_image.

After downloading and following the documentation trail, it appears I am to simply copy the code from the samples into a TextPattern article and then simple change the hard-coded image references to image files on my site in oder for the slideshow to work. Am I missing something?

I hope, at minimum, the following users are available for comment/support: hicks, tye, jsoo, joebaich However, I would appreciate anyone with proven results in the way of TextPattern-specific setup instructions and of course Sample Code pointing to a real-live, working example. I’ve been sorting through various CMSs from Joomla to Drupal and then WordPress, a straight up blogging meachism which appears to be great for webpages except the handling of photo gallery and slideshow behaviors. My exploring WordPress at the recommendation of a friend has led me now to TextPattern.

My hope is to immediately (with minimal investment in time) do as good a job as I’ve just accomplished in WordPress over the weekend. In a couple of hours, I managed to develop sleek, beautiful pages using ready-made templates with a single image. The configuration and setup was easy as pie. But I now need to quickly add a multi-image article of my welcome page and a fully functional suite of photo galleries displaying various kinds of images grouped into meaningful categories.

Does TextPattern offer an quick solution to address my needs?

Last edited by StanInStudio (2011-06-28 05:51:08)

tye · 2011-06-28 06:01:25

If you give me an hour or so – I can help you with this

tye · 2011-06-28 08:01:09

OK – Just to reproduce the same slide show fade effect that is contained in the example.html in the cycle download – this is how I would do it. First the method, then the explanation (I hope).

1 – Create an image category named to your liking, eg: cycle

2 – Upload all your images using textpattern and assign them to this category (I downloaded and used the cycle example images so I didn’t have to change any css or any other setting)

3 – Go to Presentation —> Forms and Create a new ‘misc’ form, then enter the following:

<txp:image />

4 – Go to Presentation —> Style and add the css from example.html

5 – Go to Presentation —> Pages and add the required javascript calls in the head of the page you want your slideshow to appear:

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<!-- include Cycle plugin -->
<script type="text/javascript" src="<txp:site_url />js/jquery.cycle.min.js"></script>

<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});
});
</script>

6 – Still on the same page – add the following to your page inside the body tags where you would like the slideshow to display:

<div class="slideshow">
<txp:images category="cycle" form="cycle-slideshow" break="" />
</div>

OK – now for the explantion (no laughing)

The image category created at the beginning contains all the images you want in the slideshow – so add/remove at will.

The tag used in #6 calls these images and asks each image to be processed by the form we created in #3.

The tag used the form in #3 says outputs a html img tag

The tag used in #6 outputs all the images in the category cycle as html img tags. The break=”“ prevents any html surrouding these html img tags… if this was left out – the default would be <br />

In #5 I used the tag txp:site_url – I find this works better than working out path issues… it outputs the site url entered in admin – you do not need a trailing slash

Thats it – that recreates exactly the slideshow in example.html, but using textpattern for serving the images

The Image Tags which you would need to look at are all explained here

Hopefully someone better qualified will correct any mistakes I have made.

Now – that was a brief intro into adding Jquery Cycle and using categories to show images… with the tags above you can also use this to show article images (images associated with an article). You can also use this superb method to attach a category to an article.

And if you find the the standard txp image tags are not sufficient, the enter smd_gallery” – the only thing is doesn’t do is make a coffee (or crack a beer) whilst you are using it.

If non of the above covers what you want, or you need more information – but most of the txp tag info can be found here – or just ask again

Hope that helps

Bloke · 2011-06-28 08:11:44

Excellent write-up Tye. One alternative if you’re not thinking of re-using the Form is to skip step 3 (create Form cycle-slideshow) and do step 6 as a container tag like this:

<txp:images category="cycle" wraptag="div" class="slideshow" break="">
   <txp:image />
</txp:images>

Save a Form, Save the World :-)

Last edited by Bloke (2011-06-28 08:14:45)

Textpattern CMS

Textpattern CMS support forum

#1 2010-07-23 01:09:01

Ultra-simple slideshow wanted

#2 2010-07-23 04:26:49

Re: Ultra-simple slideshow wanted

#3 2010-07-23 11:51:37

Re: Ultra-simple slideshow wanted

#4 2010-08-10 03:37:13

Re: Ultra-simple slideshow wanted

#5 2010-08-13 09:49:41

Re: Ultra-simple slideshow wanted

#6 2010-08-13 12:02:53

Re: Ultra-simple slideshow wanted

#7 2010-09-11 03:29:30

Re: Ultra-simple slideshow wanted

#8 2010-09-16 00:45:47

Re: Ultra-simple slideshow wanted

#9 2011-06-28 05:44:10

Re: Ultra-simple slideshow wanted

#10 2011-06-28 06:01:25

Re: Ultra-simple slideshow wanted

#11 2011-06-28 08:01:09

Re: Ultra-simple slideshow wanted

#12 2011-06-28 08:11:44

Re: Ultra-simple slideshow wanted

Board footer