Looking for good slider/carousel

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

madzzoni · 2013-02-04 04:09:25

I’ve finally decided to use the Cycle2 Slideshow for jQuery , a very user-friendly and easy to config. slideshow with TXP with a lot of options.
I put this into a TXP-form:

<section role="article" itemscope itemtype="http://schema.org/Article">
<div class="cycle-slideshow" 
    data-cycle-fx="scrollHorz"
    data-cycle-pause-on-hover="true"
    data-cycle-speed="200"
    data-cycle-auto-height="4:2"
    data-cycle-center-horz="true"
    data-cycle-center-vert="true"
    >
  <txp:images category="gallery" sort="id desc" break="">
    <img src="<txp:image_url />">
  </txp:images>
  </div>
 </section>

… Which now shows the images in the Image-category: gallery on the Home-page.(That’s ok)
- But how do i add a image-link to the actual article which the image belongs too? I also want to add the headline from the article to the image-slider. I’ve tried a lot of combinations with TXP article-tags without success ;-(

-madzzoni

philwareham · 2013-02-04 08:14:04

At the moment you are generating your list of images simply from an image category. If you want to use the slider to link to articles then you need to pull those articles into your list instead. Each article will need an article_image associated with it which will then be used in the slider. Kind of like this…

<txp:article_custom section="articles" limit="6" sort="id desc" break="">
	<txp:permlink><img src="<txp:images><txp:image_url /></txp:images>" alt="<txp:title />" /></txp:permlink>
</txp:article_custom>

To use the caption (in this case the article title I’ve placed in the alt attribute), see this page (Alt captions option). If you want that caption over the image you’ll have to position it with some CSS.

madzzoni · 2013-02-05 02:05:22

Yes Phil, i’m aware of that this “simple” setup only choose from the “Image category” – but i’d tried a lot with “article-tag” combinations, inclusive your suggestion, without luck. They all “kill” the slider function :-/ …

I made a new article-category =“featured” and right now, it’s seems like this setup works with the article-links and the CSS, but still not the Cycle2 Slider function, it makes a image-list :

<section role="article" itemscope itemtype="http://schema.org/Article">
<txp:article_custom section="article" category="featured" limit="3" sort="id desc" break=""><txp:permlink>
<div class="cycle-slideshow" 
    data-cycle-fx="scrollHorz"
    data-cycle-pause-on-hover="true"
    data-cycle-speed="200"
    data-cycle-auto-height="4:2"
    data-cycle-center-horz="true"
    data-cycle-center-vert="true"
    >
<!-- empty element for caption -->
    <div class="cycle-caption"></div>
<img src="<txp:images><txp:image_url /></txp:images>" alt="<txp:title />" /></div></txp:permlink></txp:article_custom>
</section>

As you now, it’s the class=“cycle-slideshow” who “wake up” the Cycle2 script, but it doesn’t work for me!

-madzzoni

Textpattern CMS

Textpattern CMS support forum

#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

#46 2013-02-04 04:09:25

Re: Looking for good slider/carousel

#47 2013-02-04 08:14:04

Re: Looking for good slider/carousel

#48 2013-02-05 02:05:22

Re: Looking for good slider/carousel

Board footer