Slideshow with slides title as pagination

After spending few hours trying to find a solution for this, I just came up with mine.

I had a MotoPress slideshow that my client wanted edited so that instead of having the standard “bullet points” for browsing between slides, he actually gets the slides title as pagination.

My solution can work whatever the CMS: Joomla, WordPress, Drupal or any other CMS. The only condition is that you already have some HTML tag used for pagination on your slideshow for browsing between slides.

Here’s the result (drag the vertical bar from left to right or right to left to see changes between original and modified version):

Con’s of this solution is that it’s not dynamic so you have to update the files each time you edit a slide. Some people may think this solution is “ugly” in terms of programming as it doesn’t actually modify what’s rendered by the PHP. Truth is slideshow plugins are so complicated it is pretty tough sometimes to find what to edit in the code!
Pro’s is that once you’ve done it once it is pretty simple to implement (well the first time of course may take few hours like I did!)

You basically need to do two things:

edit a javascript file
edit a CSS file

Table of Contents

EDIT THE JAVASCRIPT

In my case I have to find a Javascript file that is called in the <head> section of the template. Browsing my theme files let me figure out that there’s actually a file called my_script.js which contains custom javascript for my theme. If no JS is called (very unlikely), you can create your own javascript file and call it from the <head> section of your page/template. How to do this would be subject to another post but if you have any knowledge in templating it should be pretty easy.

I just had to find the proper CSS selector that contains my slideshow bullet points (with Chrome inspector fi) and replace it with the actual titles of my slides. So in my case, I’ve just added those 3 lines to the JS file:

jQuery( '.ms_bullet_wrapper a:nth-child(1) div' ).replaceWith( '>> Legal Survey' );
jQuery( '.ms_bullet_wrapper a:nth-child(2) div' ).replaceWith( '>> Construction Survey' );
jQuery( '.ms_bullet_wrapper a:nth-child(3) div' ).replaceWith( '>> Pipeline Services' );

You will see now that the bullet points have been replaced with the slides titles. Of course you need to edit the CSS selector to replace them with the ones for your slideshow.

EDIT THE CSS

You will need to edit few stuff in the CSS of your theme/template so that the original bullet points container is modified and allow to have some text (slides title) better displayed. In my case, this is the extra required CSS:

.ms_pagination .ms_bullet{background:rgba(0,0,0,0.5) !important;
width:auto !important;
height:auto !important;
color:#fff !important;
padding:5px 10px 8px;
border-bottom-right-radius: 1em;
border-bottom-left-radius: 1em; }
.ms_pagination .ms_bullet.ms_active{
background:#7f0101 !important;
}

.ms_pagination{
bottom:-40px !important; }
.ms_wrapper{overflow:visible !important;}

Enjoy and feel free to contact Begin with B should you require any update on your WordPress slideshow or Joomla slideshow!

Calgary Web design & Web Development