DoubleMule

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

Slideshow Image Gallery for the Thesis Theme

Receiving notice of a difficult though resolved plugin issue with NGG… the Next Gen Gallery… and Thesis — and other themes — caused the Mules to wonder if there were not an alternative route. Not a plug-in, but something that could be accomplished without editing core Thesis or WordPress files, a slideshow or image revolver that allows for a flexible “fade-in, fade-out” solution using CSS and JavaScript.

Our scars are deep – we’ve since removed the word “simple” from this tutorial.

Update… The herd has moved a small version of this slider functionality to the Multimedia Box, which in the herd’s site revision, now appears above the navigation menu. It slides and fades like a champion.

Luckily, an excellent solution already exists, and our example of a functional rotating image gallery for Thesis use draws heavily, if not exclusively, from the work of others in the “slideshow” department. First, the Mules added a dash of new DIV love to custom.css, which we presume Thesis users know how to go about doing:

#photodiv { background-repeat: no-repeat; }

Next, we ate several apples. You should try one. Golden, green, red, they’re all good. Back at it! We then, for our single-page example, slapped this code into our Custom Multimedia Box Code, which in Thesis, is below the content area for creating new posts. As you’ll swiftly recognize, all you Thesis users will want to use your own slideshow images – the first one is defined here, and we’ve used a copyrighted image to keep things pasture perfect, so kindly use your own, eh?

<div id="photodiv">
<img id="photoimg" src="http://www.doublemule.com/blog-images/slideshow1.jpg" />
</div>

Remember to remove the idiotic forward quotes if WordPress has its way – whatever happened to PRE and CODE actually listening? Anyway, considering this is a custom slide show gallery deal, so far things have been generally simple painless until now. Let’s keep it that way. Calling the JavaScript from within a custom hook is not so difficult, right?

Oh Dear Lord.

We here edit custom-functions.php and stab in this glorious hunk of demonic code [txt file]. It’s not the right way – in fact it’s quite horrid – but it’s nearly dark, the fence is down, and there’s a cornfield over yonder. Tonight is our only chance. Upload your slide show’s jazzy new code after pasting it into custom-functions.php and call it done.

Figure out how to call an onload function and you could externalize the JS file and save a great deal of clutter in your custom-functions.php file. Eh, pretty much done. You’ll want to change the image array in the custom PHP file to display your own images (duh). You can also adjust the time an image in the slideshow gallery is displayed, how quickly the fade transition effect occurs, and set the “rotations” (number of times the slideshow repeats). The Javascript output is nicely commented, thanks to the humans who put the time into making this originally, so we’ll not get into details on this aspect of the slideshow’s functionality.

This tutorial presumes you wish to have the same gallery and slideshow appear globally on your blog or site domain.

To remove Internet Explorer rendering issues, if you wish to show the fading gallery on only selected posts/pages, and not on certain others, you’ll need to use conditional statements to avoid problems. Along with JS, CSS, and PHP, the Mules are convinced that IE is the devil. But that is a tutorial for another time. About conditional page selection. We’re not messing with the devil. Corn!

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 Lori520 whinnied... 05/21/2009 at 6:53 pm

I LOVE this tutorial. I have it up on my blog right now. The problem I am having is that it does not allow my drop down menu to work properly. I would not mind if the menu items went over the picture, but I think it is trying to go under. Any suggestions?

http://laurelwreathsreflections.com/lorisbookreviews/

Reply

2 The Mules whinnied... 05/21/2009 at 9:52 pm

Welcome, Lori, we’re glad you like this one. Considering you are using the full-width framework and wrap your navigation in a unique DIV area, our thought would be to use position:absolute and a high z-index in an attempt to allow the navigation layer to overcome the rotator code’s visual prominence. You are correct, the nav is functional but shows underneath the rotator. Note that IE fails differently from a syntactical DOM choke on line 38, which is unrelated to the z-index concern.

Reply

3 Lori520 whinnied... 05/25/2009 at 4:08 pm

Thank you, the Z-index did the trick. Thank you!

Reply

4 The Mules whinnied... 05/25/2009 at 4:32 pm

You’re welcome!

Reply

5 tori whinnied... 07/12/2011 at 12:25 am

Hi my Thesis multimedia box image rotator isn’t working. The images just sit there. I have about 50 images in the rotator folder. The images rotate when I manually reload the page, but not otherwise. Unless it’s just taking hours. I’d like them to rotate every 10 seconds or so, like the sample images did. My images are all at 1:1 aspect ratio and the design option is set to rotate. Images are all under 20kb. Thank you for your help.

Reply

6 The Mules whinnied... 07/14/2011 at 3:17 pm

The default Thesis rotator function is based on page loads, not a timer. This above… or other plugins and sliders… is the type of code approach needed to give a time-based refresh response to the Multimedia Box.

Reply

7 web developer whinnied... 08/14/2011 at 3:41 am

Thanks for new tips and ideas. Hope it helps.

Reply

8 Ruth whinnied... 10/14/2011 at 1:19 pm

Thanks for this great tutorial! Works great on posts :) I have 2 questions though… Can you use this on a page instead of a post? and I’m wondering why the box around my image is larger than the images… can I center the images or get the box smaller? Here’s a link to the post: [ 404 link ]

Reply

9 The Mules nickered back... 10/31/2011 at 3:17 am

Ruth,

You ought be able to do achieve both your desires.

The herd would advise editing of the JS defined widths, and with a dash of work in your custom.css file, the pigs should fly.

10 surf star whinnied... 11/15/2011 at 4:03 pm

Hi

how do i upload images to the rotator folder? I am a newby, my website is http://surfstarmorocco.com how do i make a gallery with the code you gave for css? please give me an idea

all the best surf star

Reply

11 The Mules nickered back... 11/16/2011 at 2:04 am

The herd would advise updating to Thesis 1.8.2 rather than Thesis 1.8, at which time you ought change /custom-sample to /custom as you currently are running 1.8 without this folder renamed…

A simple FTP client would then allow the uploading of image files to the /custom/rotator section. There are five sample images. Delete those. Add yours. Do not use spaces or other foolishness in your image file names, and you should be hot to trot.

12 Kacey whinnied... 12/30/2011 at 3:54 pm

How do I change the image array in the custom php to my own images, I can’t find it.

Reply

13 The Mules nickered back... 12/30/2011 at 4:41 pm

Lines 32, 33, and 34 in the TXT document contain the image locations.

Removing the “http” here to avoid creating links…

var gblImg = new Array(
"YOURDOMAIN.com/blog-images/slideshow1.jpg",
"YOURDOMAIN.com/blog-images/slideshow2.jpg",
"YOURDOMAIN.com/blog-images/slideshow3.jpg"
);

Change the URI appropriately, and you’ll have the Cat’s meow.

She may ask for it back… silly creature.

14 Kacey whinnied... 12/30/2011 at 11:07 pm

Okay I found where I’m suppose to put my domain. I replaced it, I’ve uploaded 5 generic pictures to my media library and my rotator file in bluehost, but I can only get the first image to come up and then it goes to ? for each of the pictures after that.

Am I suppose to put more than the one image in the multimedia box code, or where do I actually put the image codes I want to display?

Sorry I’m kind of a newbie so please explain all steps.

Reply

15 Kacey whinnied... 12/30/2011 at 11:18 pm

Sorry I whinnied too quickly…I figured out what I was doing wrong, thank you so much for your post, and your help!!!

Reply

16 The Mules nickered back... 12/30/2011 at 11:32 pm

You are quite welcome Kacey… a new year’s coming on… we are aiming at any such karma points as can be had. ;)

The South Pasture