DoubleMule

 | Half as Smart... Twice as Stubborn...

Add a Simple Custom JS Rotator to Thesis Multimedia Box

The default Thesis theme contains a rotator function in the Multimedia Box.

But perhaps you want to make your own, one that is extremely simple to stab into a given post or page, or that can go wherever you like, and can use different numbers of images to draw from, different dimensions, and different images on a per-post (or page) basis?

The Mules do so like to please.

And unlike the last tutorial, which ended in not a little frustration (plus two among our number foundered in the cornfield — there was a reason for the fence), this one’s so simple a wobbly-legged foal could follow along.

If you can paste code and upload images (and know “where they are” in URI terms), you are pretty well finished.

Paste this below gunk into “Custom Multimedia Box Code” (update: the Thesis MM Box no longer supports JS output… the herd hereby declares the comment here to have primacy, allowing your use of this rotator in any hook — tutorial upgrade!) — the box is below the post editing box — and edit the code to grab your own images at certain dimensions… they either need to be all the same dimensions, or you can remove the width and height parameters — not validating code, surely, but the Mules are stubborn and the W3C is pushy.

Mules win.

As usual, when pasting this into your code, you’ll have to check for forward-facing quotes.  If any of you humans know, without plugins, how to make WordPress obey pre or code tags, we’ll send you a bushel of human food. Or at least we’ll consider saying thank you…

<script language="JavaScript">
<!--
var img_rnd = new Array ("http://www.doublemule.com/blog-images/rotateone.jpg", "http://www.doublemule.com/blog-images/rotatetwo.jpg",
"http://www.doublemule.com/blog-images/rotatethree.jpg");
var i = Math.floor(3*Math.random());
document.write('<img src="' + img_rnd[i] + '" width="400" height="300" alt="Mules are Faster than Clydesdales" />');
//-->
</script>

You can see the 400 x 300 dimensions and the alt tag above, these you can change. Also, this is set-up such that three images are rotated (on page load) and if you wish to add more, follow the pattern, then remember to take “# of my images = math floor” which sounds harder than it is – see the 3*Math.random about halfway down? That “3″ is “we have three images” – Thesis theme users are a smart lot, you can handle that, right?

So then. Done. [ Update: except not. Because you need to see this comment... ] If you want a TXT file to avoid the forward-quotes issue, it’s here but thanks to Internet Explorer, it’s a ZIP of a TXT because Explorer 7+ runs the code as JS and not text. Sigh.

Oh, and as per usual, kindly use your own path and images. Ours are not attractive; it’s some human female by our estimate.  We keep the pin-up Mule girls in our private collection. Refresh this page a few times and you should see the page-load rotation function (on this post only, at the top… where again, the MM Box is no longer the focus).

Socialist Media for Humans to Click...

Add Unsubstantiated & Wild Claims from Your Fantasy World...

The herd may very well kick or bite your vile spam...

1 Rebecca whinnied... 05/31/2012 at 8:25 pm

Thanks for the spiffy code. Is there a way to make these images (a) link to somewhere and (b) appear in the content column of only one page instead of the sidebar? When I tried to combine the code above with the feature box code from this tutorial [groupmindmedia.com/tutorials/thesis-feature-box-example-multimedia-box-inside-feature-box/#comment-145], I just got two empty grey boxes where the pictures should be.

Reply

2 The Mules nickered back... 06/7/2012 at 1:15 am

Let the herd address (b) first, this being, conditional output of this as a function, and anywhere you like rather than the Multimedia Box. One note; Thesis in roundabouts 1.8 series dismissed JS execution from the MMBox arsenal for reasons, the Dog opines, of security… making this original tutorial no longer very useful without adjustments of the kind you’re asking.

Let’s then make this the new standard… and we shall change it on this post quite alike it… where we shall use a hook that outputs the full code necessary to get the rotation working. We’ll then talk (a) HREFs momentarily.

This code, with a slightly different condition for our barn, this being a post and not a page, is what produces the image at the top of this recently-revisited post… it goes into custom_functions.php, naturally…

Revision… Certain line breaks have been added to avoid scrolling… also, each instance of “http” has been sliced from the beginnings of “www” in URL paths, for reasons of this comment wanting very much to make “http” prefixes clickable links…

function rotating_images_in_mule_content() {
if (is_page('99')) {
?>
<div class="mule-rotations">
<script language="JavaScript">
<!--
var img_rnd = new Array ("www.doublemule.com/blog-images/rotateone.jpg", 
"www.doublemule.com/blog-images/rotatetwo.jpg", 
"www.doublemule.com/blog-images/rotatethree.jpg"
);
var i = Math.floor(3*Math.random());
document.write('<img src="' + img_rnd[i] + '" width="400" 
height="300" alt="Mules are Faster than Clydesdales" />');
//-->
</script>
</div>
<?php
    }
}
add_action('thesis_hook_before_content', 'rotating_images_in_mule_content');

Change the page identifier of ‘99‘ to the page ID of your choice.

The last line defines the hook, the general area of output, and for the sake of cosmetics, this line was added to custom.css to center the images that are produced by the above…

.custom .mule-rotations img { 
display:block; margin-left:auto; margin-right:auto; 
}

Now then, about (a) this idea of hyperlinking around… it can be done rather easily, should you wish to link to the same place, no matter the image pulled from the pot. This is accomplished by changing the previous custom_functions.php line, the one straight above the closing </script>, to instead be this. We shall show the before and after…

Original…

document.write('<img src="' + img_rnd[i] + '" width="
400" height="300" alt="Mules are Faster than Clydesdales" />
');

With hyperlink…

document.write('<a href="www.doublemule.com/" title="Mules Rule">
<img src="' + img_rnd[i] + '" width="400" height="300" alt="Mules are 
Faster than Clydesdales" /></a>
');

Once more, a reminder that the “http” is missing in response to comments making a hash of this — you will wish to have the usual http-colon-slash-slash in a live edition. But there you have it…

Cheers from the herd and a tail-twitch from the Cat, this being as far as her affections extend to those not smelling of boiled liver.

3 jennifer whinnied... 06/5/2012 at 11:42 am

Thank you!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Reply

4 The Mules nickered back... 06/7/2012 at 2:02 am

Delighted to oblige.

The herd finds that a mild cleansing solution can resolve stuck keys!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

The South Pasture