jcarousel overflow. WordPress
- SOLVED
Hi,
On my site www.wisdens.org , you can see pictures of books from a selected year.
I have noticed the carousel has started to overflow but it seems to be on a random basis.
I am looking for just one horizontal line of pictures which you can scroll by the arrows.
I dont want to change the size of the images within the carousel as it skews the pictures so given the pictures that are loaded at present how do we configure a single line of pictures? Why is it random, you can choose a year and sometimes it works correct and sometimes over flows?
I have attached a bad (overflow) picture. The correct setting should be 1 line of pictures with the arrow to scroll along. The height of the pictures is Ok at 300px with width as needed for the picture to be shown correctly. (it works if i put each picture as width xyz but this skews them and is not the answer)
cheers
Chris
Answers (2)
Andrea P answers:
it seems to be a bug with the jquery of your carousel.
also, it doesn't seem to happen in firefox. I see it happening in chrome, but even there, if I switch to a different year and then come back to the previously broken one, it is not broken anymore and lay on one line.. at least this is what happened to me in several tests.
the problem is that when you add longer images, the carousel code to calculate the width of the container (the hidden one which wraps all the images) is going crazy and it doesn't assign the proper width to it, so some image overflow on a second row as they don't fit in one row.
probably it's because it calculates the width considering how many images you have, and then multypling them for a supposed max width for each element.
do you have any setting for the slider, where you can set a max width for the images? if yes, you could try setting something higher in that option.
if you dont' have it you should contact the slider developers and address them this bug.
cheers
cridler comments:
Hi,
Thanks for the replies,
My question is why the carousel would go crazy when it is faced with a long image? This craziness is intermittent and works ok sometimes so on that occasion the width is ok?
What i do not want to do is edit the image set as they could be long or tall or short and fat.
If i were to crop images or set a maximum, what value should i use? 200 or 300? What value is the tipping point (and why?)?
If the images are too long, could flipping them within the code 90 degrees solve it?
Cheers
Chris
cridler comments:
PS why would it be just an issue in Chrome? I think IE and Firefox are OK?
cridler comments:
Sorry i tired IE and it is still intermittent.
The question is why is it intermittent? and what can be done to resolve this without editing the images to a great extent?
cridler comments:
apologise, new to this format, the responses were for all to mull over.
Andrea P comments:
Hi there!
I haven't checked all the browsers, but it happens very often that firefox doesn't display a bug which all the other do. it probably has a few fallbacks to cover some tipical mistakes of the code.
I am pretty sure that the problem is that it doesn't calculate the correct width for the container.
I think you should contact the developers and address them this bug, because it should fail so badly just because one of the images is larger than the normal.
are you sure you don't have any settings regarding images max width?
by the way, a very dirty hack that could make things work, is to force the wrapper container to always be super wide, so that the images would likely to fit.
#mycarousel.jcarousel-list-horizontal {
width: 10000px !important;
}
but honestly I wouldn't reccomand a trick like that if it's not the last choice. I suggest you to try to contact them first.
cheers!
cridler comments:
Alas the developers (of my site) are long gone, it try to do it myself now but sometimes cant figure it out, hence asking you lovely people ;-)
cridler comments:
i dont mind trying the hack (just to see if it works!) , where should i insert this code?
cridler comments:
<div class="wisdens_slide">
<?php $books_model = Books::model()->findAllByAttributes(array('year'=>$selected_year)); ?>
<ul id="mycarousel" class="jcarousel-skin-tango">
<?php foreach($books_model as $books)
{
$image_name = $books['images'];
$book_title = $books['title'];
//echo "<pre>";print_r($img_name);die('here'); ?>
<li style="text-align: center;">
<img src="<?php echo $image_name; ?>" height="300" />
<div style="font-size: 16px; padding-top: 5px; text-align: center; width: 195px;"><?php echo $book_title; ?></div>
</li>
<?php } ?>
</ul>
</div>
Andrea P comments:
you should insert that code in your theme css
you should have a voice in the wp side menu, under "Aspect" which says "custom css".
or if you don't have it, you should have "edit css".
place that code at the bottom of one of those.
by the way, I meant to say to ask to the carousel developers. that is a jquery plugin which is installed in your theme.
looking at its name in the outuput code, it would be this one:
http://sorgalla.com/jcarousel/
cridler comments:
Thanks, ill contact them but the hack may have worked? (hard to tell as intermittent).
cridler comments:
Andrea P, is there any side effects to the hack? If not then the prize looks like it is yours? ill try it later still and if it has gone then i dont see what this isnt the answer?
Cheers
Chris
Andrea P comments:
Hi Chris,
the main side effect is that in the case that the container would require to be bigger than 10000px, it will be forced to be 10k width and images would go down in the second row again. obviously, you could set it to be 20000px, if you think you'll ever have such many (or long) images in it.
the real problem is that when you are blocking a functionality of a plugin, you are never 100% sure that it won't cause future issues, especially by changing settings or conditions, so I tend to avoid doing it if it's not the last choice.
though it seems that everything is working fine. I have also already set the css class so that it will apply only on this horizontal layout of the carousel, because I thought that maybe it could create problems with other carousel layouts.
so yes, I think it's pretty safe for you to use it. ;)
Dbranes answers:
Some of the images have very long widths, that are scewing your carousel, for example this one:
http://www.wisdenauction.com/uploaded/2011-8-14/a9f993ea2D3b972D4a1f2Dad692D0ade5a7024e2DSC03071.JPG
You should try max-width on the images in the jcarousel, for example:
#mycarousel .jcarousel-item img {
max-width: 200px;
}
where you can adjust the max-width to your needs.
Otherwise you should check your generated thumbnail sizes.
Dbranes comments:
How do you define the image sizes for the jcarousel?
You probably need to crop them as well, for example:
add_image_sizes( 'carousel', 300, 300, true );
or what ever sizes you need it to be and then use this image size in your carousel loop.
cridler comments:
Hi,
Thanks for the replies,
My question is why the carousel would go crazy when it is faced with a long image? This craziness is intermittent and works ok sometimes so on that occasion the width is ok?
What i do not want to do is edit the image set as they could be long or tall or short and fat.
If i were to crop images or set a maximum, what value should i use? 200 or 300? What value is the tipping point (and why?)?
If the images are too long, could flipping them within the code 90 degrees solve it?
Cheers
Chris
Dbranes comments:
You might also be using an outdated version of jcarousel, there are some new updates available here:
https://github.com/jsor/jcarousel