Jump to content

How do I make a document with thumbnails in it

Recommended Posts

What I want to do is create a document that has color swatches of all current in stock colors. I want them to be smallish, like big thumbnails but clickable to show a bigger picture of it. Can someone help me to do this?

Edited by cqpbert
Link to comment
Share on other sites

I am using default foundation skin.

That sounds like a great idea, I just don't know where to start to find that. As a stop gap I have created a product called frame color and am linking it from the product pages that need it. But it is cumbersome at best.

Link to comment
Share on other sites

<div class="columns horizontal ">

   <ul class="medium-block-grid-3 clearing-thumbs marg-top" data-clearing>

      <li><a href="/image.jpg" class="th"><img src="/image.jpg" class="image-gallery"></a></li> 
      <li><a href="/image2.jpg" class="th"><img src="/image2.jpg" class="image-gallery"></a></li> 
      <li><a href="/image3.jpg" class="th"><img src="/image3.jpg" class="image-gallery"></a></li>




This works to do what I "think" you want in a document on foundation, least in my test shop.

Link to comment
Share on other sites

Thank you, I will try and test this tonight!!

I assume I just put this in the "source" tab.

So href and src both point to the same image correct?

Do I repeat the entire ul section for a new row of thumbs?

Are the two classes : medium-block-grid-3... and image-gallery defined somewhere other in the site source code?

Sorry to ask so many questions, I am a fast learner but ask seemingly 100's of questions to get there.

So far my biggest accomplishment is the drop downs I made using collapseable css based on bsmither pointing me in the correct direction.


Link to comment
Share on other sites

It's fine, I ask way too many questions too.

Yeah, this goes into the source part of the document.

Yes, you need both one is creating the "thumbnail" and one is the ...not nail ? the larger image.

You don't need to but you can, just use as many LI's as you need as the css is making the rows anyway, Medium-block-grid-3, is defining how many there are per row in this case "4" (though iirc with padding etc it's 3). Foundation uses a grid system out of 12, you can change that number to increase or decrease the size of the thumbnail and how many you can get per row. grid-12, would be one big thumbnail and grid-1 would be 12 tiny ones (though probably less cause the images themselves take up space but in theory, I just liked the size of 3 personally. I wouldn't really mess with any grid css directly as it's used globally, you are much better using the properties as intended but both it and gallery are defined in foundation.css iirc, but again I didn't make any changes to them.

Link to comment
Share on other sites

Thanks to your help Lastwolf, I almost have this working. But it seems there are a bunch of images of the same that I guess are different sizes. Cubecart seemed to create these. Then the name has for instance :



and so on. So I thought I would just add the name in the lines without the size and the CSS would grab the right one. But unless I add the size, it does not display. So does this sound correct to you?

And if so, this just means I am coding the size in for the thumbs and the big picture?

Link to comment
Share on other sites

  • 1 month later...

There's /cache/ and /source/ in order to have the image without the size restrictions you'd need to use /source/image.jpg or use /cache/image.1000.jpg it's bound to be big enough for your largest of thumbnails 1000 is a solid of 50% of the screen on your average browser window, the css will resize it anyway for smaller sizes.

Edited by Lastwolf
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...