WordPress.org

Ready to get started?Download WordPress

Forums

Slideshow
[resolved] Play, pause and arrow button (11 posts)

  1. asic
    Member
    Posted 1 year ago #

    Hi,

    I would like to change the buttons play, pause and arrows.
    I uploaded a nice button 225x225 changed the css path but i missing somethings, because the buttons remain the little size as usual.

    Thanks

    http://wordpress.org/extend/plugins/slideshow-jquery-image-gallery/

  2. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Asic,

    If you set the slideshow style to 'Custom', you can see in the .slideshow_container .button class that the buttons have a predefined height and width. Also, they move up half their height so they center vertically.

    On a sidenote: The buttons are sprites in the predefined cases, which means that both the left and right button are in one image. That's why the next button has a background positioning of background-position: -19px 0;.

    If you want to add a 225x225 button, your CSS should probably look like this (assuming you're not working with sprites):

    .slideshow_container .button {
    	margin-top: 112px; /** Center vertically */
    	height: 225px;
    	width: 225px;
    }
    
    .slideshow_container .previous {
    	background: url('[your-image-path]/previous.png') no-repeat;
    }
    
    .slideshow_container .next {
    	background: url('[your-image-path]/next.png]') no-repeat;
    }

    Best regards,
    Stefan

  3. asic
    Member
    Posted 1 year ago #

    Hi Stefan,

    could you please give some help for the play, pause button??

    Thanks

  4. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    Sure! what do you need?

  5. asic
    Member
    Posted 1 year ago #

    I cant show the 225x225 play7pause button that i've uploaded

    here my slideshow css:

    .slideshow_container { }

    .slideshow_container .slideshow { }

    .slideshow_container img { height: 200px !important; border: 1px solid #509AC9 !important; }

    .slideshow_container .slide {
    margin-right: 2px;
    }

    .slideshow_container .description {
    background: #FFFFFF;
    }

    .slideshow_container .controlPanel {
    width: 21px;
    height: 21px;
    background: #000;
    border-radius: 2px;
    -moz-border-radius: 10px;
    }

    .slideshow_container .controlPanel ul { }

    .slideshow_container .controlPanel ul li {
    margin: 3px;
    width: 15px;
    height: 15px;
    }

    .slideshow_container .controlPanel ul li:hover { }

    .slideshow_container .play {
    background: url('%plugin-url%/images/SlideshowPlugin/play-pause.jpg') 0 0 no-repeat;
    }

    .slideshow_container .pause {
    background: url('%plugin-url%/images/SlideshowPlugin/play-pause.jpg') -15px 0 no-repeat;
    }

    .slideshow_container .button {
    margin-top: -20px;
    height: 40px;
    width: 19px;
    background: url('%plugin-url%/images/SlideshowPlugin/light-arrows.png') no-repeat;
    }

    .slideshow_container .previous { }

    .slideshow_container .next {
    background-position: -19px 0;
    }

    .slideshow_container a {
    text-decoration: none;
    color: #509AC9;
    text-align: center;
    }

    .slideshow_container .description h2,
    .slideshow_container .description p {
    color: #509AC9;
    }

    .slideshow_container h2 {
    margin: 0px;
    font-size: 18px;
    }

    .slideshow_container p {
    margin: 7px;
    font-size: 15px;
    }

  6. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    Assuming you uploaded two images with the size of 225x225 pixels, named play.jpg and pause.jpg, which you placed on your website, you should be able to achieve showing the new play and pause buttons by adapting the CSS classes to look like this:

    .slideshow_container .controlPanel ul li {
        margin: 3px;
        width: 225px;
        height: 225px;
    }
    
    .slideshow_container .play {
        background: url('www.yoursite.com/youruploadfolder/play.jpg') no-repeat;
    }
    
    .slideshow_container .pause {
        background: url('www.yoursite.com/youruploadfolder/pause.jpg') no-repeat;
    }

    Keep in mind though, that you will have to replace 'www.yoursite.com' with your own website's address, and 'youruploadfolder' should be replaced with the folder you uploaded the files to.

    Were you able to change the next and previous buttons?

  7. asic
    Member
    Posted 1 year ago #

    Yes Stefan

    now it's all ok..

    Thanks a lot

    Asic

  8. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    That's great to hear, anytime!

  9. gblanc
    Member
    Posted 1 year ago #

    Hi,

    I would like to prevent the slide show to start automatically and let the user decide to start using the arrow keys or the start/stop button.

    Thank you for this very nice plugin.

    GBlanc.

  10. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    Hi GBlanc,

    You can do this by setting 'Automatically slide to the next slide' to 'No' and setting 'Show control panel (play and pause button)' to 'Yes' in the slideshow's settings box.

    The buttons can be set to active by setting 'Activate buttons (so the user can scroll through the slides)' to 'Yes'. Clicking the 'Next' and 'Previous' button won't make the slideshow start playing. It'll just slide to the next or previous slide, once.

    Best regards,
    Stefan

  11. gblanc
    Member
    Posted 1 year ago #

    Yes Stefan

    Now everything is ok..

    Thanks a lot. Your plugin does exactly what I was expecting.

    GBlanc.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.