WordPress.org

Ready to get started?Download WordPress

Forums

Slideshow
[resolved] Larger click area (5 posts)

  1. funsail
    Member
    Posted 1 year ago #

    Suggest the click area be larger than the < > img size. Maybe even make it the whole vertical bar, and double that width.

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

  2. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    It could indeed be convenient to have bigger button sizes, certainly when on a mobile device. The problem however, is that the bigger button area's may overlap a slide with a URL or even the pagination.

    At the moment you can of course work it out for yourself, using a custom stylesheet.

  3. funsail
    Member
    Posted 1 year ago #

    I see, I didn't think as I don't use URL or pagination.
    What would I do to custom stylesheet to make the area just a strip?
    I see it has some strange margin using -20

  4. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    The images are centered vertically in the slideshow's container with the 'top: 50%;' CSS value. This will place the top of the button image in the center, but leaves the rest of the button below the center. The 'margin-top: -20px;' pulls the button up half its height so it's completely centered.

    If you want to have buttons from top to bottom, you should do something like this:

    .slideshow_container_0 .slideshow_button {
        top: 0; /* Brings the buttons to the top. */
        height: 100%; /* I'm not sure whether or not this works in all versions of Internet Explorer. */
        width: 100px; /* Any width you'd like. */
        background: url('URL to your image') no-repeat;
    }

    If you're using the default image, you should probably use something like CSS background-position as well.

  5. funsail
    Member
    Posted 1 year ago #

    I got it

    .slideshow_container .slideshow_button {
    	top: 0;
    	height: 100%;
    	width: 39px;
    }
    
    .slideshow_container .slideshow_previous {
    	background: url('%plugin-url%/images/SlideshowPlugin/light-arrows.png') no-repeat 20px 50%;
    }
    
    .slideshow_container .slideshow_next {
    	background: url('%plugin-url%/images/SlideshowPlugin/light-arrows.png') no-repeat -19px 50%;
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.