In a site I’m building (above codepen) I’m wanting to add an image slider in the footer but being a bit of a noob I have limited skills and dont want to mess with Jquery, i’d like it pure CSS. Now I cam across this below:
Would this be a sensible template to work with if my requirement is to add an image slider in the footer of the wedding site?
Your idea sounds great. Now, when you like it pure CSS, why not make one using pure css. It’s an oppertunity to learn what you can achive without relying on javascript.
If I came visiting with a wedding in mind, certainly a row of thumbnails with interesting related stuff would make me stay longer and maybe more open for bussiness.
But an animated slider wouldn’t add anything, though the thumbnail row beneith the slide is a very good display I think. I would like the view images be large enough to have the expected information and I definitly wouldn’t like the image I look at to slide away.
Make a scriptless CSS version, keep it simple. It’s not that hard for a new developer when he has come to the right place asking for advice.
My first thought suggestion is to have the row of thumbs, but without the slider. Rather do like you already do with the other images, show the large image of choice on interaction. Even better, let the image pop up to view in front of everyting on a mouse click (click a thumb to view). Thats easy. The hard pard is to not overdo it.
Yes it is a concern i have too and sometimes more is less. I’m going to run with the idea of just a row of thumbs that pop on click. I’ll update progres back here, i just hope what I do ticks the resposive box. I have to admit images and resposivness confuses me a little.
Am i right in saying a should use percentages of image sizes and that should make the images adapt to different sized viewports?
Responsive images is not quite that simple as you should take in to consideration bandwidth and also pixel density of the screen. There is no point in sending a larger high quality image to someone on a slow connection and with a low quality screen. These two articles might help http://www.sitepoint.com/improving-responsive-images-picture-element/
And the grey footer background doesn’t sit tight behind the images:
I followed this tutorial to get 4 even spaced images in the footer:
So i guess my question is - "How can i always get four images to line up horizontally whatever the view port size and how can i get rid of that grey spill over on the footer?
They can do if set up to be. That needs a bit more css than I put above, that’s just a starting point. You will need to set widths for the container and images. I can’t tell you the exact setup off the top of my head without trying it, but sure it’s possible.
Give this demo a try. It is a working example of @SamA74s method with a small enhancement. (@SamA74s choice of elements would probably be more appropriate than mine.)
If you still prefer to go the non-table-cell route, let us know how you wish to do that and we can offer suggestions.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table tester images in a row</title>
<!--
http://www.sitepoint.com/community/t/on-the-hunt-for-a-pure-css-slider-but-need-some-advice/192620/11
-->
<style type="text/css">
html {
box-sizing:border-box;
}
*, *::before, *::after {
box-sizing:inherit;
}
.outer {
width:96%;
max-width:1200px;
margin:0 auto;
border:2px dashed black; /* DEMO TEST Border set to show outer container width (page width?). May Be DELETED */
}
.twrap {
margin:0 -.8%; /* set negative left & right margin by trial and error to pull outer images to page edge. */
margin-top:16px; /* vertically separates tables for this DEMO Only. To Be DELETED. */
}
.table {
display:table;
table-layout:fixed;
width:100%; /* required */
}
.tcell {
display:table-cell;
outline:1px solid lime; /* TEST Outline. To Be DELETED */
}
img {
display:block;
width:94%;
height:auto;
margin:0 auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="table">
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
</div>
<div class="twrap">
<div class="table">
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
</div>
</div>
</div>
</body>
</html>
That’s an old trick, forcing justify with an additional element was first mentiond here, autumn 2008 iirc.
Sorry, again I can’t see your explaining images, next time can you please put your explainings somewhere easy accessible, not on a scripted-datamining-nonopen image service.
Why stop at four if there is room for more on a wide screen? Responsive size? they would become too large as thumbs on a wide screen and too small on narrow screens. With a forced justify method you can fill the row with thumbnails dependent on the viewport width, no need to resize or adapt. Hopefully you want to display a larger image on user interaction (and still wanting a pure css solution). With large images on mouseclick the thumbs only need to be interesting, not detailed, and if more than four the thumbs can be a little smaller, same size in different numbers.
I think I can toss up something of that kind if you like later on.
OT/ Thanks Discourse, my damnice browser just gave up and you saved my edit, Thanks!
Eric, why set the images width to 24.8vw? Why not just give the table width:100%; to stretch the screen and table-layout:fixed; to equally distribute, and call it a day? Might be missing something here, so I apologize if that’s the case. You’d negate cross-browser compatibility issues that vw/vh has by doing this.
I was just wondering why you didn’t do it; or perhaps overlooked. I’m 100% sure you already know about it. Was just curious whether I overlooked some requirement by the OP . Thanks for putting it in. Definitely looks more “older-browser” friendly.
I’m on chromebook right now, so I can’t test manually, but you fixed the other stuff, right? I know you don’t need help but if you’re out of time, I can do a few fixes if you have to run .