Was looking for a new jQuery slideshow the other day because the ones on file starting sucking goat sacks. Not that they really rocked from the start, but they were usable. Anyway upon updating some projects, came across the madebymuffin, Flexslider. Which so far looks ready to rock prime time (cross browsers, tablet gestures, etc...), out of the box.
Of course, some pros here may have this already, but flexslider appears less than 90 days old. Just in case, toss this into the WF Scripting War chest.
It would be cool if it was a war chest for scripting languages other than PHP (like Ruby, jQuery, Flash etc...)
Anyway back to the subject, this script is lightweight (currently 584kb) and highly configurable. If you have projects with tons of photos, slideshows or videos that you want to manipulate with ease, this script is for you. For Wordpress (or other CMS apps, commerce scripts, etc...) this is easy to implement in posts, loops or pages. Link to the js files and simply a few lines of code to your template.
Easy 3 step instructions taken from the Flexslider site.
Step 1.
Step 2.
Step 3.
Just in case you are a total newbie (don't worry everyone was at one point), here is an example of how to use this in a basic WP loop.
This is about a simple as you can get.
Details on the flexslider and slides classes are in the script, but you can get really wild with it.
Learn more here.
Version as of Nov 19th, 2011
If any of you js / jquery gurus get a hold of this and add more options to the default list, it would be coool of you to add them here for the rest of the community. Anyway thought to share, because it has really helped. Hopefully some of you here can get the same benefit. Gotta get back to work.
Of course, some pros here may have this already, but flexslider appears less than 90 days old. Just in case, toss this into the WF Scripting War chest.
It would be cool if it was a war chest for scripting languages other than PHP (like Ruby, jQuery, Flash etc...)
Anyway back to the subject, this script is lightweight (currently 584kb) and highly configurable. If you have projects with tons of photos, slideshows or videos that you want to manipulate with ease, this script is for you. For Wordpress (or other CMS apps, commerce scripts, etc...) this is easy to implement in posts, loops or pages. Link to the js files and simply a few lines of code to your template.
Easy 3 step instructions taken from the Flexslider site.
Step 1.
Code:
<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>Step 2.
Code:
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
<li>
<img src="slide2.jpg" />
</li>
<li>
<img src="slide3.jpg" />
</li>
</ul>
</div>Step 3.
Code:
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>Just in case you are a total newbie (don't worry everyone was at one point), here is an example of how to use this in a basic WP loop.
Code:
<div class="flexslider">
<ul class="slides">
[COLOR="Yellow"] <?php // Your basic wP loop start
if (have_posts()) : while (have_posts()) : the_post(); ?>
<li>
<img src="slide1.jpg" />
</li>
<?php // the basic finish
endwhile; ?><?php endif; ?>[/COLOR]
</ul>
</div>Details on the flexslider and slides classes are in the script, but you can get really wild with it.
Learn more here.
Code:
http://flex.madebymufffin.com/Version as of Nov 19th, 2011
Code:
http://flex.madebymufffin.com/files/FlexSlider-1.8.zipIf any of you js / jquery gurus get a hold of this and add more options to the default list, it would be coool of you to add them here for the rest of the community. Anyway thought to share, because it has really helped. Hopefully some of you here can get the same benefit. Gotta get back to work.
