Indexhibit Support

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!

Can anyone help?

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)

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

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>

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.

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!

(arsondpi: check my website to see the changes)

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. }

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. }

#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...)