Changing the number of images

Any questions about styling and customising the layout, changing the number of columns, changing the number of sliding images and so on.

Re: Changing the number of images

Postby hushbboo » Fri Nov 05, 2010 7:13 am

hi - i would like to add to the number of images, i have nine instead of 7, i have read the posts for how to reduce, however it has not left me feeling confident on how to increase the number? any info would be greatly appreciated ty
hushbboo
I'm new here
 
Posts: 1
Joined: Thu Nov 04, 2010 7:52 am

Re: Changing the number of images

Postby cappy » Thu Nov 11, 2010 9:03 am

Hy!

I looked through the topic, i followed the instructions. I would like to use 4 images in the image-menu, but I have some problem with it :)

The picture:
Image

There's a line below the menu ( i think from the last picture ( num4)

When i choose one of the menu option.. next picture:

Image

The white line is increased...


What i change so far:

#imageMenu ul li a {
/* change to text-indent: -1000px; if you want to use images in the menu instead of text*/
background:#FFFFFF none repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;
width:232.75px;
height: 200px;
font-weight: bold;
font-size: 24px;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: white;
text-decoration: none;


for ( $counter = $count+1; $counter <= 4; $counter += 1) {
$output = $output.'<li class="page_item bk'.($counter).'"><a href="" title=""></a></li>';


#imageMenu ul li.bk1 a {

background: url(images/1.jpg) repeat scroll 0%;
}

#imageMenu ul li.bk2 a {
background: url(images/2.jpg) repeat scroll 0%;
}

#imageMenu ul li.bk3 a {
background: url(images/3.jpg) repeat scroll 0%;
}

#imageMenu ul li.bk4 a {
background: url(images/4.jpg) repeat scroll 0%;
}


border-right-style: none;
}


<-- deleted, the 5-6-7 ul li.bk...


Somebody? :)
cappy
I'm new here
 
Posts: 1
Joined: Thu Nov 04, 2010 8:15 am

Re: Changing the number of images

Postby Bepper » Sun Dec 19, 2010 3:26 pm

I have exectly the same problem as Cappy above! :roll:

Please could anybody who have succesfully configurated the number of pictures, lay out some guidelines in this thread ?
Bepper
I'm new here
 
Posts: 2
Joined: Sun Dec 19, 2010 2:54 pm

Re: Changing the number of images

Postby Bepper » Wed Dec 29, 2010 1:20 am

Hi again,

It seems that the above problems are resolved in version 2.0.
So 133px times 7 then divided by as many pictures you wanna use - works! :ugeek:

Unfortunately you then have to make a lot of CSS changes afterwards, if you prefer the look of earlier versions :?
Bepper
I'm new here
 
Posts: 2
Joined: Sun Dec 19, 2010 2:54 pm

Re: Changing the number of images

Postby remba » Wed Jan 12, 2011 10:00 pm

Hello Everyone,

Love the theme and at the same time I am pulling my hair out. I have looked all over the boards in an attempt to find a solution to my problem and have not found anything that works.

I am attempting to change the number of sliding images on the right hand slider at http://www.rembaproject.com from 7 to 5. Here is what I have already done:

--------------------------------------------------------
Step 1) Header change from 7 to 5:
<?php slider_menuparse(wp_list_pages('sort_column=ID&depth=1&number=5&title_li=&echo=0')); ?>

Step 2) Functions change from 7 to 5:
for ( $counter = $count+1; $counter <= 5; $counter += 1) {

Step 3) imageMenu.css changes to accommodate for 5 images (changed slider image height to 141.6 (708/5) and removed the ul li.bk6 and ul li.bk7 sections):

#imageMenu ul li a \{\
\
/* change to text-indent: -1000px; if you want to use images in the menu instead of text*/\
background:#FFFFFF none repeat scroll 0%; border-right: 2px solid #fff;\
cursor:pointer;\
display:block;\
overflow:hidden;\
width:240px; /*image width*/\
height: 141.6px;\
font-weight: inherit;\
font-style: inherit;\
font-size: 100%;\
...
...
...
\
#imageMenu ul li.bk1 a \{\
background: url(images/1.jpg) repeat scroll ;\
\}\
\
#imageMenu ul li.bk2 a \{\
background: url(images/2.jpg) repeat scroll ;\
\}\
\
#imageMenu ul li.bk3 a \{\
background: url(images/3.jpg) repeat scroll ;\
\}\
\
#imageMenu ul li.bk4 a \{\
background: url(images/4.jpg) repeat scroll ;\
\}\
\
#imageMenu ul li.bk5 a \{\
background: url(images/5.jpg) repeat scroll ;\
\}}

--------------------------------------------------------

You can visit http://www.rembaproject.com to see that there are no sliders and simply a column of titles......

Any help would be GREATLY appreciated! Thanks so much!

-Jim
remba
I'm new here
 
Posts: 1
Joined: Wed Jan 12, 2011 9:45 pm

Re: Changing the number of images

Postby pedezin » Thu Apr 28, 2011 8:22 pm

I recently upgraded to version 2.6.
Can someone please provide general advise on how I might increase to the number of images greater than 7?

Thanks
pedezin
I'm new here
 
Posts: 1
Joined: Thu Apr 28, 2011 8:06 pm

Re: Changing the number of images

Postby petrizzo » Thu Apr 28, 2011 8:54 pm

Hi! I have the same question of pedezin. I have to put 8 images instead of 7 and I haven't any idea bout how to with this new version. Also I whish to turn off the titles of each image.

The site is here http://sarao.petrizzo.org/ I only could make 7 places for the images, but I cann't make the 8 slides work.

Any idea about it?

Thanks in advance.
petrizzo
I'm new here
 
Posts: 1
Joined: Thu Apr 28, 2011 8:42 pm

Re: Changing the number of images

Postby jugoretz » Tue May 10, 2011 8:39 pm

It seems that since the method has changed, now using Custom Menus in the latest version (a much more elegant solution, thanks!) the instructions in this thread are no longer valid for having more than 7 (or less than 7) images. It works great with exactly 7, but the changes to the header.php that people are describing here don't work anymore, because the lines meant to be changed in header.php just aren't there anymore.

I've done some poking around and can't figure an alternate method. Anyone else have ideas?
jugoretz
I'm a regular
 
Posts: 9
Joined: Tue May 10, 2011 8:36 pm

Re: Changing the number of images

Postby jugoretz » Fri May 13, 2011 6:45 pm

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.
jugoretz
I'm a regular
 
Posts: 9
Joined: Tue May 10, 2011 8:36 pm

Re: Changing the number of images

Postby robin67 » Thu May 19, 2011 7:32 pm

Thank you Jugoretz for the detailed guide. I followed it faithfully and, sure enough, I've got eight sliders up on the site now.

But (and there had to be a but), mousing over any of the first seven causes the eigth to disappear. Mousing over the eigth causes flickering as the image slides back and forth.

Any ideas or suggestions on how this might be fixed will be gratefully received!

The URL is http://robingroen.com/test/. The site is very much a work in progress with temporary text and images.

Thanks.
robin67
I'm a regular
 
Posts: 6
Joined: Thu May 19, 2011 7:26 pm

PreviousNext

Return to Advanced - Customising the theme