Numbered pager control for slideshow

Hi,

I'm trying to work out the same thing!

Adding a field 'Global: View result counter' gets you the numbers. Not got as far as what do do with them next. I cant get the pager working at all.

Got 3 slides, end up with 3 links under which each link to the slide content type nodes so clicking on them takes a user away from the homepage and to the slider content type page rather than actually changing the slide?! Not quite what I had in mind.

Sam.

Solved this if you're interested, I used views result counter, and outputted that as a link "#slider".

This makes it a 'fake' link, but at least it looks like a link unlike the paging I had before! Set pager to use field 'views counter' and you're done.

I rewrote the field to wrap a span around [counter] as I displace the text via css and use a background image instead, like so:

/* ==========SLIDESHOW CSS STYLES========== */

.views-content-counter a {
display: block;
float: left;
margin-right: 20px;
height: 25px;
width: 25px;
background: url(../images/pager-bg.png);
background-position: 0px 0px;
}

.views-content-counter a:hover {
background-position: -25px 0px;
}

.active .views-content-counter a{
background-position: -25px 0px;
}

Hope this helps.

Sam.

Hi chowdah,

I thought my slider wasn't working until I clicked the numbers and the slides changed! Turns out, the 'links' aren't actually links at all so of course, the cursor stays as an arrow which is completely misleading for a user, how would they know to click on plain text?

That's why I put a fake anchor link on them (could put anything after the #, but # on its own is not allowed so I just put #slider). Just makes them more obvious as links and the ability to style them out easier. The links work without the anchor but they are just plain text without it.

I did this just make the pager 'clickable'.

Hope this helps.

Sam.

Hi chowdah,

So you use the pager as hovering on it changes the slide and clicking on it goes to the node? I'm sure it can be done but it's an unusual funtionality, I certainly wouldn't expect that. I'd expect the links to change the slides and the slide to link to the node.

I set up a link field on the slider content type called 'slider-link'. This is where the user will go when clicking on my slides. You could do somehting like:

Field: slider-link - exclude from display - formatter 'URL, as link'
Field: view result counter - exclude from display - output as link [field_slider_link]

Format - Settings: Pager field - 'Global: View result counter'

For me, that outputted the numbers 1, 2 and 3 as a top pager (I have 3 slides), with each of the numbers linking (on click) to whichever URL I had selected on the slide content type. On hover, nothing happens though, slides don't change. Personally, I wont use this, I was just interested to see if what you suggested could be done.

Maybe something similar would work for you.

Sam.

Cool! Works in D7 as well, thanks!

Hi chowdah

In your first, opening post, above, you write "Right now all I am capable of doing is inserting the pager control that uses one of the fields as pager link text - like the node title." - this is exactly what i am trying to achieve. However, i cannot find instructions of how to do so.

my site is here http://www.hartlandpeninsula.co.uk/

I would like to change the pager so is NOT numbers, but node title, as you mention...

if i can achieve this i would then like to replace the main menu, e.g. 'Incredible Landscapes' etc., with pager, so, you when mouseover the pager link it changes the image, caption, etc., but if you click it takes you to the correct page, as is the case with the pagers at the mo'.

Can you possibly briefly explain how you achieved this? i am fairly proficient, so, doesn't need to be to detailed.

Matt

I have used the slider at http://www.hartlandpeninsula.co.uk/ (nice site btw).

I find the 'rollover does one thing and click does another' method really counter intuitive. A number as a link gives the user no clue as to what page they are going to end up on. As an example on a blog view page, it's like 'comments (2)' makes sense but '2' on its own doesn't.

Of course it's actually none of my business how you set it up. just giving another perspective.

Sam.

thanks chowdah, will give that a go

yes, samwillc, i agree, this kind of menu could be confusing, but it was just a suggestion made by the client, which we are reassessing, but good to know that i can achieve if we want (assuming all goes to plan referring to chowdah's instructions), and, thanks for compliment

chowdah - how annoying, there is nothing of what you say in your post, no bottom widgets, no pager checkbox, no settings to play with, no Select 'fields' as the pager type or anything, weird, i am using Views Slideshow 6.x-3.0 too, as per attachment

thanks chowdah, that'll help trying to find out what and why...

I think this is fixed now from the original issue.

#2 Worked great for me, the numbered pager links cycle through successfully. The issue I'm having is dealing with the "active" state of each counter. Every time I reload the page, the active class "jumps" from the first to second counter number before any transition occurs. Even if I pause the slideshow on start, the active state still jumps from #1 to #2 about 2-3 seconds after reload.

Like I said, everything seems to work just fine, but I can't seem to get this "jump" from occurring on each page load.

EDIT: Not ideal, but downgraded to views 2 and slideshow 2.

subscribe!

I used images of buttons/dots and adding this hid the numbers:
"font-size: 0pt;"

Thanks for sharing the css.

You can also hide the numbers by wrapping a span like this (I can't remember exactly the content counter html off hand, something like this):

<div class="views-content-counter">
<a href="#"><span class="hideNumber">1</span></a>
<a href="#"><span class="hideNumber">2</span></a>
<a href="#"><span class="hideNumber">3</span></a>
</div>

.views-content-counter a {
display: block;
float: left;
margin-right: 20px;
height: 25px;
width: 25px;
background: url(../images/YOUR-PAGER-IMAGE-WHICH-IS-25px-by-25px.png);
background-position: 0px 0px;
}

.views-content-counter a:hover {
background-position: -25px 0px;
}

.active .views-content-counter a{
background-position: -25px 0px;
}

.hideNumber {
display: none
}

Remember, the span has to be INSIDE the a link tag or this will hide the number and your new styles.

Sam.

Yet another way to hide pager numbers if you're using a dot or other graphic... this one requires no extra markup.

<div class="views-content-counter">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>

.views-content-counter a {
display: block;
float: left;
margin-right: 20px;
height: 25px;
width: 25px;
background: url(../images/YOUR-PAGER-IMAGE-WHICH-IS-25px-by-25px.png);
background-position: 0px 0px;
text-indent: -9999px; /* this effectively hides the text */
}

#22, very nice :)

Sam.

I had the same issue as woofers02 in #18

I'm using Views Slideshow 6.x-3.0 (maybe an issue in 7.x too?)

found the problem in views_slideshow_cycle.js

// We need to set a timeout so that the slideshow doesn't wait
// indefinitely for all images to load.
setTimeout("Drupal.viewsSlideshowCycle.load('" + fullId + "')", settings.wait_for_image_load_timeout);

So the load of the slideshow is happening twice. However this should be captured by

if (!settings.loaded) {

However settings.loaded never seems to be set to true!

So I changed the code to:

if (!settings.loaded) {
settings.loaded = true;

And that fixed the issue in #18 for me

I would really like a numbered pager for slideshow... any way we can get this working?

Much simpler answer over here:

http://drupal.org/node/1648966

- Essentially, just use a full pager and the built in Views Result counter and set that field to use as a pager.

The solution in the link above hides the numbers by setting their color to the same as the background color and creates navigation "dots" but using border-radius.

Just change the color so the text shows and you have your numbered pager.

RE #18

Every time I reload the page, the active class "jumps" from the first to second counter number before any transition occurs.

Do you have a pager offset? Do you have a custom start point? Double-check your slideshow and pager settings.

Thanks to everyone on this thread. Nice work!