Forums

Power Slider Lite Make Pagination into images

Permalink 1 user found helpful
Does anyone know hopw you could change the numbers to images and offset the pagination away from the image Power Slider Lite ?

I saw the below in the view.php but looks like it generates the link rather then create a list? Any ideas?

<?php  if ( $paginationToggle == "paginationOn" ) { ?>
    <div class="powerSliderPagination" id="powerSliderPagination<?php  echo $bID; ?>" style="position: absolute; width: <?php  echo $powerSlideWidth ?>px; z-index: 99; bottom: <?php  echo $paginationOffsetY ?>px; text-align: <?php  echo $paginationAlignment ?>; ">

1 Attachment

reachdigital
 
MrLindau replied on at Permalink Reply
Hey!

Did you ever get an answer to this question?
I have the same request and the code isn't that obvious.

Mr L
reachdigital replied on at Permalink Best Answer Reply
reachdigital
Hi MrL

Yes I did and I used the below in my main.css to change it.

[code]/* POWER SLIDER */

/* need to always chnage ID Pagination53 in CSS*/

#powerSliderPagination45 a {
background:url(images/bullets.png) no-repeat;
width:18px;
height:12px;
color: #FF0000;
text-indent:-9999px;
border:0;
padding-right:1px;
z-index:999;

}
#powerSliderPagination45 a:hover, #powerSliderPagination45 a.activeSlide {
background-position:0 -18px;
}
[\code]

Although what I found was that I needed to change the ID number like 45 to 53 depending on which slideshow I needed it for.

Works well for me, Im also pretty sure I played with the package css also. Sorry I did this a while ago now and cant seem to recall the exacts but this should help you.

Cheers

bmsdigital
TheRealSean replied on at Permalink Reply
TheRealSean
This may be a question better suited in the support thread for PowerSlider?

To convert the numbers to images you could use CSS to adjust the content.

I am not to sure of the names but it is something like 
<div class="pagination">
<span class="ccm-pagination-previous"></span>
<span><a href="#">1</a></span>
<span class="ccm-pagination-active">2</span>
<span><a href="#">3</a></span>
<span class="ccm-pagination-next"></span>
</div>


You could then use CSS to replace this 
.pagination{width:300px; margin:0 auto;}
.pagination span{ content:""; background:url(round_dot.png); display:block; float:left; width:20px; height:20px;}
.pagination span.ccm-pagination-active {background:url(round_active_dot.png);}


It is also possible to alter the actual html output via the pagination helper, by cloning it into your root/helpers folder and editing the code from within there.
matgdz replied on at Permalink Reply
in /js/jquery.cycle.min.js go to line 820 and change to :
a = '<a href="#"></a>';