cqpbert Posted May 7, 2022 Share Posted May 7, 2022 (edited) 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 May 7, 2022 by cqpbert Quote Link to comment Share on other sites More sharing options...
Lastwolf Posted May 10, 2022 Share Posted May 10, 2022 what skin are you using? you can probably mimic the thumbnail aspect of your product page. Quote Link to comment Share on other sites More sharing options...
cqpbert Posted May 10, 2022 Author Share Posted May 10, 2022 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. Quote Link to comment Share on other sites More sharing options...
Lastwolf Posted May 10, 2022 Share Posted May 10, 2022 <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> </ul> </div> This works to do what I "think" you want in a document on foundation, least in my test shop. Quote Link to comment Share on other sites More sharing options...
cqpbert Posted May 10, 2022 Author Share Posted May 10, 2022 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. Quote Link to comment Share on other sites More sharing options...
Lastwolf Posted May 11, 2022 Share Posted May 11, 2022 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. Quote Link to comment Share on other sites More sharing options...
cqpbert Posted May 12, 2022 Author Share Posted May 12, 2022 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 : image.105.jpg image.300.jpg 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? Quote Link to comment Share on other sites More sharing options...
Lastwolf Posted June 15, 2022 Share Posted June 15, 2022 (edited) 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 June 15, 2022 by Lastwolf Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.