Indexhibit
Index + Exhibit

Login:

Created by
Daniel Eatock
Jeffery Vaska
And You

Slideshow beta custom questions

 

Indexhibit version: 2.0
Thread is not resolved.

linuesa
SPAIN
2 year(s) ago
Permalink Post

First I want to thank all developers Indexhibit improvements of the new beta Slideshow. They are great.

I've been incorporating into my web format and including some customizations with my null knowledge of css ... but I have some doubts:

- we can put both links for next / preview and thumbnails at the same time?

- Is there any way to make the margins (or padding I guess ...) of the thumbnails is the same on all 4 sides to form a homogeneous grid?

- we can place the thumbnails to the right or left of the image of the exhibit?

I have little idea of codes and any help is appreciated.
Thank you very much!

linuesa
SPAIN
2 year(s) ago
Permalink Post

Can anyone help?

arsondpi
GREECE
2 year(s) ago
Permalink Post

I guess you can do all three if you know how to code...

To have the thumbnails on the left and the slideshow wrapper on the right for example you need to edit the slideshow.css

  1. #thumbnails {
  2.     float: left;
  3.     width: 50px;
  4. }
  5. #slideshow-wrapper {
  6.     float: left;
  7.     padding-bottom: 5px;
  8. }

I don't really understand what you mean by "homogeneous grid" but to affect each of the thumbnails you'll need to edit the css attributes for #thumbnails a (line 52)

linuesa
SPAIN
2 year(s) ago
Permalink Post

Gracias por tu ayuda arsondpi.
He conseguido poner las miniaturas en la izquierda, pero no puedo mover el slideshow hacia la derecha para que se vean las miniaturas...

Mi pagina es ésta:
linuesa.net/index.php/photo/tiempos-modernos/

  1. Y el código es éste:
  2. #img-container { position: relative; }
  3. .picture { line-height: 0; }
  4. #exhibit #slideshow { margin-bottom: 0; }
  5. #exhibit .captioning { margin: 0.5em 0 1em 0; padding: 0; line-height: 1.2em; }
  6. #exhibit .captioning .caption p { margin-bottom: 0; }
  7. #exhibit #slideshow .captioning .title { margin-bottom: 0; font-size: 11px; }
  8. #exhibit #slideshow .captioning .caption { font-size: 11px; }

#exhibit .placement-top { margin: 0 0; }
#exhibit .placement-bottom { margin: 6px 0 0 0; }
#exhibit .placement-right { margin: 0; }
#exhibit .placement-left { margin: 0; }

#slideshow-wrapper { float:left; padding-bottom: 20px; }

/* #slideshow-nav { position: absolute; bottom: 0; left: 0; z-index: 1; margin: 25px; background: white; } */
#slideshow-nav { margin-bottom: 9px; }
/* #slideshow-nav { font-weight: bold; } */
#slideshow-nav span#total em { font-style: normal }

#textspace p, #textspace blockquote, #textspace code { width: auto; }

#loading { color: #000; position: absolute; z-index: 2000; top: 20px; left: 9px; }
#loading span { background: #fff; padding: 3px; }

#thumbnails { float: left; width:200px; }
#thumbnails a { margin-right: 6px; margin-bottom: 0; margin-top:6px; }

.nav-above { margin-bottom: 6px; }
.nav-below { margin-top: 12px; }
.thumbnails-above { margin-bottom: 6px; }
.thumbnails-below { margin-top: 12px; }
#thumbnails a:active

linuesa
SPAIN
2 year(s) ago
Permalink Post

Thanks for your help arsondpi.
I managed to put the thumbnails on the left, but I can not move the slideshow to the right to make them look the thumbnails ...

My webpage is:
linuesa.net/index.php/photo/tiempos-modernos/

  1. And the code is this:
  2. # slideshow-wrapper {float: left; padding-bottom: 20px;}
  3. / * # Slideshow-nav {position: absolute; bottom: 0, left: 0; z-index: 1; margin: 25px; background: white;} * /
  4. # slideshow-nav {margin-bottom: 9px;}
  5. / * # Slideshow-nav {font-weight: bold;} * /
  6. # slideshow-nav span # total em {font-style: normal}
  7. # textspace p, # textspace blockquote, # textspace code {width: auto;}
  8. # loading {color: # 000; position: absolute; z-index: 2000; top: 20px; left: 9px;}
  9. # loading span {background: # fff; padding: 3px;}
  10. # thumbnails {float: left; width: 200px;}
  11. # thumbnails a {margin-right: 6px; margin-bottom: 0; margin-top: 6px;}
  12. . nav-above {margin-bottom: 6px;}
  13. . nav-below {margin-top: 12px;}
  14. . thumbnails-above {margin-bottom: 6px;}
  15. . thumbnails-below {margin-top: 12px;}
  16. # thumbnails a: active
  17. </ code>
arsondpi
GREECE
2 year(s) ago
Permalink Post

Click navigate/above in your slideshow exhibit options.
This will move the thumbnails div before the slideshow wrapper div and it will set the thumbnails to the left of the slideshow wrapper.

linuesa
SPAIN
2 year(s) ago
Permalink Post

It worked, but I want to put the thumbnails to the right of the project and attach it at the central image (to give more importance to the central image of the project). I tried to put:

  1. #thumbnails { float:right; width:270px; height:750px; }

But is aligned to the right side of the browser, not next to the image of the exhibit...

Other than that, I have a problem with the text ... It is possible that when triggered only affects the main image but not on thumbnails?

Sorry for asking so much, but I'm sure many people have these same questions, and so we help each other.

Thank you!

linuesa
SPAIN
2 year(s) ago
Permalink Post

(arsondpi: check my website to see the changes)

arsondpi
GREECE
2 year(s) ago
Permalink Post

html structure and css semantics...

Click navigate/below in your slideshow exhibit options.
Edit/add (example):

  1. .thumbnails-below {
  2.     float: left;
  3.     margin-left: 640px;
  4.     margin-top: 12px;
  5.     width: 100px;
  6. }
  7. #slideshow-wrapper {
  8.     float: left;
  9.     padding-bottom: 5px;
  10. }
linuesa
SPAIN
2 year(s) ago
Permalink Post

Sorry... but doesn't work...
I put this and below in my slideshow navigate options:

  1. #thumbnails {     
  2.     width: 270px; 
  3.     height: 750px; 
  4. }
  5. #thumbnails a { margin-right: 6px; margin-bottom: 6px; margin-top:6px; }
  6. .nav-above { margin-bottom: 6px; }
  7. .nav-below { margin-top: 12px; }
  8. .thumbnails-above { margin-bottom: 6px; }
  9. .thumbnails-below {
  10.     float: left;
  11.     margin-left: 640px;
  12.     margin-top: 12px;
  13.     width: 100px;
  14. }
  15. #thumbnails a:active 
  16. #slideshow-wrapper {
  17.     float: left;
  18.     padding-bottom: 5px;
  19. }
arsondpi
GREECE
2 year(s) ago
Permalink Post

#slideshow-wrapper doesn't seem to have any valid properties (and that's because #thumbnails a:active doesn't have any opening any closing curly brackets. Verify your code using html/css validators...)

Showing 1 - 11 of 11 posts in Forum » Customize » Slideshow beta custom questions
 

This thread has been closed, thank you.