Text as slide in overlay

Benny_Arts / 2013-10-06 18:11:07   

Hi!

I was wondering if it's possible and how I can achieve this:
hcva.nl/Werk/NHA/

So basically that there is text implemented in the slideshow.
Would be awesome if somebody knew what I should do.

Thanks!

arsondpi / 2013-10-06 19:03:47   

I guess so - assuming you have coding skills...
I've seen a customized Slideshow to have text in between media.
And I also know that you can upload a 1X1 pixel image and take advantage of the caption text box to include text.

Benny_Arts / 2013-10-06 21:07:44   

Of course, great idea!

But any idea what line I should edit?
Tried to edit the #position and #box-text but no success...

  1. #overlay { position: fixed; top: 0; left: 0; width: 100%; display: none; z-index: 3; }
  2. #dialog { position: fixed; top: 0; left: 0; text-align: left; width: 100%; padding: 0; margin: 0; }
  3. #dialog-close { position: absolute; right: 24px; top: 24px; cursor: pointer; height: 16px; width: 16px; text-indent: -9999px; z-index: 8888; }
  4. #dialog-close a { display: block; width: 16px; height: 16px; }
  5. #dialog-close a:hover { opacity: 0.5; }
  6. .dialog-content { padding: 0; top: 0; left: 0; position: absolute; width: 100%; }
  7. .dialog-content .container { margin: 0; padding: 0; }
  8. #dialog-box-text { width: 600px; }
  9. #dialog-toggle { display: none; padding: 3px 6px 6px 0; }
  10. #dialog .the-content { display: block; z-index: 14; position: relative; width: 100%; }
  11. #dialog #loading-dock { position: absolute; z-index: 25; }
  12. #dialog #dialog-close-layer { background: red; width: 100%; height: 100%; position: absolute; top: 1; left: 0; z-index: 2; }
  13. #dialog #dialog-close-layer a { display: block; width: 100%; height: 100%; background: green; }
  14. #inner-content { position: relative; }
  15. #inner-top { position: absolute; top: 0; left: 0; width: 100%; height: 60px; z-index: 15; }
  16. #inner-bot { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 16; text-align: right; }
  17. a.next:hover { background: transparent url(../img/next.gif) no-repeat 90% 50%; opacity: 0.25; top: 0; bottom: 0; display: absolute; z-index: 3; }
  18. a.previous:hover { background: transparent url(../img/previous.gif) no-repeat 10% 50%; opacity: 0.25; top: 0; bottom: 0; display: absolute; z-index: 4; }
  19. #box-text { text-align: left; }
  20. #position { padding: 0 27px 27px 0; }
  21. #loading-dock { display: none; position: absolute; width: 35px; height: 35px; z-index: 9999; }
  22. .loading { position: absolute; top: 18px; left: 0; z-index: 1; 
  23. text-align: center; width: 24px; height: 24px;  
  24. background-position: center top; background-repeat: no-repeat; }
arsondpi / 2013-10-07 07:27:47   

What do you mean? This is css. I was referring to editing the format in it's core.
If you're trying to insert text in the caption box then you either need to find its css selector id with firebug (the firefox plugin) or wrap your caption content in a div with new css values and attributes.

Benny_Arts / 2013-10-07 08:52:23   

I thought the easiest way would be to center the text-box so It would appear over the image.
But apparently you didn't have this in mind...
What do you mean with 'it's core'?
What file, other than 'overlay.css', has effect on the way the captions are displayed in overlay?

Cheers.

arsondpi / 2013-10-07 13:39:10   

I'm getting confused.
Show us your webpage so we can take a look what you've done up to now.

Benny_Arts / 2013-10-07 16:45:56   

Here I made a 'sketch' so you know what I mean.
I want the text in the red box to be placed where the blue box is.

morgenarchitectuur.be/…

arsondpi / 2013-10-07 17:42:24   

I thought you were after inserting text in the slideshow format like in the site you posted above.
This may need further coding skills and some spare time as well... ;-)

Benny_Arts / 2013-10-07 18:27:29   

Oh ok...
I thought that was what you meant when you said "I also know that you can upload a 1X1 pixel image and take advantage of the caption text box to include text."
Hmm now I'm getting confused :p
So you think it's easier to insert text in the slideshow than to move to center the caption text?
Than which file should I edit?

arsondpi / 2013-10-07 19:26:54   

There's no need to edit stuff.
Create an image 1X1 and put the content in a styled div in the caption area box.

Benny_Arts / 2013-10-07 21:51:17   

Aha!
All right, will give this a try!

Benny_Arts / 2013-10-07 22:30:50   

Hmm ok I just can't seem to make it work :-/
Div code has no effect.
Also if I don't enter a title, the caption text won't appear.
And the titel always shows in the top left corner...

Have a look if you want:
morgenarchitectuur.be/en/work/donec-tincidunt-ipsum/

arsondpi / 2013-10-08 06:45:09   

That is not the Slideshow format.
That's Visual Index with Overlay as the onclick option.

Anyhow there's a workaround to have the captions always on show. Just search the forum for this...

This thread has been closed, thank you.