Image gallery with arrow navigation

muffinmaker · 2013-01-12 13:33:09

Hi there,

I would like to build a gallery like the one on hechenblaikner.at

This is what I’m trying to achieve:

Navigation with arrows
no thumbnails
preferably driven by image categories
if possible without using plug ins

Is there a way to do it with textpattern “out of the box” or do I have to look for a plug in? And if this only works with a plug in, maybe someone has done this before and can recommend one?

I want to apologize in advance, if this topic has already been covered in the forums. I tried the search, but didn’t get too far…

Any hint is highly appreciated,
Tobias

colak · 2013-01-12 14:47:23

the particular slideshow you link to is slightly strange as the images are all javascripted. As a rull of thumb you can use almost all jquery galleries by just using native tags.

joebaich · 2013-01-12 16:08:11

Any number of jQuery driven ‘sliders’ can be used to produce what you are looking for. Generally, all you need to set up the images are the two tags <txp:images /> and <txp:image />.

For example, to target a list with an id = “featured” made up of a list of all the images with category=‘my-category, you can do something like this:

<txp:images category="my-category" wraptag="div" break ="" html_id="featured"><txp:image /></txp:images>

Last edited by joebaich (2013-01-12 19:37:31)

muffinmaker · 2013-01-12 18:42:22

Thank you guys for the quick reply. So I guess I have to wrap my head around jQuery finally.
I think I have understood the concept of txp:images where I can choose images by category. This means, that the txp:image tag within txp:images can be used by jQuery representing an otherwise manually created list of img tags? This sounds exciting (if I got it right… ;)

joebaich · 2013-01-12 19:47:39

Yep, you have that right.

Flexslider is a good jQuery slider to try out. It’s well documented, has good options and it is straightforward to adapt the <txp:images category=“my-category><txp:image /></txp:images> construct to fit. It’s also good for tablets and smartphones because it supports “touch-swipe” gestures.

colak · 2013-01-13 07:36:24

muffinmaker wrote:

Thank you guys for the quick reply. So I guess I have to wrap my head around jQuery finally.
I think I have understood the concept of txp:images where I can choose images by category. This means, that the txp:image tag within txp:images can be used by jQuery representing an otherwise manually created list of img tags? This sounds exciting (if I got it right… ;)

yes:) Here an untested code I posted a few minutes ago responding to a similar question.

muffinmaker · 2013-01-14 06:31:01

Flexslider is quite amazing. And (well, I guess that’s why it’s called flexslider) tremendously flexible. ;)

This is how it worked out for me:

<div class="flexslider">
<txp:images category="my_category" wraptag="ul" class="slides" break="li" >
<txp:image height="0" width="0" />
</txp:images>
</div>

I’d never imagined, that it’s that easy. Amazing!
Another door pushed open on my journey through the Textpattern building. ;) Thanks again for your help!

Textpattern CMS

Textpattern CMS support forum

#1 2013-01-12 13:33:09

Image gallery with arrow navigation

#2 2013-01-12 14:47:23

Re: Image gallery with arrow navigation

#3 2013-01-12 16:08:11

Re: Image gallery with arrow navigation

#4 2013-01-12 18:42:22

Re: Image gallery with arrow navigation

#5 2013-01-12 19:47:39

Re: Image gallery with arrow navigation

#6 2013-01-13 07:36:24

Re: Image gallery with arrow navigation

#7 2013-01-14 06:31:01

Re: Image gallery with arrow navigation

Board footer