Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript anythingslider question on appearance (size)

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #36934
    whipdancer
    Member

    I am loading my anythingslider dynamically via ajax. I use the data from the ajax call to add all of my

  • elements with

    tags.

    As for sizing, I use imageresizer on our website to dynamically serve our images. The querystring you in the src attribute

    src="../some/image/file.jpg?height=150&width=150"

    indicates that the image will be made 150×150, preserving aspect ratio (add whitespace to pad as appropriate).

    In my css, I’ve set #Slider width:200px and height:160px. In my initialization I set resizeContents: false. I would like the slider view window to stay one size all the time and for my image to be centered in the view window.

    Can someone point me in the right direction for accomplishing this?

    #97893
    Mottie
    Moderator

    Hi whipdancer!

    Check out this demo. It uses the css trick from this post to center the image horizontally and vertically. Oh and set the resizeContents option to true, or don’t set it to false since it defaults as true.

    HTML






    CSS

    #slider, #slider li {
    width: 200px;
    height: 160px;
    list-style: none;
    }

    /*
    centering css from here:
    https://css-tricks.com/centering-in-the-unknown/
    */
    #slider div {
    text-align: center;
    }
    #slider div:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    }
    #slider img {
    display: inline-block;
    vertical-align: middle;
    }
    #97899
    whipdancer
    Member

    Thanks a ton, that is much better.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.