How to use images as pagination?

In thumbnailhover it's easy by just selecting a different field for your breakout fields. In singleframe there is a way to trick it to show it.

1) Add the thumbnail image you want to show as your top field.
2) In css hide that field from showing

singleFrame will pickup that image as the first image so it will use it as the thumbnail image.

@bjraines
add "Global:Custom" text to breakouts.
add the following html to that field:

  <div class="dots"></div>

add the following code to your CSS file:

div.dots {
  background: url("path to your gray dot image") no-repeat scroll 0 0px transparent;
  height: 10px;
  width: 10px;
}

.activeSlide div.dots {
  background: url("path to your green dot image") no-repeat scroll 0 0px transparent;
}

or you can use the numbered pager and add a background and move the text. Something like

.pager-item {
  background-image: url("path to grey image");
  text-indent: -2000px;
}

.pagerItem .activeSlide {
  background-image: url("path to green image");
}

The activeSlide may have to be attached to pagerItem like .pagerItem.activeSlide

Hope this helps

@#5 bjraines

i hope the a click area is big enough!!!

You can change the "click area" in your CSS file.

I suggest you to download Firebug extension for firefox. With Firebug you can inspect HTML and modify style and layout in real-time.

@ #6 bjraines

what do you mean by "breakouts"

see attached file.

@ #7 bjraines - June 13, 2010 - 07:47

how do you pull it on top of the image though when top margins collapse?

I don't understand very good your question.
Try searchin google "CSS positioning".
Also you can start learning from here: http://www.w3schools.com/Css/css_positioning.asp

@#11 bjraines

add this to your CSS file

.view-front-page-banner .view-content {
  position: relative;
}

.view-front-page-banner .views-slideshow-controls-bottom {
  position: absolute;
  right: 358px;
  top: 402px;
  z-index: 100;
}

Hello bjraines,
I'm happy that you like the support :)

As to

I still haven't gotten the activeSlide to work yet

try to add this code to your CSS:

.view-front-page-banner .activeSlide a {
  background: url("path to green image") no-repeat scroll right bottom white;
}

Also you have used "display:inline-block" for your "a" tag.
Search in google and you will see that inline-block has some compatibility problems with internet explorer.
I suggest to change it to "display: block" and to use "float: left" to put all images in one raw.

Good luck and Happy debugging!

Thanks intyms for providing support it really helps me a lot.

bjraines feel free and add it to the documentation that's the best place to help everyone out.

@bjraines
i agree with redndahead, adding this example to documentation will be great!

@redndahead, I am happy to have a possibility to contribute to Drupal community.