Forums

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

Home Forums Other How to use the Anything Slider

  • This topic is empty.
Viewing 15 posts - 31 through 45 (of 79 total)
  • Author
    Posts
  • #69288
    wetfeet
    Member

    I’ve followed this thread trying to get my anythingSlider working on my wordpress site with no luck





    the files are pathed correctly what do you think the problem is?

    #69315
    HenryHunter
    Member

    I’m on here asking questions myself, dude. What exactly is the problem though? Try to be as specific as possible. Is the player not showing up on the page you want it to show up on? Is it not sliding?

    The instructions I got from jamy_za (see everything from November 24th on) were spot on. Try following his instructions.

    #69316
    jamygolden
    Member

    @HenryHunter

    div.anythingSlider {
    width: 700px;
    height: 390px;
    margin: 0 auto;
    }

    Changing the width and height there will change the slider’s width or height.
    The reason you are having weird problems like: changed styles not taking effect is because of CSS specificity. Your anythingslider.css file is below your style.css file, therefore anything you put within your style.css file with the same specificity value as a selector within the anythingslider.css file will be overwritten by the anythingslider.css file lol.

    In your style.css file, you have anythingslider css right at the top beginning with the comment:

    /*
    Anything Slider Styles
    */

    Replace the anythingslider CSS with the following update:

    #anything_slider /*for the unordered list*/
    {
    background: #5a636c;
    padding: 0;
    margin: 0;
    }

    #art-main div.anythingSlider{
    height: 260px;
    width: 620px;
    padding: 0 0 30px 0 !important;
    margin: 15px 0 0 15px; /*used to be in the style below*/
    }

    #art-main div.anythingSlider.activeSlider .anythingWindow{
    padding: 0;
    border: 4px solid #dcdcdc;
    }
    #art-main div.anythingSlider.activeSlider .thumbNav a.cur, #art-main div.anythingSlider.activeSlider .thumbNav a{
    background-color: #666;
    }
    #art-main div.anythingSlider .start-stop{
    height: 18px;
    margin: 0 -8px 0 0;
    }

    That should change the height of the slider, the height of the start/stop button and the position of the button.

    On a side note: it doesn’t look like you are using a css reset. I would suggest including one.


    @wetfeet
    Do you have a link to the example? I would bet that you HTML is the problem.

    #69138
    HenryHunter
    Member

    Okay man thanks. When you say “Replace the anythingslider CSS with the following update” do you mean the anythingslider.css file, or the Anything Slider Styles section in my style.css file that you referred to? Oh, and what is CSS reset?

    #69113
    jamygolden
    Member

    I mean replace the anythingSlider section within your style.css file – It should look quite similar.

    All browsers have default css styles. A <h1> will have padding and font size, font style, etc. by default. An anchor link will be blue with an underline, etc. Browsers aren’t consistent in the way these elements are rendered.
    A CSS reset will ‘reset’ these values and help you create websites in a more cross-browser friendly fashion.

    #69079
    HenryHunter
    Member

    Okay, I’m with you on that because my website looks different on Firefox, IE, and Safari. It’s like the padding or margins are different, or something. I want the site to look the same on all browsers (it also looks like crap on my BlackBerry).

    So, how do I apply a CSS reset?

    #69044
    jamygolden
    Member

    Add this to the top of your style.css file:

    /* v1.0 | 20080212 */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }

    /* remember to define focus styles! */
    :focus {
    outline: 0;
    }

    /* remember to highlight inserts somehow! */
    ins {
    text-decoration: none;
    }
    del {
    text-decoration: line-through;
    }

    /* tables still need 'cellspacing="0"' in the markup */
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
    /* End of reset */

    Or alternatively, create a new css file called reset.css and link it to the document like a normal stylesheet.

    #69037
    HenryHunter
    Member

    Damn, you’re up late, dude. Thanks for the CSS reset code. The gallery finally, finally looks the way I want it to look. Thanks a flipping lot man. I dunno how I would have gotten this to work without your help. I hope anyone with the same problem as me can look to this post and find answers.

    #63072
    micronetic
    Member

    Hi there, I got the anything slider also on one another website where it does work (no cms etc.) but when I try this slider in WordPress it doesn’t work. Everything I got is the slider with scrollbuttons like the jQuery won’t work or something else, I really don’t know.

    I can show you the code maybe I did something wrong.

    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">













    <?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?>







    And here the other part in my index.php:

    		










    • innovation

      Lorem Ipsum



      Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves












    • Life is conversational. Web design should be the same way. On the web, you're talking to someone you've probably never met - so it's important to be clear and precise. Thus, well structured navigation and content organization goes hand in hand with having a good conversation.











    • innovation











    • Life is conversational. Web design should be the same way. On the web, you're talking to someone you've probably never met - so it's important to be clear and precise. Thus, well structured navigation and content organization goes hand in hand with having a good conversation.









    #57046
    illscode
    Member

    anyone know how to install this into a website that doesn’t use wordpress as cms,
    I have a php site set up that a developer friend helped me build and i now maintain. any help would be super appreciated! I know html and css but F-all about javascript……

    #55335
    illscode
    Member

    many many thanks!

    #52151
    elfin
    Member

    Hi,
    Is it possible to parse custom folder (wp-content/uploads/) and send the array of jpg|png files in it to the anythingslider? I found some php parsing scripts here
    http://stackoverflow.com/questions/1711715/php-script-to-parse-directory-list-all-images-and-add-class-last-to-the-last-i
    but have no idea how to use them.
    thanks!

    #51981
    elfin
    Member
    #94396
    Baldieboy
    Participant

    I am loving this slider. I can include both images and html5 videos in the same slideshow. Love it! The only issue I’m having is that, although my images are all the same size, some are portrait and some are landscape but I don’t want the slider to resize as it messes my page layout up, nor do I want to resize them to fit the container as then the portrait images just get stretched.
    Is there any way of forcing a crop or even better a resize of the portrait images to the container height while maintaining ratio (ie. bit of blank space on both sides).

    #94399
    Mottie
    Member

    Hi Baldieboy!

    All you’ll need to do is set the slider and panel heights, with a text align center to center the images, in the css

    #slider, #slider li {
    width: 300px;
    height: 200px;
    list-style: none;
    text-align: center; /* center images */
    }

    Then to limit the size of your images, set the height to your slider height, and set a max-width to the width of your slider. The browser will automatically resize the images, keeping their aspect ratio, inside the slide.

    #slider img {
    height: 200px;
    max-width: 300px;
    }

    Lastly, set the AnythingSlider “resizeContents” option to “false”. Here is a demo of it all together.

Viewing 15 posts - 31 through 45 (of 79 total)
  • The forum ‘Other’ is closed to new topics and replies.