Thumbnail Grid with Expanding Preview

Hi

I have been working on this - http://cre8tivesource.co.uk/test/icon-grid-slider.htm taken from this sites demo - http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

I would like to highlight the icon list item with a light background colour when the user clicks on one of the icons, but I cannot get this to work.

Also I will need the ability to change the content that is show eg Image and text and button link, as I will be adding this to a Wordpress site, at the moment it is set up with the following:

data-largesrc="img/1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.

Would I be able to update this in Wordpress?

Or is their anything else out their that has the same functionality and styling to the example I gave above?

Many Thanks

Apply the background color to the active state of the anchors:

.og-grid li a:active    {background: dff;}

Something along those lines.
You may want to apply another class for it. The png image will have to be on alpha to see the background.

Hi

I tried altering this class

.og-grid li.og-expanded > a::after {
background: rgba(238, 247, 251, 0.9);
content: " ";
height: 170px;
width: 100%;
position: absolute;
pointer-events: none;
left: 0;
margin: -50% 0 0 0;
z-index:1;

}

But the icon does not appear on top of it, I also had to set a height which is not ideal.

Why don;t you just add the background to the og-expanded class.

e.g.

.og-expanded{
  background: rgba(238, 247, 251, 0.9);
}

You don’t need any heights for those items (unless they are meant to all have the same height background) and it looks like your heights are over-constrained anyway. You can’t really apply height to fluid items that contain text unless you are using the display:table-cell approach and then you lose the wrapping effect as you are suck with 4 in a row.

Hi Paul

Thanks for this I have updated the page - http://cre8tivesource.co.uk/test/icon-grid-slider.htm

You mention - ‘and it looks like your heights are over-constrained anyway’ what do you mean?

Also if you click on one of the first row icons and then scroll down to the next set of icons, they overlap the grey box.

Shall I place the second row of 4 icons in another ul tag?

Thanks mate!

If you give a background colour to the list item (.og-grid li) you will see that the text overflows out of the bottom because the height is too short.

.

Looks like margin-collapse: Try this:

.og-grid li > a, 
.og-grid li >a img{margin-bottom:0}

Hi Paul

Thanks, I have taken the height of the list tiem, and all seems to be good now.

I mentioned, I will need the ability to change the content that is shown eg Image and text and button link, as I will be adding this to a Wordpress site, so these list tiem icons and content will need the ability to be changed if needed, at the moment it is set up with the following:

data-largesrc="img/1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.

Would I be able to update this in Wordpress?

Also would the above pass the minimum W3C validator?

Thanks Paul, really appreciate your time and help.

Sorry, but I’m not a wordpress user so hopefully someone else can answer that here :slight_smile:

Hi Paul

No problem, I have updated the demo link again. A few strange things are happening!

When you click on each icon (without closing the content panel) eg Click on 1st icon, then click on 2nd icon etc, the active background appears as it should.

However, if you click on a icon, then close down that icons content, then click on any other icon, the background rounded grey border is shorter!

I think it might be something within the grid.js file that is causing this?

Hope that all makes sense!

Thanks Paul

Have you fixed this as I couldn’t see the problem occurring (unless I was doing the wrong combination)?

Hi Paul

No not fixed, it is very odd and quite hard to explain an replicate!

Here goes…

If you click on the 2nd icon in the first row, then close the content panel, and click on each top row icon, you will see the background grey block for the 2nd icon is shorter.

Also the first icon of each row when clicked on seems to have more padding than the other icons when clicked on?

Confusing I know :smile:

Ok I can see it now but seems to be a js issue.

When you close the item it transitions down to its height of 186px and that height stays in the inline style.

e.g.

   <li style="transition: height 350ms ease; -webkit-transition: height 350ms ease; height: 186px;" class="">

When you open it again it stays at the height of 186px instead of the 800px you are writing on the other elements.

You would need to look at the script and check the logic so that the inline style is removed when you open it again.

You could force the issue with css but that won’t take into account changes in the elements height when the screen resizes.

.og-expanded{height:830px!important}

I’m not quite sure why you are using the 800px height rather than letting the big image in the middle naturally take up the height and then you wouldn’t need to calculate it but I guess there’s some JS reason for it.

Hi Paul

Do you know of achieving the same but with mainly css and a little bit of js, similar to this - http://jsfiddle.net/JfcAu/11/ (does not seem to work properly)

My previous example uses - data-largesrc=“img/2.jpg” data-title=“Veggies sunt bona vobis” data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu

This is not ideal as I need the ability to change text and images within Wordpress.

Please let me know your thoughts.

Many Thanks

What is the purpose of this exactly? Are you showing some text/images in relation to the item that’s clicked?

Are all the contents different for every item. If so you could just have them in the html as hidden divs and then show the appropriate one with js (a bit like any normal tab system). Unless you are also going to load the content into the hidden divs with ajax or something and then its getting quite complex.

That demo seems a bit odd as I couldn’t work out the reason for the yellow appearing and it seems to be a bit buggy on number 7 also.

Hi Paul

Yes the demo look is a bit buggy!

I just need to show text and images below the item that is clicked, with the ability to close that content, each content will be different but with the same layout image to the left and text to the right.

Hope that helps.

Thanks again.

I was just thinking something simple like this.

Thanks Paul

I think that is much simpler and I could integrate this into Wordpress making each part editable.

How would I close the tab content, I was thinking of adding a cross in the top right hand area of the red content box to close that div.

Thanks again.

You could just make it so that clicking the block again closes it. I have updated the above codepen to show this.

Or you could add a close icon to trigger it also.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.