[Plugin: Slideshow] Play, pause and arrow button

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Stefan Boonstra

    (@stefanboonstra)

    13 years, 8 months 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 225×225 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

    Thread Starter asic

    (@asic)

    13 years, 8 months ago

    Hi Stefan,

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

    Thanks

    Plugin Author Stefan Boonstra

    (@stefanboonstra)

    13 years, 8 months ago

    Sure! what do you need?

    Thread Starter asic

    (@asic)

    13 years, 8 months ago

    I cant show the 225×225 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;
    }

    Plugin Author Stefan Boonstra

    (@stefanboonstra)

    13 years, 8 months ago

    Assuming you uploaded two images with the size of 225×225 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?

    Thread Starter asic

    (@asic)

    13 years, 8 months ago

    Yes Stefan

    now it’s all ok..

    Thanks a lot

    Asic

    Plugin Author Stefan Boonstra

    (@stefanboonstra)

    13 years, 8 months ago

    That’s great to hear, anytime!

    gblanc

    (@gblanc)

    13 years, 5 months 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.

    Plugin Author Stefan Boonstra

    (@stefanboonstra)

    13 years, 5 months 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

    gblanc

    (@gblanc)

    13 years, 5 months ago

    Yes Stefan

    Now everything is ok..

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

    GBlanc.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘[Plugin: Slideshow] Play, pause and arrow button’ is closed to new replies.