Changing sliding menu open item width

[kilrathi]

I've found plenty of topics about changing the number of images, closed image width, and column types. I've yet to find an answer to this question so i bit the bullet and decided to post for help.

I need to change the open (mouseover, hover, whatever you wanna call it) width of each item on the sliderbar.

Here's the source code for my page:

Code: Select all

<div id="imageMenu">
    <!-- THESE ARE THE LINKS YOU GO TO WHEN YOU CLICK ON A SLIDING DOOR IMAGE-->
    <!-- change the href to look like this: <a href="yourlink.com">     -->
        <ul id="menu-slider" class="">
            <li id="menu-item-10" class="bk0">
                <a href="http://**edit**/?page_id=4" style="background-image: url(http://**edit**/wp-content/uploads/2012/06/Poster-2011-e1340678479748.jpg); background-attachment: scroll; width: 68px; background-position: 0% 50%; background-repeat: repeat repeat; ">2011</a>
            </li>
            <li id="menu-item-20" class="bk1">
                <a href="http://**edit**/?page_id=11" style="background-image: url(http://**edit**/wp-content/uploads/2012/06/Poster-2010-e1340677262202.jpg); background-attachment: scroll; width: 68px; background-position: 0% 50%; background-repeat: repeat repeat; ">2010</a>
            </li>
            <li id="menu-item-30" class="bk2">
                <a href="http://**edit**/?page_id=24" style="background-image: url(http://**edit**/wp-content/uploads/2012/06/Poster-2007-e1340677532172.jpg); background-attachment: scroll; width: 310px; background-position: 0% 50%; background-repeat: repeat repeat; ">2007</a>
            </li>


The one labeled "bk2" is the open image. Its width is set to 310. I want to change that number when every image is hovered over. I looked in the functions.php file and I'm fairly sure that's where this variable is being set, but I can't decipher the variables enough to set it to what i want. My target width for every image on the slider bar when its open (mouseover, hovered, active, whatever) is 150px. Right now when the images are open the width is set to 310px.

I did not include all the code for all 10 sliderbar images. It seemed redundant. I followed the guide here to increase the sliderbar images from 7 to 10.

Any help would be appreciated.

[kilrathi]

Well i figured out part of the problem. I made the images not repeat themselves anymore. Since my images are half the width the sliding bar expect it was repeating the image twice.

Line 163 of functions.php reads

Code: Select all

        $item_output = '<a' . $attributes .' style="background: url(\'' . $thumbnail. '\') repeat scroll 0%;">';

If you change it to this:

Code: Select all

        $item_output = '<a' . $attributes .' style="background: url(\'' . $thumbnail. '\') no-repeat scroll 0%;">';

Also you have to adjust line 187
Original:

Code: Select all

$item_output = '<a' . $attributes .' style="background: url(\'' . $thumbnail. '\') repeat scroll 0%;">';

Modified:

Code: Select all

$item_output = '<a' . $attributes .' style="background: url(\'' . $thumbnail. '\') no-repeat scroll 0%;">';

The images are no longer duplicated. I still can't shorten the width of the sliding images, but at least they aren't repeating now. Any one else have any insight into this?

[kilrathi]

I figured out how to modify the width of the images. I don't understand why this works, but it does.

in imageMenu.js look for line 32

Code: Select all

this.widths.openSelected = this.options.openWidth;

I changed it to this:

Code: Select all

this.widths.openSelected = Math.round(this.options.openWidth-150);

150 was the magic number i needed to get the width right on my open images. Change that number to fit you needs.

I know zero about java, but i'm guessing the code is looking at the variable "openWidth" at the top of this script. Mine is set to 150 but if i lower that number it doesn't have any effect on the width of the imgaes once they're open (hovered, mouseover or whatever). When i modify the lines above that seems to do the trick. Maybe someone with some javascript knowledge can fill me in on why changing the variable didn't work in the first place.