Hello all,

I'm pulling my hair out at what seems like a fairly simple task. Maybe someone can help point me in the right direction if I'm overlooking something.

I'm using thumbnail hover with image cache which right now shows up as a vertical stack of images. That's exactly what I want, however, they are currently above the actual slide image, what I want is to position the column of thumbnails beside the main slide image to the right.

I'm thinking this is a CSS issue, but floating causes the thumbnails to orient horizontally which is what I don't want. Am I missing something here?

Thanks!

Comments

Jessica A’s picture

Here's a link example of what I'm trying to achieve: http://stjohnswestbend.org/

Mustardseed Media gives a tutorial but doesn't use thumbnail hover.

redndahead’s picture

Try adding the thumbnails to the bottom and floating the main section left.

redndahead’s picture

Status: Active » Postponed (maintainer needs more info)
Jessica A’s picture

Status: Postponed (maintainer needs more info) » Closed (fixed)

I have no idea why I didn't just try that in the first place, I kept trying to float the thumbnails right. Floating #views_slideshow_thumbnailhover_teaser_section_frontslideshow-block_1 to the left worked perfectly. Thanks Redndahead!!

dmf7’s picture

i am having the same trouble. I aligned left my main image and put the thumbnail pagers at the bottom, but nothing is working.

I also tried putting them on top and aligned them to the right but nothing. I managed to get the pagers vertically aligned on the right, but the main image falls below them. I need it on the left of the pagers..i feel like i tried everything, please help.

dmf7’s picture

aha! I was floating the main image div to the left rather than views_slideshow_singleframe_teaser_section

Thanks!

mbahlol’s picture

hi, i'm sorry i can't catch up with this i'm bad in css, can you tell me exactly what should i do. i've tried editing view_slideshow.css but return thumbnail displayed far right from the image.

.views-slideshow-controls-top, clear-block{
float:right;
}

can i make thumbnail displayed above picture and aligned horizontaly, if there any idea or anything please let me know. i'll love to learn it

dmf7’s picture

mbahlol are you trying to display the image thumbnails above the main larger image horizontally?

If so, you can make this happen by editing the settings in the view "slideshow".

Edit the View you created. In your "style" you should have "slideshow" chosen. Then click the little wheel (settings) next to where it says slideshow.

Scroll down: Under "Slideshow mode" choose "SIngle Frame".

Scroll down some more. Where it says "PAGER" choose "TOP" from the dropdown.
Then click update at the bottom.

Make sure to save your view before you leave the page so it saves your information.

This should produce your larger "main image" with the thumbnail pagers on the top of the main image.

You shouldn't have to touch the view_slideshow.css.

mbahlol’s picture

wew, that's great. it solved my problem, i never thought single frame can have a thumbnail (deceived by thumbnail hover title). now view_slideshow.css return to normal and the only way to find is theming that thumbnail pager because it still large, if i'm not mistaken there is issues for theming single frame pager. Thank you for your information

dmf7’s picture

I'm glad it was of help :) I actually haven't resized my thumbnails, but I know there are ways to do it. YOu can try searching on the forums or you might get some help by visiting Mustardseed podcasts---They are amazing!

http://mustardseedmedia.com/podcast/episode42 This is for views slideshow theming. They have a whole lot more of tutorials on their site..check it out...maybe it will help get you there.

Good luck!

mbahlol’s picture

Thanks for that podcast, i can make my horizontal stack even prettier. this is what i do to make vertical stack with thumbnail hover. thumbnail at bottom and edit css just like this. i works in FF Chrome and IE.

#views_slideshow_thumbnailhover_main_field_photo-page_1{
float:left;
}

many thanks

asb’s picture

Guys, just feel free to showcase your sites, especially if someone has managed to get a vertical breakout teaser with thumbnail hovers on the sides look pretty ;)

Geez, this module is so awesome that we'd actually need a gallery with the latest & greatest implementations!

ressa’s picture

!WARNING, probably won't work in IE8!

You can place your thumbnails vertically on the right side with this CSS, with Pager set to "Top". Width depends on the size of your thumbnails. For some reason Internet Explorer 8 (run in VirtualBox OSE) crashes when I float the slideshow controls, both from the Top and Bottom:

.views-slideshow-controls-top {
  width: 40px;
  float: right;
}

A solution might be to add a style sheet for ie8, so that the controls are at the top, if the browser is IE8:

.views-slideshow-controls-top {
  float: none;
  margin: 0;
  padding: 0 0.5em 0.5em 3em;
  width: 100%;
}

Resize the thumbnails with this. Remember to keep the ratio of the main images, in this example 200x300 pixels:

.views_slideshow_singleframe_pager div a img {
  height: 20px;
  width: 30px;
}

Perhaps someone can figure out why IE8 crashes, so that we can float the controls freely :-)