display thumb gallery (9thumbs) and use a slider between pages..

lister · 2011-06-11 13:39:38

Ok, I have my basic home page structure displaying 9 thumbs. each thumb displays a thickbox/equivalent image. I want each thumb/image to be a post and only ever showing nine thumbs at one time. But I want to implement a slide which allows the user to click through to display the other thumbs (9 at a time). Here is an example: http://codecanyon.net/item/tonic-gallery-jquery-xml-portfolio-gallery/full_screen_preview/120710
How easy is this to implement in text pattern, im a little unsure where to start..?

lister

jakob · 2011-06-11 21:40:31

Hi lister, I had a vague feeling I’d seen a similar question before … and it is yours too. Michael gave you a pretty good template to work from in that post which you can work from to create the portfolio.xml. Or are looking for some other kind of info?

One further avenue to explore: rah_external_output

Last edited by jakob (2011-06-11 22:03:29)

michaelkpate · 2011-06-12 02:27:04

If you look at the source Jakob links to, it contains more than 12 items butm according to the example page, “Default Settings, 12 items per page” there is some setting somewhere. Just find that and change it to 9, and the template that I created for you before should work.

Last edited by michaelkpate (2011-06-12 02:27:21)

GugUser · 2011-06-12 03:47:44

lister schrieb:

I want each thumb/image to be a post and only ever showing nine thumbs at one time.

Your example in codecanyon is (in your case) a simple article list with 34 items (article images). The rest is a jQuery thing.

jakob · 2011-06-12 07:25:31

according to the example page … there is some setting somewhere

In the third example of the gallery demo, they use the following code to limit the number of items per page to 10:

$('#portfolio').portfolioSetter({xmlSource:'portfolio2.xml', pageWidth:520, pageHeight:190, itemsPerPage:10});

… so for your case you’d need itemsPerPage:9. I’m not sure if the pageWidth and pageHeight are necessary but can’t hurt. If you’ve purchased the gallery, it says it comes with a documentation folder.

lister · 2011-06-12 10:46:13

Yeah sorry. I posted that a while ago. I setup the xml version which worked fine, but thought I’ll try textpattern to upload the images and add these to the page. Once the page had exceeded 9 thumbs it would generate a swipe feature using jquery animation. I gather I can do this easily with a simple article list and article images (display images).

I sort of get textpattern, but sometimes I head straight in and don’t plan it enough…

anyway, thanks for your help guys..

Last edited by lister (2011-06-12 10:50:18)

michaelkpate · 2011-06-12 13:25:27

If nothing else works, take the original code I wrote and change the the article_custom to:

<txp:article_custom section="article" limit="9">

lister · 2011-06-14 11:06:43

Thanks guys, I’m gonna explore textpattern a little more and have thumbs linked to the larger version of the image using an article form. But have them view as lightbox. Limit my page to 9 thumbs and have it tie in with the jquery animation / pagination. I’m just gathering all the necessary code to get me going. I shouldn’t need any textpattern plugins to just have a thumb click through to the lightbox (or equivalent) should I?.

Textpattern CMS

Textpattern CMS support forum

#1 2011-06-11 13:39:38

display thumb gallery (9thumbs) and use a slider between pages..

#2 2011-06-11 21:40:31

Re: display thumb gallery (9thumbs) and use a slider between pages..

#3 2011-06-12 02:27:04

Re: display thumb gallery (9thumbs) and use a slider between pages..

#4 2011-06-12 03:47:44

Re: display thumb gallery (9thumbs) and use a slider between pages..

#5 2011-06-12 07:25:31

Re: display thumb gallery (9thumbs) and use a slider between pages..

#6 2011-06-12 10:46:13

Re: display thumb gallery (9thumbs) and use a slider between pages..

#7 2011-06-12 13:25:27

Re: display thumb gallery (9thumbs) and use a slider between pages..

#8 2011-06-14 11:06:43

Re: display thumb gallery (9thumbs) and use a slider between pages..

Board footer