Looking for good slider/carousel

fantasmo · 2011-06-07 11:42:19

@phil

Thank you very much for the code, I will try that.

One little thing… I want to make a grid look, so I thought about two solutions:

1. all <li> one below the other, and after maybe ever third <li> i would clear the float with a class :
<li><img></li>
<li><img></li>
<li class="floatEnd"><img></li>

2. one <li> contains more images, and then again these <li> one below the other:
<li>
<img>
<img>
</li>
<li>
<img>
<img>
</li>

The second one will not use a class and seems to be easy… but I believe there is no attribute for <txp:image> to say “put 3 images into li”…and when simply put three image-tags between <li> I guess it would show three times the same picture (haven’t tried it yet, but I believe I had something like this long time ago).

philwareham · 2011-06-07 14:03:22

I’m not sure what effect you want to achieve – you want the carousel to jump 2 images on every click scroll?

fantasmo · 2011-06-08 08:25:07

The carousel should contain maybe 25 pictures (5 lines with 5 pictures) and on click it slides in the next 25 pictures.

Destry · 2012-06-12 21:03:04

Just curious… now with mobile soon to surpass desktop usage, can any of these sliders be used in two states depending on device?

For example, for mobile devices I wouldn’t want something auto-rotating/sliding… I’d want to let users thumb-swipe right/left as they wanted too. But in non-touch devices, I’d want the carousel to start auto-rotating, much like the Whitehouse one does.

Anyone have something like that setup? Finger swipe coding is new ground for me still.

philwareham · 2012-06-12 21:09:41

I’m waiting for Swipe2 to be finished and released, that’ll do what you want (the swipe functionality is great).

Destry · 2012-06-12 21:12:01

Saweto!

madzzoni · 2013-01-29 01:38:26

Hello!
I’m searching for a nice Homepage-slider-plugin for TXP.
Does anyone known a (fx. jq) plugin that “Mix the Headline and excerpt/or other field” from an Article with the article photo” and put it into the Homepage-slider? … Fx. like: http://demos.wplegion.com/galleria/

-madzzoni!

philwareham · 2013-01-29 08:25:03

You don’t need any Textpattern plugin to achieve this. For pretty much any slider you can make use of Textpattern’s <images /> tag along with the slider’s JavaScript.

For example, in the case of Galleria…

Install the JavaScript on your site following the installation instructions on their site.

Place this in the <head> section of your page template (change the URL path to whatever your site uses):

<script src="/js/galleria/galleria-1.2.8.min.js"></script>
<script>
    Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
    Galleria.run('#galleria');
</script>

Then in the <body> section of your page, you can use something like this:

<section role="region" itemscope itemtype="http://schema.org/ImageGallery">
	<h3 itemprop="name">Gallery</h3>
	<div id="galleria">
		<txp:images category="gallery" sort="id desc" break="">
			<txp:image_url><img src="<txp:image_url thumbnail='1' />" data-title="<txp:image_info type='alt' />" data-description="<txp:image_info type='caption' />"></txp:image_url>
		</txp:images>
	 </div>
</section>

Then load some images into your system, give them a category of ‘gallery’ and fill in the alt and caption fields and you’re good to go.

That’s Galleria in it’s default state (used as a gallery) but their documentation and themes also show you how to make a more traditional slider from it.

Anyway, I’d recommend jQuery Cycle 2 or my favourite ResponsiveSlides.js over Galleria if you simply want a slider/carousel.

merz1 · 2013-01-29 11:17:35

Phil, what about the OP “Mix the Headline and excerpt/or other field” from an Article with the article photo” part of the Q?

philwareham · 2013-01-29 11:50:38

Sorry, I was skim reading whilst eating breakfast.

Untested, but maybe this?

<section role="region" itemscope itemtype="http://schema.org/ImageGallery">
	<h3 itemprop="name">Gallery</h3>
	<div id="galleria">
		<txp:article_custom section="articles" limit="6" sort="id desc">
			<txp:permlink><img src="<txp:images><txp:image_url /></txp:images>" data-title="<txp:title />" data-description="<txp:excerpt />"></txp:permlink>
		</txp:article_custom>
	 </div>
</section>

Anyway, you get the general idea – what I was trying to demonstrate is that you don’t need a plugin to achieve this kind of stuff. In the above example you’d need to make sure your excerpts were set to ‘leave text untouched’ in advanced options on the write page, since you just want raw text in that data-description attribute).

madzzoni · 2013-01-31 14:59:24

Thx so far Phil, i’m on my way ;-) – but how do i add the Category names to the images?
It’s not possible from the Image-Edit-tap – there is no options for that, and the “Choose Category drop down box” is empty, no options!! … strange problem!

philwareham · 2013-01-31 15:06:24

You need to create categories.

Content menu -> categories page

One of the columns on that page will be for image category names – create one of those. Then you will have the option to assign the category to your images when you edit them.

madzzoni · 2013-01-31 19:16:22

Phil, about Galleria, the instructions say’s:

2.Extract the galleria.zip file and place the “galleria” directory where you have your HTML files.

… but where is that in TXP?

I uploaded to the fym.xconsult.dk/js/galleria/ – as you write, but i does not work!

i got this error:

Init failed: Galleria could not find the element "#galleria".

Here is my <head>

<!-- Galleria -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="/js/galleria/galleria-1.2.9.min.js"></script>
<script>
    Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.min.js');
    Galleria.run('#galleria');
</script>

i placed the Section code in my default homepage, – what have i done wrong here?

uli · 2013-02-01 16:35:02

Some notes before this topic slides out of view:

Like the Galleria note tells you, you really have no page element with the ID of galleria in your source. I don’t know the Galleria script, but I assume it’s one of <article itemtype="http://schema.org/Article" itemscope="" role="article"> or <div itemprop="articleBody">, that needed an ID.

What puzzles me furthermore: The path in Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.min.js'); starts without a slash, the one that calls galleria-1.2.9.min.js has one.

Now you’ve got some things to play with. Hope it helps. If not, it’ll keep your topic visible at least. ;)

madzzoni · 2013-02-03 21:53:18

I thank U uli, adding the slash in the path, fix that problem. – Now i got some other problems with the Galleria Script!
There seem’s to be a lot of trouble with the Galleria in generel, so i think i change to the jQuery Slideshow instead. http://txptips.com/simple-image-slideshow-using-jquery-and-native-txp-tags

-madzzoni

Textpattern CMS

Textpattern CMS support forum

#31 2011-06-07 11:42:19

Re: Looking for good slider/carousel

#32 2011-06-07 14:03:22

Re: Looking for good slider/carousel

#33 2011-06-08 08:25:07

Re: Looking for good slider/carousel

#34 2012-06-12 21:03:04

Re: Looking for good slider/carousel

#35 2012-06-12 21:09:41

Re: Looking for good slider/carousel

#36 2012-06-12 21:12:01

Re: Looking for good slider/carousel

#37 2013-01-29 01:38:26

Re: Looking for good slider/carousel

#38 2013-01-29 08:25:03

Re: Looking for good slider/carousel

#39 2013-01-29 11:17:35

Re: Looking for good slider/carousel

#40 2013-01-29 11:50:38

Re: Looking for good slider/carousel

#41 2013-01-31 14:59:24

Re: Looking for good slider/carousel

#42 2013-01-31 15:06:24

Re: Looking for good slider/carousel

#43 2013-01-31 19:16:22

Re: Looking for good slider/carousel

#44 2013-02-01 16:35:02

Re: Looking for good slider/carousel

#45 2013-02-03 21:53:18

Re: Looking for good slider/carousel

Board footer