Gallerfic slideshow

HTML & CSS
1

I installed a Gallerfic slideshow in my test site. There are a few problems I can’t resolve.
Firstly I’d like to close the gap between the thumbnails and main images.Ideally, I’d like about an inch between them.
Secondly, I’d like to get rid of the ‘Play’ and ‘Previous Next’ buttons.
Lastly I
don’t know how to get the caption to be below the main image instead of to the left.
Any ideas please as it’s driving me nuts. Link below. Thanks for any help.

bajor.servers.rbl-mer.misp.co.uk/~sunridge/photob.htm

2

Hi dustnbones, welcome to SitePoint!

Firstly, this is really a CSS issue than a JS one.

Anyway…

An easy way to do that would be to reduce the width of #page, say from 900px to 800px. The main image is floated to the right and the thumbnails to the left, so reducing the wrapper width like that will draw them closer together. There are other solutions too…


div#page {width: 800px;}

Secondly, I’d like to get rid of the ‘Play’ and ‘Previous Next’ buttons.

A simple way to do this would be to add this to your style sheet:


#controls {display: none;}

Lastly I don’t know how to get the caption to be below the main image instead of to the left.

Try


#caption {text-align: center;}
3

Thanks for your help Ralph. Got most of it sussed. Thanks.
Still can’t get the images to close up. Maybe I’m just not doing it right. Could you explain in detail how to do this please? As in where to exactly place the coding. Many thanks.

bajor.servers.rbl-mer.misp.co.uk/~sunridge/photob.htm

4

I think I’ve found out what I need to do. I need to reduce the container size surrounding the main image. There’s about an inch of space between the right and left hand sides which I need to eliminate so the container exactly fits the width of the image. Question is, how do I do it please anyone?

5

I’m still not sure how you want the page to appear, so I won’t try to second guess you. But take a look at these two rules, especially the second. I would remove that width setting on the link, and then play with the width in the first rule.

div.content {
    width: 550px;
}

div.slideshow a.advance-link {
    [COLOR="Red"]width: 550px; [/COLOR]
}
6

Thanks for your help Ralph but I did what you asked and the image went berserk lol.
Attached image e3 is what happened.
Image e1 is what the page originally looked like with what appears to be a container dotted line surrounding the image. If you click to the left or right of the image you’ll see the dotted line.
Image e2 Is what I want it to look like but can’t seem to find the solution.
Cheers.

7

I’m gonna keep trying and if I find the solution in the meantime I’ll let you know.
Thanks for your help though Ralph.

8

OK, that image of what you want is very helpful.

I’ve played with your CSS in Firefox and the styles below get it looking like you want. Essentially, I’ve just removed a lot of unnecessary code from your CSS.

Now, don’t be put off if this CSS makes things look wrong. I suspect you are viewing the page in IE, because your page should not have gone crazy with the suggestions I gave before. So, use these styles and then post back if things aren’t working in some browser or other, and we can refine it.

The #page styles are in your basic css file, the others in your gallerific file. Try the following changes:


div#page {
    width: 640px;
}

div.content {
    width: 400px;
}

div.slideshow-container {
    /* remove all styles except height */
}

div.slideshow span.image-wrapper {
    /* remove all styles */
}

div.caption-container {
    /* remove all styles */
}

span.image-caption {
    /* remove all styles except width */
    width: 400px;
    text-align: center; /* add this one in */
}
9

Thanks for your reply Ralph. I’ve got most of it sussed now except for the caption at the bottom that is not aligned to the center beneath the main image, if you know how to do that please. Many thanks

10

O well, if you want to stick with what you’ve got, you could try this (change in red, addition in blue):

span.image-caption {
	display: block;
	position: absolute;
	width: 400px;
	[COLOR="Red"]top: 30px;[/COLOR]
	left: 0;
        [COLOR="Blue"]text-align:center;[/COLOR]
}
11

That’s great Ralph. Thanks very much for all your help.
Cheers!:slight_smile:

12

Sorry Ralph. I wonder if you can help with this. I want to incorporate the gallery with my website. When I tried, the gallery width was far too wide. I think this may have something to do with the container but that width seemed ok.
Below is the gallery link.
http://bajor.servers.rbl-mer.misp.co.uk/~sunridge/photob.htm

Below is the page link where I want to insert it.
http://bajor.servers.rbl-mer.misp.co.uk/~sunridge/photo.html

Thanks for any help.:slight_smile:

13

Yes, one of my concerns was that your layout would not adapt well to being placed in other pages. The page you linked to is using some pretty old code, and won’t be much fun to work with, I wouldn’t think. I’m not much good at working with table layouts; but one thing I notice is that some of the wrapping tables have widths set like 712 and 740, which is clearly not the page width you want. It would be good to sort out the main layout before trying to get inner bits and pieces to work.