Horizontal scrolling in Galleries bloc

NicRacine · May 12, 2016

Hello again,

I started a new thread since this question is not really related to the previous one.

I am using a Galleries bloc to display all photo albums from a specific year. As the bloc is filling up, it gets bigger (of course), blocking more and more of the screen.

Is there a way, with CSS or something else, to keep it in a single line and use a scroll bar instead? Like in a carrousel?

I also tried using a carrousel of photos that would be linked to each gallery, but it seems it is not possible to assign a link directly to a photo?

I never though a simple idea would be so hard to implement...

The web page I am talking about : http://www.nicracinephoto.com/Portfolio/Musique

Thanks for any input you may have about this.

Lille Ulven · May 13, 2016

Well you could write it in HTML as a flex-box with flex-wrap:no-wrap;
So let me think how this could look like...
HTML code:

<div class="my-flexbox">
  <ul class="my-flex-container">
    <li class="flex-item">
        <a href...>link to your photo</a>
    </li>
    <li class="my-flex-item">
        <a href...>link to your next photo</a>
    </li>
</ul>
</div>

CSS code for this HTML

div.my-flexbox{
  width: 100%;
}

.my-flex-container {
  list-style: none;
  width: 100%;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row no-wrap;
  flex-flow: row no-wrap;
  justify-content: space-around;
}

.my-flex-item {
  flex-basis: content;
}

Something like this could work out.

Good luck

Lille Ulven

NicRacine · May 14, 2016

I like this idea, thanks!

I tried inserting images linking to the galleries; the link works, but the images do not display. Not sure why.

Here's how I did it:
[HTML]
<li class="my-flex-item">
<a href = "http://www.nicracinephoto.com/2015/Hatebreed/"><img src="http://www.nicracinephoto.com/organize/2015/Hatebreed/i-L3Md9Cp"></a>
</li>
[/HTML]

Also, do you know if it's possible to position it with relative values instead of absolute values? (% instead of px)

Thanks again!

Lille Ulven · May 14, 2016

Hi NicRacine.

Your image does not get displayed because the URL you used in the img-tag refers to a gallery and not to an image.

If you used for example this instead:

<li class="my-flex-item">
        <a href = "http://www.nicracinephoto.com/2015/Hatebreed/"><img src="http://www.nicracinephoto.com/2015/Hatebreed/i-mVPWbmn/0/M/__025154-M.jpg"></a>  
    </li>

it should work. This way a click on the photo (from the address of img src) would lead to the gallery (a href).

And yes, as far as I know all positioning that can be done in px can be replaced by %.

Good Luck

Lille Ulven

denisegoldberg · May 14, 2016

NicRacine wrote: »

I tried inserting images linking to the galleries; the link works, but the images do not display. Not sure why.

The link you used in the <img src= statement shows the image in lightbox. I suspect that to use the image within an <a href= statement the URL in the <img src statement needs to be to a sized jpg.

When I am logged in to my site and do a Share... on a photo as opposed to a gallery the img src is generated using the .jpg.

--- Denise

NicRacine · May 14, 2016

denisegoldberg wrote: »

The link you used in the <img src= statement shows the image in lightbox. I suspect that to use the image within an <a href= statement the URL in the <img src statement needs to be to a sized jpg.

When I am logged in to my site and do a Share... on a photo as opposed to a gallery the img src is generated using the .jpg.

--- Denise

That was exactly the problem. With the right link, it works perfectly.

Many, many thanks!

Horizontal scrolling in Galleries bloc

Comments