Changing the number of images

[jugoretz]

Hi Robin (and I'm really Joe).

I can see what the problem is. That weird flickering/disappearing thing happens when there is a mismatch between the width of each individual image in the sliding menu (including their borders) and the total width of the menu as a whole.

So I had the same problem when I used 93 pixels as the width for each of 10 elements, and 931 as the width of the menu as a whole. I had 930 pixels worth of image, plus 10 pixels worth of border, so that added up to 940 pixels for all the images + borders, which was more than the total width available. When I changed it to 92 pixels per image, I had 920 pixels worth of images, plus the same 10 pixels worth of border, and that gave me a total of 930, which worked just fine.

In your case, I can see on your site that you've got each image set to 116 pixels, and the total width for the menu set (on line 6 of imageMenu.css) to 964 pixels. 116 * 8 = 928 + 8 (for the borders) = 936. Mismatch! 928 does not equal 936.

When I checked your site with firebug, and changed the image menu's total width to 931, the flickering stopped, and everything was fine.

Hope that makes sense!

[robin67]

Hi Joe,

Thank you for the speedy and detailed answer. I read it carefully, installed firebug and tried changing the image menu's width to 931 as suggested but then I lost the eigth image.

By my calculations, my image menu's total width should be 936 which is (116*8)+8 rather than the 931 which you suggested. But that doesn't work.

Then I spotted that the right border is 2px which would give a total width of 944 but that doesn't work either.

Either I'm missing something obvious (quite likely) or this new version of Sliding Doors just doesn't like eight images.

[jugoretz]

Hi Robin.

It definitely should work with 8 (although my arithmetic is sloppy at best!) And as far as I can tell, that flickering problem is always related to some kind of mismatch in the width of the menu and the width of the images. On your site I'm seeing a couple of different mismatches. It looks like you made the image menu wider than the default? It might be helpful to start from scratch with everything default except the number of images, and work from there, instead of changing more than one thing at a time.

But I think I see another problem, and it might be the real source of the issue!

When I look at your source code, I see

Code: Select all

<li id="menu-item-26" class="bk0">
<li id="menu-item-25" class="bk1">
<li id="menu-item-24" class="bk2">
<li id="menu-item-23" class="bk3">
<li id="menu-item-22" class="bk4">
<li id="menu-item-21" class="bk5">
<li id="menu-item-20" class="bk6">
<li id="menu-item-59" class="bk7">
<li id="menu-item-59" class="bk7">

And that could definitely be causing trouble. Not sure where it's coming from, but that is 9 items, not 8! You have the li=menu-item-59 class=bk7 in there twice!

See if fixing that will make things come out better.

[robin67]

Thanks Joe, everything sorted now. I appreciate all the detailed advice but actually, your best suggestion was to start again! I reinstalled the theme and followed your original instructions and now my eight sliding images work perfectly.

Thanks again!

[jugoretz]

Good news!

It really is a nice theme, and being able to customize it just a bit makes it even nicer!

[gomelgo]

I am not a programmer or designer, and am trying to understand what all of you are saying. But am not getting this at all. What is "header code in the div calle dimage menu."?

I've figured out a lot of stuff in this template, but have no idea how to change the images at the top, or where to even go to do that. I'd ideally like 5 images instead of 7. The template is gorgeous Wayne. Help a girl without a clue?

[jugoretz]

Hi gomego--

To do some of this (changing the number of images in particular), you are trying something fairly advanced. You do need to have some basic experience with editing WordPress theme files. But let me try to help a little bit.

As far as changing the images, that's not so hard. It's just a matter of setting "featured images" (from within the edit post menu in WordPress) for the posts you want to be in the menu. You first create your new images (using the template provided with the theme, if that's something you want to do), and then upload them (as you would upload any image to be used in a post) and check the box for "use as featured image."

Then you create a custom menu with the posts you just selected feautred images for, and select that menu as your "sliding navigation" menu (this is all in the menus area under appearance in the WordPress dashboard).

That's basic functionality for the theme.

If you want to have 5 images instead of 7, you're trying to do something more complicated.

To start with, you do NOT want to change the header code in the div called image menu. That's only workable in the old version of the theme. It doesn't apply anymore.

The way to do it now is to follow the instructions I posted a few posts above this one (this post viewtopic.php?f=9&t=4&start=30#p3557 ). Try working through those and then post if you have questions!

[rusty]

Thanks jugoretz your a life saver for noobs like me who know nothing about code....and i did not screw anything up ...Yeah
now to figure out how to change the height

[rusty]

to jugoretz for his wonderful help but i noticed that these lines needed to be taken out otherwise they still show up in header when i looked at it in firebug....or add lines
this is based on me only wanted 5 images....i found this in functions.php
you have to add lines if you have more images in the header like

if you want less images take out the following lines based on how many you want

<li class=\"bk5\"><a href=\"http://mac-host.com/support\" style=\"background: url('".$theme_url."/imagemenu/images/6.jpg') repeat scroll 0%;\">slidingdoor</a></li>
<li class=\"bk6\"><a href=\"http://mac-host.com/support\" style=\"background: url('".$theme_url."/imagemenu/images/7.jpg') repeat scroll 0%;\">slidingdoor</a></li>
If you want more images then add lines like

<li class=\"bk6\"><a href=\"http://mac-host.com/support\" style=\"background: url('".$theme_url."/imagemenu/images/7.jpg') repeat scroll 0%;\">slidingdoor</a></li>
and so on
hope this helps..

Has anyone figured out how to change height

thanks

[Forkboy]

So I did some more poking around, and I think I figured out how to make this work.

I'll post it here to help anyone else who might need to try.

It's not too hard, but sure wasn't easy to figure out. You have to make edits to imageMenu.css and functions.php. If you want, you could probably do that with a child theme--that would be the best practice so you still get upgrades and don't lose your edits. I'm not going to explain how to do child themes. Lots of good explanations of that out there on the web.

Here's the plan:

In functions.php, it's just a change to a few numbers. On line 147 in functions.php, we find

Code: Select all

 if($item_count <=5)

That number 5 is based on the default seven items in the slider. We have to change that number to be two fewer than the number of items we will have in our modified version (because the numbering of items starts with 0, not with 1). So let's use a 10-item sliding menu as an example. For a 10-item sliding menu, we will write

Code: Select all

(if($item_count <=8)

because 10 - 2 = 8.

Then on line 171, we will change the 6 in

Code: Select all

if($item_count == 6)

to be one less than the total number of items we want to have.

So for a 10-item sliding menu we will write

Code: Select all

(if($item_count == 9)

.

Last we will go to line 182 and find

Code: Select all

li class="bk6"

. We will change that six to be one number less than the number of items again.

So for the 10-item slider it will change to

Code: Select all

li class="bk9"

Then we will turn to imageMenu.css . Here we need to do a little arithmetic. First we need to go to line 41. This is where we find the width for

Code: Select all

#imageMenu ul li a

. This is 133px for the default seven-item slider. 133 x 7 = 931. That's our total width.

We need to change the width for each item in our new 10-item slider so they will all fit in that 931 total, so divide 931 by the number of items we want to have. In the 10-item slider, then, we get 931 divided by 10 = 93 , so that width in line 41 that should be changed to 93px. Except it would really be 93.1, and you can't really have fractions of a pixel. Beyond that, in the 10-item slider we now have more borders than we did in the seven-item slider, and each border takes up a pixel, so things are off even more. All that means that you will probably have to juggle the number of pixels a little bit.

In the 10-item slider, I found that 92 pixels instead of 93 was much better for the width. When I used 93, there was some strange crazy jiggling on hover on the tenth item in the slider. You'll need to play with that yourself--if you just add one image, or take away images, it might not be a problem. When you get up to 10, you definitely want 92px.

You also have to change line 52 of imageMenu.css . It gives the style for

Code: Select all

#imageMenu ul li.bk6 a

.

But bk6 will no longer be the last item in your slider. So that style would be applying to the wrong item. So we just change that bk6 to a number that is one less than the number of items we will have. In the case of my 10-item slider, that means it changes to bk9.

That's it. Everything else works well.

Work like a charm Thanks!!!