Looking for good slider/carousel

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

madzzoni · 2013-02-05 03:06:51

… and when i try this without the <txp:permlink> tag, the Slider works perfectly!:

<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:article_custom section="article" category="featured" limit="3" sort="id desc" break="">
<!-- empty element for caption -->
    <div class="cycle-caption"></div>
<img src="<txp:images><txp:image_url /></txp:images>" alt="<txp:title />" /></txp:article_custom></div>
</section>

… it seems like the <txp:permlink> tag makes the trouble and break the Cycle2 script, but i don’t know why ;-/ ??

-madzzoni

tye · 2013-02-05 05:09:58

maybe add data-cycle-slides=”> a” to the div.cycle-slideshow as you would now be sliding a hrefs and not images…. you may need to change the css on here also to fix any css you have on links specific to this div

<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"
    data-cycle-slides="> a"
    >

Last edited by tye (2013-02-05 05:22:53)

madzzoni · 2013-02-05 15:08:41

Thx tye, That solved the problem :-) … now the script work the <txp:permlink> tag.
:-)

Last edited by madzzoni (2013-02-05 15:09:16)

philwareham · 2013-02-05 16:29:58

I’ve just had to create a slider for a client where the images have to be linked, but not always to a Textpattern article (they will sometimes sell the advertising space to third-parties who would require their own URL links in the slider). Anyway, I came up with this solution which might be handy reference to some people…

<ul class="rslides">
	<txp:images category="slides" sort="id desc" break="li">
		<txp:variable name="slide-link" value='<txp:image_info escape="" type="caption" />' />
		<txp:if_variable name="slide-link" value="">
			<txp:image width="0" height="0" />
		<txp:else />
			<a href="<txp:variable name='slide-link' />" title="Read more&hellip;"><txp:image width="0" height="0" /></a>
		</txp:if_variable>
	</txp:images>
</ul>

The URL for the link is then set in your image file in the caption field of the image edit page (the image also has a category of ‘slides’ applied to it). If no URL is supplied then the image simply has no linkage.

madzzoni · 2013-02-05 23:58:27

philwareham wrote:

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.

I’ve tried the Cycle2 Alt captions option but it doesn’t work right. The Alt Captions just shows the word “alt” under the image(s).

Now i managed to get the Overlays to show up on the image(s) (Only display “desc”!!), but how do i get the <tpx: title /> from the image alt caption into the Overlay box?

The code now:

<section role="article" itemscope itemtype="http://schema.org/Article">
<div class="cycle-slideshow" 
    data-cycle-fx="fade"
    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"
    data-cycle-slides="> a"
    >
<!-- prev/next links -->
   <!-- empty element for overlay -->
    <div class="cycle-overlay"></div>
<txp:article_custom section="article" category="featured" limit="3" sort="id desc" break="">
<txp:permlink><img src="<txp:images><txp:image_url /></txp:images>" alt="<txp:title />" data-cycle-title="<txp:title />" />" /></txp:permlink></txp:article_custom></div>
</section>

My demo site

-madzzoni

madzzoni · 2013-02-07 16:09:03

Hello !
Finally i managed to get the Cycle2 Slider script to work as i want to.

<div id="slider">
<section role="article" itemscope itemtype="http://schema.org/Article">
<div class="cycle-slideshow" 
    data-cycle-fx="fade"
    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"
    data-cycle-caption="#alt-caption"
    data-cycle-caption-template="{{alt}}"
    >
<txp:article_custom section="article" category="featured" limit="4" sort="id desc" break=""><img src="<txp:images><txp:image_url /></txp:images>" alt="<txp:title />" /> 
<!-- empty element for caption -->
<txp:permlink><div id="alt-caption" class="slide-overlay"></div></txp:permlink>
</txp:article_custom>
</div></section>
</div>

Demo-side
Now i only need to fix some CSS classes for the small screens .
It seems to be good and responsive in Firefox, Safari, Chrome and IE9 for now ;-) … (IE8 suck’s!)

-madzzoni

philwareham · 2013-02-07 16:33:41

@madzzoni

That code is going to fail W3C validation because you are generating multiple instances of id="alt-caption".

Can’t you use a class instead of id for that task? i.e. change:

data-cycle-caption="#alt-caption"

To:

data-cycle-caption=".slide-overlay"

and delete

id="alt-caption"

Edit: Also, role attributes are limited to a certain type of value, so unless you fully understand their use in accessibility I’d suggest leaving them out of your code altogether. Believe me, WAI-ARIA is a bag of hurt unless you want to wade through a massive amount of accessibility documentation.

Last edited by philwareham (2013-02-07 16:41:05)

madzzoni · 2013-02-07 23:07:49

@Phil
Thx for your nice feedback. When i change the “data-cycle-caption” code as your suggest here, then the script generate multiple (3) instances of the same “alt text” on the image! in this case generated from the <txp:title /> tag.
How do i stop this repeating? …

PS: I clean up my code regarding W3C ;-)

madzzoni · 2013-02-08 02:18:26

madzzoni wrote:

@Phil
Thx for your nice feedback. When i change the “data-cycle-caption” code as your suggest here, then the script generate multiple (3) instances of the same “alt text” on the image! in this case generated from the <txp:title /> tag.
How do i stop this repeating? …

Problem solved! I just changed the position-tag in my CSS from “relative” to “absolute” that fix multiple instances of the “alt-text” in the Cycle2 script!
And now it’s valid HTML5

Thx again phil :-)

philwareham · 2013-02-08 08:10:45

Nice work!

madzzoni · 2013-02-09 04:52:54

philwareham wrote:

Nice work!

Yes thank You phil, but i just realized that the “Title Headlines” doesn’t link to the the actual article, – but to the archive in the featured Category (asc/desc)!!!
Argghh! Tried a lot af “sort=” settings without luck!

<txp:article_custom section="article" category="featured" limit="4" sort="id desc" break=""><img src="<txp:images><txp:image_url /></txp:images>" alt="<txp:title />" &raquo; /> 
<txp:permlink><div class="slide-overlay"></div></txp:permlink>
</txp:article_custom>

Any idea’s what to do here??

madzzoni · 2013-02-10 01:06:43

madzzoni wrote:

philwareham wrote:

Nice work!

Yes thank You phil, but i just realized that the “Title Headlines” doesn’t link to the the actual article, – but to the archive in the featured Category (asc/desc)!!!
Argghh! Tried a lot af “sort=” settings without luck!

—-

.. And now i finally fixed this issue to! I had to “wrap” the image and the <txp:title /> together in the Cycle2 script with <txp:permlink> and some more CSS, then the link goes right!
Now it look like this:

<div class="cycle-slideshow composite-slider" 
    data-cycle-fx="fade"
    data-cycle-pause-on-hover="true"
    data-cycle-auto-height="4:2"
    data-cycle-center-horz="true"
    data-cycle-center-vert="true"
    data-cycle-timeout="2000"
    data-cycle-slides="> a"
    >
<txp:article_custom section="article" category="featured" limit="4" sort="id desc" break="">
<txp:permlink class="cycle-slide"><img src="<txp:images><txp:image_url /></txp:images>" alt="<txp:title />" />
<div class="cycle-overlay"><txp:title /></div></txp:permlink>
</txp:article_custom>
</div>

… Now the the article Headline will show up in the upper 1/3 of the actual image (align:top), which means that if the images not are the same height, the headline change the position according to the article image-size.
This Cycle2 Slider use 4:2 format and overflow: hidden. And my images are in different sizes in this demo

BTW, This Cycle2 Slider is still valid HTML5. :-)

… I’m finally think i begin to understand the nature of Textpattern and the possibilities with this CMS.

Textpattern CMS

Textpattern CMS support forum

#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

#49 2013-02-05 03:06:51

Re: Looking for good slider/carousel

#50 2013-02-05 05:09:58

Re: Looking for good slider/carousel

#51 2013-02-05 15:08:41

Re: Looking for good slider/carousel

#52 2013-02-05 16:29:58

Re: Looking for good slider/carousel

#53 2013-02-05 23:58:27

Re: Looking for good slider/carousel

#54 2013-02-07 16:09:03

Re: Looking for good slider/carousel

#55 2013-02-07 16:33:41

Re: Looking for good slider/carousel

#56 2013-02-07 23:07:49

Re: Looking for good slider/carousel

#57 2013-02-08 02:18:26

Re: Looking for good slider/carousel

#58 2013-02-08 08:10:45

Re: Looking for good slider/carousel

#59 2013-02-09 04:52:54

Re: Looking for good slider/carousel

#60 2013-02-10 01:06:43

Re: Looking for good slider/carousel

Board footer