By rm76 on

I'm sure this questions has been asked before and I have seen a few posts, but no clear cut answer.
Is there a module or way that I can create a gallery of large sized images that stack horizontally next to each other. And have this stack horizontally scrollable.

Any help is greatly appreciated.

⋅ Categories: Drupal 7.x

Comments

bhosmer’s picture

bhosmer commented

Take a look at the Views Slideshow module.

http://www.radarearth.com

Patroclas’s picture

Patroclas commented

Not sure that you need a slideshow module for this.

A horizontal scrolling gallery can be just a series of images in a css div. You can assemble your images using Views and place them in a div with Views using an image preset set to the height you need. It is then a matter of styling the div and the images it contains.

For example css...

div.gallery-container{
height: 220px;
width: 100%; /*Adjust to the height and width you need*/
overflow: auto;
}

.gallery-container img{
height: 200px;
width: auto;
padding: 10px;
}
rm76’s picture

rm76 commented

Thanks for the advice. I assumed it might be something like this. But how do i create the shell DIV using Views and assign the Image View to be placed into it?

Patroclas’s picture

Patroclas commented

In the field settings for your image field,

  • open 'style settings',
  • enable 'Customise field and label wrapper html',
  • select 'DIV' as the 'Wrapper html element',
  • enable 'Create a css class' and enter a class for the wrapper.
rm76’s picture

rm76 commented

Patroclas you've been a great help. Thank you so much.

I hope this is the last question:
I see where to select he DIV wrapper and assign a CSS class to it. But where to I add the CSS attributes you provided earlier? I tried adding it to the stlyes.css file, but that did not seem to work. Do the attributes go right into the drupal admin? There is a note under the CSS name field that says 'You may use token substitutions from the rewriting section in this class.'

Patroclas’s picture

Patroclas commented

The css code goes into your theme stylesheet.

I don't recognise 'You may use token substitutions from the rewriting section in this class.' Where is that?

After editing a stylesheet, be sure to refresh your theme cache, and check that you do not have css compression activated.