vertical thumbnails in slideshow2

hi everybody

I installed the extension slideshow2 on my website: www.drinkinggames.de/test/. directly on the home-site is the slideshow2. now i want to format it with css so it look like this:

http://www.electricprism.com/aeron/slid ... mple5.html

but i don't know how to do it. the only thing i know is, that i have to make a copy of the template slideshow2_css_standard.tpl right? i've done it but there is more than pure css:

Code:

---

<style type="text/css" media="screen">
<![CDATA[/*><!--*/

#show_<?php echo $this->id; ?>
{
        width:<?php echo $this->arrSlideshow2Size[0]; ?>px;       
        height:<?php echo $this->arrSlideshow2Size[1] + $this->arrSlideshow2ThumbSize[1] + $this->arrSlideshow2ThumbPaddingHeight; ?>px;
}

#show_<?php echo $this->id; ?> .slideshow-images
{
        width:<?php echo $this->arrSlideshow2Size[0]; ?>px;
        height:<?php echo $this->arrSlideshow2Size[1]; ?>px;
}

<?php if($this->captions == true): ?>
/* Captions - Untertitel */
#show_<?php echo $this->id; ?> .slideshow-captions
{
        bottom:<?php echo $this->arrSlideshow2ThumbSize[1] + $this->arrSlideshow2ThumbPaddingHeight; ?>px;
}
#show_<?php echo $this->id; ?> .slideshow-captions-visible
{
        height:30px;
        opacity: .7;
}
<?php endif; ?>

<?php if($this->thumbnails == true): ?>
/* Thumbnails */
#show_<?php echo $this->id; ?> .slideshow-thumbnails
{
        height:<?php echo $this->arrSlideshow2ThumbSize[1] + 15 ; ?>px;
}
<?php endif; ?>

/*]]>*/-->
</style>

---

what and where can i work with css to make my slideshow look like in the expamle? It would be great if you can help me :)

Parts like <?php echo $this->arrSlideshow2Size[0]; ?> will translate into a number. Either leave them in or change the into any integer value that you need. The part <?php echo $this->id; ?> is an id you can also see in the html. In the page you showed it is 1. So you can change this as usual CSS, but keeping in mind some values are inside <?php and ?> code.

The code below should get you started...

Code:

---

    <style type="text/css" media="screen">
    <![CDATA[/*><!--*/

    #show_<?php echo $this->id; ?>
    {
      width:<?php echo $this->arrSlideshow2Size[0]; ?>px; 
      height:<?php echo $this->arrSlideshow2Size[1] + $this->arrSlideshow2ThumbPaddingHeight; ?>px;
    }

    #show_<?php echo $this->id; ?> .slideshow-images
    {
      width:<?php echo $this->arrSlideshow2Size[0]; ?>px;
      height:<?php echo $this->arrSlideshow2Size[1]; ?>px;
    }

    <?php if($this->captions == true): ?>
    /* Captions - Untertitel */
    #show_<?php echo $this->id; ?> .slideshow-captions
    {
      bottom:<?php echo $this->arrSlideshow2ThumbSize[1] + $this->arrSlideshow2ThumbPaddingHeight; ?>px;
    }
    #show_<?php echo $this->id; ?> .slideshow-captions-visible
    {
      height:30px;
      opacity: .7;
    }
    <?php endif; ?>

    <?php if($this->thumbnails == true): ?>
    /* Thumbnails */
    #show_<?php echo $this->id; ?> .slideshow-thumbnails
    {
      height:<?php echo $this->arrSlideshow2ThumbSize[1] + 15 ; ?>px;
    }
#show_<?php echo $this->id; ?> .slideshow-thumbnails
{
left: <?php echo $this->arrSlideshow2Size[0]; ?>px;
height: <?php echo $this->arrSlideshow2Size[1] + $this->arrSlideshow2ThumbPaddingHeight; ?>px;
width: <?php echo $this->arrSlideshow2ThumbSize[1] + 15 ; ?>px;
}

#show_<?php echo $this->id; ?> .slideshow-thumbnails li {
        float: none;
}

    <?php endif; ?>

    /*]]>*/-->
    </style>

---

I needed to cancel out some of the styles from plugins/slideshow2/css/slideshow.css do get it done...

hey,

thank you very much for your help. I didn't understand what you've done, but it works. the only problem is, that only one thumbnail is shown on the right side but there should be two of them because i have two pictures in the slideshow at the moment:

www.drinkinggames.de/test/

Its a bug http://code.google.com/p/slideshow/issues/detail?id=234

You find a solution and patch there.