Hello,

May I ask how captions (currently appear over the pictures) could be changed below the images, please? I have checked "Use packed scripts" and "Include CSS" in site building/Views Slideshow : ImageFlow/ .

----------------------------------
1.I tried modifying :

imageflow .caption{font-weight:bold; position:relative; text-align:center; z-index:10001}

to:

imageflow .caption{font-weight:bold; position:bottom; text-align:center; z-index:10001}

in:

imageflow.packed.css but nothing changes.

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

2. I also tried modifying:

.imageflow .caption {
font-weight:bold;
position:relative;
text-align:center;
z-index:10001;
}

to:
.imageflow .caption {
font-weight:bold;
position:bottom;
text-align:center;
z-index:10001;
}

in:

imageflow.css but nothing changes.

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

Flushed all caches and ran cron but no changes.

Any suggestions, please?

Many thanks

Comments

avior’s picture

avior CreditAttribution: avior commented

I need this too, if you did it please share

killtheliterate’s picture

killtheliterate CreditAttribution: killtheliterate commented

I've repositioned the caption using the following:

.imageflow .caption{
position: absolute;
margin-top:-251px;
margin-left:233px;
}

The actual values for margins are obviously specific to my use case, but it seems to work decently.

bgilhome’s picture

bgilhome CreditAttribution: bgilhome commented

This might be suitable for a more general purpose (tested in Chrome):

.imageflow { overflow:visible; }
.imageflow .navigation {
	position:absolute;
	top:0;
	margin-top:100%;
}
bgilhome’s picture

bgilhome CreditAttribution: bgilhome commented

EDIT: the above doesn't properly set the height of the .imageflow container.

This should work (tested in Chrome & Firefox) to move captions/navigation to the bottom of the container:

Set the images container div height to 1.0 (100 percent) in the view slideshow options. The captions now overflow the container height and are invisible. There are also some funky image position calculations in the ImageFlow JS based on the overflow height. Apply the following CSS to fix:

.imageflow { 
   overflow:visible;
   padding-bottom:@imageflow-nav-h; 
   .images img { margin-top:-@imageflow-nav-h; }
}

Where @imageflow-nav-h is the height of the navigation/captions container div (around 70px).