Forums

HenryHunter

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!

virtual

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.

HenryHunter

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

HenryHunter

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.

HenryHunter

Anyone?

dclardy

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.

HenryHunter

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.

dclardy

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

<script></script>

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

<script type="text/javascript" src="<?php bloginfo("stylesheet_directory"); ?>/js/jquery.easing.1.2.js"></script>
<script type="text/javascript"  src="<?php bloginfo("stylesheet_directory"); ?>/js/jquery.anythingslider.js" charset="utf-8"></script>

He also loads another script for the slider controls.

<script type="text/javascript"> 
    jQuery(document).ready(function($){
        function formatText(index, panel) {
    		  return index + "";
    	  };
    
        $(function () {
        
            $('.anythingSlider').anythingSlider({
                easing: "easeInQuad",        // Anything other than "linear" or "swing" requires the easing plugin
                autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not.
                delay: 3000,                    // How long between slide transitions in AutoPlay mode
                startStopped: false,            // If autoPlay is on, this can force it to start stopped
                animationTime: 600,             // How long the slide transition takes
                hashTags: false,                 // Should links change the hashtag in the URL?
                buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
            		pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
            		startText: "Go",                // Start text
    		        stopText: "Stop",               // Stop text
    		        navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
            });
            
            $("#slide-jump").click(function(){
                $('.anythingSlider').anythingSlider(6);
            });
            
        });
    });        
</script>

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.

<div class="anythingSlider">
        
			<div class="wrapper">
            <ul>
               <li>
               <img src="<?php bloginfo("stylesheet_directory"); ?>/images/slider/logo.jpg" alt="" />
               </li>
               <li>
               <img src="<?php bloginfo("stylesheet_directory"); ?>/images/slider/slide-1.jpg" alt="" />
               </li>
               <li>
			   <img src="<?php bloginfo("stylesheet_directory"); ?>/images/slider/slide-2.jpg" alt="" />           
               </li>
               <li>
			   <img src="<?php bloginfo("stylesheet_directory"); ?>/images/slider/slide-3.jpg" alt="" /> 
               </li>
               <li>
               <img src="<?php bloginfo("stylesheet_directory"); ?>/images/slider/slide-4.jpg" alt="" /> 
   			   </li>
               <li>
               <img src="<?php bloginfo("stylesheet_directory"); ?>/images/slider/slide-5.jpg" alt="" />
               </li>
               <li>
               <img src="<?php bloginfo("stylesheet_directory"); ?>/images/slider/slide-6.jpg" alt="" />
               </li>
		  </ul>        
          </div>

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.

HenryHunter

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:

I pasted the first two pieces of code you gave me inside my header.php file, inside the ‹head›‹/head› tags.
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).
I took the entire js folder (not just the individual files) and put it in my current themes folder.
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.
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?

HenryHunter

Anyone?

HenryHunter

=/

HenryHunter

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.

jamy_za

<script type="text/javascript" src="<?php bloginfo("stylesheet_directory"); ?>/js/jquery.easing.1.2.js"></script>
<script type="text/javascript"  src="<?php bloginfo("stylesheet_directory"); ?>/js/jquery.anythingslider.js" charset="utf-8"></script>

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?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script&gt;

HenryHunter

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!

jamy_za

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

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

Add this within your <head></head> section:

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/anythingslider.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script&gt;
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.2.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#slider').anythingSlider();
});
</script>

Where #slider is your <ul>.

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.

HenryHunter

Okay dude. I'm going to do ALL of this on Wednesday. I will send you a message once it's working or not working. Thanks for helping me out even more.

HenryHunter

Okay, I couldn't wait so I just tried my best now. Something definitely went wrong. The images are not sliding, instead they're just showing up in a list. Here's the link to my site:

http://www.LearnWriter.com/

Let me know what you think I did wrong. Thanks.

jamy_za

Go to github and download the latest version of anything slider. Extract it into a folder. You should have a bunch of folders named: colourbox, css, images, js.
Copy the 'css, images, js' folders into your theme folder. Delete anything you feel is unnecessary—such as those slide example–images, etc.

Remove anything you've already added to your header section that is related to anythingSlider and replace it with this:

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/anythingslider.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script&gt;
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.anythingslider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        $('#anything_slider').anythingSlider();
});
</script>

Now, remove the ID from div#anything_slider and add it to the <ul> - You have to target a <ul>, not a <div>

It should look like this:

<ul id="anything_slider">
	<li>
		<a href="http://www.learnwriter.com/videos/mla-template-video/"&gt;
			<img src="http://www.learnwriter.com/wp-content/themes/LearnWriterTemplate/images/slider/MLA_Template.png&quot; alt="MLA Template" />
		</a>
	</li>
	<li>
		<a href="http://www.learnwriter.com/videos/find-replace-text/"&gt;
			<img src="http://www.learnwriter.com/wp-content/themes/LearnWriterTemplate/images/slider/Find_Replace.png&quot; alt="Find and Replace" />
		</a>
	</li>
	<li>
		<a href="http://www.learnwriter.com/character-style/"&gt;
			<img src="http://www.learnwriter.com/wp-content/themes/LearnWriterTemplate/images/slider/Character_Styles.png&quot; alt="Character Styles" />
		</a>
	</li>
</ul>

It should work, but if not, upload it and let me have a look.

HenryHunter

Okay dude! We're half way there (I think). Can you take a look at the site (http://learnwriter.com) and tell me what you think happened? Do you think this is a CSS problem? I want to use my own border (1px solid #color), and I want it aligned with the content on posts (15px from the edge of the page). It should only be 620px wide too.

Also I want the gallery to start right away (no stop/start button), and pause for 3 seconds for each image. Also, I've seen other galleries that have left/right arrows when you hover over the gallery. I like this look over the look that it has now. Thanks for all the help, dude.

jamy_za

Currently the gallery does start right away and it does pause on a slide for 3 seconds. In order to hide the start/stop button, add this to your CSS:
.start-stop{display: none;}
To change the width of the slider, open anythingslider.css and change 'width: 700px;' to 'width: 620px;' - This is on line 11.

Do you mean you want the current arrows to appear once you hover on the slider?

I dislike the start/stop thing with anythingSlider and I like the thought of having a pretty cool 'fader' too so I'm busy creating a content slider too - You can find the beta here if you're want to have a look (Note: AnythingSlider is definitely way more advanced with much more features)

HenryHunter

I did change the width to 620px, but it's not respecting my change. I want the slider to be as wide as the images in it (with a 1 or 2 pixels for a border). Right now it's 700px wide because there are some divs to the left, right, and bottom of the slider, but I'm not sure why. Any thoughts?

I changed my mind about having the arrows show up when I hover over the slider. I kind of like the current getup with the option to move to a different slide by clicking on the numbers at the bottom. I just need to slim the width of the slider and get rid of those invisible divs.

jamy_za

Add this to your stylesheet:

#art-main div.anythingSlider{width: 620px;}

HenryHunter

Hey I added that style to my style.css file and that sort of worked. But I was using Firebug and realized that there are invisible left and right arrow buttons to the left and right of the gallery window. Not sure why or how to get rid of them. Not sure if you know what Firebug is, but if you do, and if you want to or have time, you can use it to see what's going on.

jamy_za

Change this:

$(document).ready(function(){
        $('#anything_slider').anythingSlider();
});

To this:

$(document).ready(function(){
        $('#anything_slider').anythingSlider({
                buildArrows: false
        });
});

HenryHunter

Cool, but where do I find the first code?

jamy_za

In your header.

Earlier I said to remove everything and replace it with this:

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/anythingslider.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script&gt;
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.anythingslider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        $('#anything_slider').anythingSlider();
});
</script>

Now remove:

$(document).ready(function(){
        $('#anything_slider').anythingSlider();
});

And replace it with:

$(document).ready(function(){
        $('#anything_slider').anythingSlider({
                buildArrows: false
        });
});

HenryHunter

Thanks dude. Again and again, sorry for being a pest. I know this has to be the longest post in the history of the Internet, but this is what I still want to accomplish:

Make the Gallery take up only the space I want (620px + 1-2px for border).
Align the left side of the gallery with the he left side of the posts titles (I guess that's good design).
Can you tell me how to change the colors of the numbered navigation of the gallery? I'm playing with the CSS but that's not working.

I want to mention that when I added the CSS files from the Anythign Slider folder, I didn't add them into my Styles.css file. I added them individually to my theme. I assume that's correct, but just wanted to let you know in case it's not. The reason I mention this is because when I make a change in the AnythingSlider.css file, nothing happens. I'm wondering if I had to copy & paste that file to my Style.css file. Doubt it but wanted to run it by you.

Thanks a freaking lot dude.

daredanger

You can also try Auto-Playing Featured Content Slider available at http://css-tricks.com/downloads/

For a newbie I think that customizing this slider is much more easier than customizing Anything Slider.

HenryHunter

Hmm. I've invested a lot of time trying to get AnythingSlider to look how I want it to. I feel like I'm almost there (here's my site: LearnWriter.com). You say this other slider is "much easier" to customize AnythingSlider. Why do you feel this way? Remember, I don't know jQuery at all. Don't know PHP either.

Also the instructions for AnythingSlider were not user friendly at all in my opinion. You download the slider, you get a bunch of folder with files in them, but then what? Where are the DETAILED instructions on what to do with these files? Do you need all of them or can you abandon some files? Sorry for going on a rant here, dude. Just want to make sure that if I abandon AnythingSlider, this Auto-Playing slider will be much easier to customize.

jamy_za

To align anything slider to the left, add this to your css:

div.anythingSlider{padding: 0 0 28px 0 !important;}

and to change the color, add this to your css:

div.anythingSlider.activeSlider .thumbNav a.cur, div.anythingSlider.activeSlider .thumbNav a{background-color: #666 !important;}

AnythingSlider isn't particularly difficult to use. I don't think other sliders will be much more/less difficult.

HenryHunter

Thanks jamy_za! I'm gonna stick with it. Now I'm assuming you want me to add that to my style.css file, not the anythingslider.css file. Does the anythingslider.css serve a real purpose? I've made changes to the file but see no results on my site. Maybe the file is not linked properly in the header?

jamy_za

Add it to your style.css file. Leave anythingslider.css, it is working as it should.

HenryHunter

Hey sorry for not responding for a while. I've been playing with the CSS myself and I've finally made some progress but the gallery is still not perfect. Instead of explaining to you what's left, I recorded a video of the issues and uploaded it up on YouTube. I think that's an easier way to explain it. If you don't mind taking a look at it here's the link to the video.

If I wasn't clear on any point just let me know. Thanks a million dude.

wetfeet

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

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/anythingslider.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script&gt;
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.anythingslider.js"></script>
<script type="text/javascript">
    
      function formatText(index, panel) {
  		  return index + "";
  	  };
    
      $(function () {
      
          $('#slider1').anythingSlider({
            easing: "easeInOutExpo",        // Anything other than "linear" or "swing" requires the easing plugin
            autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not.
            delay: 3000,                    // How long between slide transitions in AutoPlay mode
            startStopped: false,            // If autoPlay is on, this can force it to start stopped
            animationTime: 600,             // How long the slide transition takes
            hashTags: true,                 // Should links change the hashtag in the URL?
            buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
            pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
            startText: "Go",                // Start text
            stopText: "Stop",               // Stop text
            navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
          });
          
          $("#slide-jump").click(function(){
              $('.anythingSlider').anythingSlider(6);
          });
          
      });
    </script>

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

HenryHunter

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.

jamy_za

@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.

HenryHunter

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?

jamy_za

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.

HenryHunter

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?

jamy_za

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.

HenryHunter

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.

micronetic

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' />

<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css"/>

<script src="<?php bloginfo('template_url'); ?>/js/jquery.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.2.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php bloginfo('template_url'); ?>/js/nav.js" type="text/javascript"></script>
<script type="text/javascript">
    
        function formatText(index, panel) {
		  return index + "";
	    }
    
        $(function () {
        
            $('.anythingSlider').anythingSlider({
                easing: "easeInOutExpo",        // Anything other than "linear" or "swing" requires the easing plugin
                autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not.
                delay: 4000,                    // How long between slide transitions in AutoPlay mode
                startStopped: false,            // If autoPlay is on, this can force it to start stopped
                animationTime: 600,             // How long the slide transition takes
                hashTags: true,                 // Should links change the hashtag in the URL?
                buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
        			 pauseOnHover: false,             // If true, and autoPlay is enabled, the show will pause on hover
        			 startText: "Go",             // Start text
		        	 stopText: "Stop",               // Stop text
		          navigationFormatter: formatText       // Details at the top of the file on this use (advanced use)
            });
            
            $("#slide-jump").click(function(){
                $('.anythingSlider').anythingSlider(6);
            });
            
        });
    </script>

<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

<!-- WP generated header -->
<?php wp_head(); ?>
<!-- Ende WP generated header -->

</head>

And here the other part in my index.php:

		<!-- Anfang Slideshow -->

<div class="anythingSlider">

<div class="slide_wrapper">

<ul>
<li>
                 
<div class="textSlide">
                 
<img src="<?php bloginfo('template_url'); ?>/images/slide1.png" alt="innovation" />
                    
<p class="slider">Lorem Ipsum</p>

<p class="txtSlide">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</p>
              
</div>
                 
</li>
              
              
<li>
            
<div class="quoteSlide">
                 
<blockquote>Life is conversational. Web design should be the same way. On the web, you&#39;re talking to someone you&#39;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.</blockquote>
<!-- <p> - <a class='perma' href='http://www.lav-tt.de/' target="_blank">lav-tt.de</a></p> -->
                 
</div>
</li>


<li>
                 
<div class="textSlide">
                 
<img src="<?php bloginfo('template_url'); ?>/images/slide1.png" alt="innovation" />
              
</div>
                 
</li>



<li>
            
<div class="quoteSlide">
                 
<blockquote>Life is conversational. Web design should be the same way. On the web, you&#39;re talking to someone you&#39;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.</blockquote>
                 
</div>
</li>

</ul>        
</div>       

          
</div> <!-- END AnythingSlider -->

illscode

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......

Mottie

Hi illscode!

Check out the wiki page on how to set up AnythingSlider. It's not very detailed, but it shows the necessary code and where it needs to go.

illscode

many many thanks!

elfin

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!

Mottie

Hi Elfin!

Your links don't work, and I think it might be best to ask a new question... I can't help you since I don't know wordpress very well.

elfin

I'm sorry, here is the link
http://stackoverflow.com/questions/1711715/php-script-to-parse-directory-list-all-images-and-add-class-last-to-the-last-i

Baldieboy

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).

Mottie

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.

Baldieboy

Mottie,
You are a star my friend. Another question I have is when navigationSize is set to a number lower than the number of tabs, it does not automatically sroll when an image outside of the range is active (ie. 8 slides with navigationSize set to 4, but when slideshow advances to slide 5 the navigation still only shows 1-4 instead of jumping to 5-8). Is there any way I can get around this else it's not obvious to the user which slide is active? Some of my slideshows will have 30 images/videos (family events etc) so I definately have to limit the number of tabs shown in the navigation.

Fantastic slider though!

treehouse : what would you like to learn today?

Forums

How to use the Anything Slider