Grow your CSS skills. Land your dream job.

How to use the Anything Slider

  • # October 7, 2010 at 6:23 pm

    Hello!

    I’ve been desperately searching for an adequate slider to use on my home page (and possibly other pages of my site). I currently use the Promo Flash Gallery (which I paid for) from Flash-Gallery.com, but it forces a border around the images–not cool, man. Anyway, I use WordPress as the CMS of my website and this Anything Slider looks like it will do a much better job than my current slider. However, I don’t know PHP or JQuery, and I’m wondering if any of you awesome people would mind helping me understand how to install and use this slider on my website (or at least point me in the right direction).

    Right now I don’t want to use the slider in connection with my posts. I want to use it to display images that I have on my backend, which will link to pages on and off my site.

    This whole finding a slider business has been a real pain in the neck, and I can’t tell you how much I will appreciate any help with installing and using this slider.

    Thanks dudes!

    # October 7, 2010 at 10:28 pm

    You don’t have to know anything, except a little CSS to get it to fit into your site. Just download http://css-tricks.com/anythingslider-jquery-plugin/ the files and start playing around with the css, that way you will get to understand how things work and then when you have something up and running we can help you troubleshoot it.

    # October 8, 2010 at 12:02 am

    Okay, thanks for the help. I know a bit of CSS so hopefully things go well.

    # October 9, 2010 at 4:25 pm

    Dang!

    I downloaded the plugin via the link you provided me and installed it the same way I install all plugins, but I don’t see the Anything Slider in my plugin list. If it matter I’m using WordPress version 3.0.1. I’d appreciate any help you can give me. Thanks.

    # October 12, 2010 at 5:05 am

    Anyone?

    # October 12, 2010 at 1:34 pm

    That can’t be installed through WordPress. You have to manually add it to the site. Add the javascript files in the header so they are loaded. Copy the actual files to the theme folder.

    From there, you have to add it in the locations that you want. It is not that hard to do. I have heard that there was an actual wordpres plugin for this, but I can’t find it.

    # October 12, 2010 at 2:08 pm

    Whoops! I had no clue. Do you mean add JavaScript code to my header or actual files? And what do I do with the rest of the folders (CSS, Images, JS)? Do I just dump those into my theme folder as a folder or individual files?

    Sorry for asking so many questions. This is not an intuitive process for me. Thanks for all your help.

    # October 12, 2010 at 2:24 pm

    When you look at the demo, you will see that Chris has linked in several files. They are desginated by

    Here are the lines you need to copy in to your WordPress header.


    He also loads another script for the slider controls.

     

    That should all be loaded in the head of the site, before . The files should be loaded in the theme’s folder in a JS folder.

    From there, you can place the slider where you would like for it go with the code below. Here is what I did. I created a folder called images in the theme folder and a subfolder called slider. I then call all of the images that I want in the slider.






    • /images/slider/logo.jpg" alt="" />


    • /images/slider/slide-1.jpg" alt="" />


    • /images/slider/slide-2.jpg" alt="" />


    • /images/slider/slide-3.jpg" alt="" />


    • /images/slider/slide-4.jpg" alt="" />


    • /images/slider/slide-5.jpg" alt="" />


    • /images/slider/slide-6.jpg" alt="" />


    The last thing that you need to do is copy the CSS for the slider into your stylesheet for your theme. That should take care of all of it. Let me know if you have any more questions.

    # October 19, 2010 at 1:06 pm

    Hey!

    First, let me say thanks a lot for getting back to me and for being so helpful. I did what you asked but unfortunately it didn’t work. Let me tell you exactly what I did and maybe you can find the mistake. Don’t worry, I’m pretty good with explanations. Here goes:

    1. I pasted the first two pieces of code you gave me inside my header.php file, inside the ‹head›‹/head› tags.
    2. I pasted the third piece of code you gave me into my index.php file, before the loop (I want the gallery to show up on my home page).
    3. I took the entire js folder (not just the individual files) and put it in my current themes folder.
    4. I already have an images folder in my theme’s folder so I simply made a “slider” folder inside of it with the images I want to use.
    5. Lastly, I took the individual CSS files that were inside the CSS folder and added them to my theme.

    So what do you think? Where did I go wrong?

    # October 25, 2010 at 9:33 am

    Anyone?

    # November 5, 2010 at 10:39 pm

    =/

    # November 21, 2010 at 11:40 am

    Com’on CSS-Tricks people. I really need help with this. I will give anyone who helps me solve this issue $15 (via PayPal only). I know it’s not a lot of cheese, but all you’ll have to do is suffer a few annoying questions from me until I can get it to work. Thanks folks.

    # November 21, 2010 at 1:22 pm

    I don’t think < ?php bloginfo("stylesheet_directory"); ?> is correct, I think it’s meant to be < ?php bloginfo('template_url'); ?>

    Also, are you sure you’re loading up the actual jQuery file?

    # November 22, 2010 at 1:50 pm

    Hey man, thanks for helping me out here as well. I’m not sure what you mean when you ask “are you sure you’re loading up the actual jQuery file.” I’m not even sure what jQuery means, and I not sure if I have to upload the actual files or the folder with the files (does that make sense?). All I know is XHTML and CSS lol. Feel free to be as specific as you can. Thanks!

    # November 23, 2010 at 10:17 am

    Ok, people have been assuming you do know a bit about jQuery.

    First thing, upload the files to your theme folder: http://www.url.com/wp-content/themes/YourTheme/

    Add this within your section:






    Where #slider is your

      .

      Make sure that the files are linking correctly. To do this, once the page has loaded press ctrl+u—this will open the source. Browse to where these links you have just inserted are and click on them. Make sure they are opening the correct files. If they are, then it should be working. Also, do you have a live example of your site? It would be easier to debug if I could see the site.

    Viewing 15 posts - 1 through 15 (of 84 total)

    You must be logged in to reply to this topic.

    *May or may not contain any actual "CSS" or "Tricks".