Lateral Code
A Web Development Blog Focused on Code and Technology
Currently Browsing: Home » Slideshow Styling
Slideshow Styling
By Karthik Viswanathan
As many of you have probably noticed, the “Slideshow Series” contains little to no CSS styling. Soon after completing my previous post, I realized that some major work needs to be done to improve the general appearance of the show; indeed, many only view a slideshow because it looks good!
Follow along as I present an intricate (yet easy to code) slideshow styling.
View a Demo Download the Files
I love recycling old code. That’s exactly why almost every single line in my previous example will be used. CSS constitutes the only main change.
To begin, let’s add a few inline reset styles:
* {
margin: 0;
padding: 0;
font: inherit;
}
I constantly use font: inherit; in my reset to ensure that all form elements use my main body font.
Here is some quick styling for the typography used in our slideshow:
body {
font: 12px/18px Georgia, Serif;
}A pleasing font is always great!
In order to place the slideshow in the center of the screen, we can add some minor modifications to ul.ppt:
ul.ppt {
position: relative;
width: 524px;
margin: 0 auto;
}The width and margin: properties accomplish this task.
At this point, I decided that captions for each photo would be a subtle, but informative addition:
<ul class="ppt">
<li><img src="mountain.jpg" alt="Ethernet Cable"></img><p>Lorem ipsum dolor sit amet consecutar adipliscing elit.</p></li>
<li><img src="lake.jpg" alt="Spectacles"></img><p>Senectus alquilam morbi tristique.</p></li>
<li><img src="trees.jpg" alt="Leaning Tower of Pisa"></img><p>Pellentesque habitant malesuada.</li>
</ul>Each caption is contained in the <p> tags. To provide some simple placement and color to the text, we can edit .ppt li, .ppt img, and add in custom styles to .ppt p:
.ppt li {
position: absolute;
top: 0;
left: 0;
padding: 5px;
padding-bottom: 1px;
list-style-type: none;
background-color: #f2f2f2;
border: 1px solid #e7e7e7;
}
.ppt img {
border: 1px solid #222;
padding: 5px;
background-color: #444;
}
.ppt p {
color: #333;
text-align: center;
padding-bottom: 1px;
}With these styles in place, each image obtains a simple caption with an eye-pleasing border.
To complete our slideshow, it’s imperative that we customize our buttons through two simple graphics:
#buttons {
width: 230px;
margin: 0 auto;
}
button {
padding: 2px;
background: url(input-top.jpg) repeat-x;
border: 1px solid #ccc;
width: 73px;
margin: 10px auto;
}
button:hover {
background: url(input-hover.jpg) bottom repeat-x;
}These graphics are provided in the download located at the top of this page. Our code is now complete!
I’ve also updated the images used in the sample slideshow. I know most of you were bored of that ethernet cable.
This entry was posted on Sunday, March 29th, 2009 at 06:00:29. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
4 Responses to “Slideshow Styling”
Leave a Reply
Thank you very much for this tutorial.
Im pretty much a beginner at this, but I wanted to see if I could make a quick and easy slide show, I dont know anything about javascript.
But now that Ive been able to do a practise show, I now can customize it and put in more pictures of our puppy.
You have explained this very well, and I thank you again.
Jane
Thank you for your code. It’s simple and works well. How do I make the slide show start at a random slide each time the page is re-loaded?
Thanks.
@Victor: Replace this line:
$('.ppt li:gt(0)').hide();with this:
var index = Math.floor( Math.random() * $( '.ppt li' ).length ); $( '.ppt li:gt(' + index + ')' ).hide(); $( '.ppt li:lt(' + index + ')' ).hide();The above code will fetch a random number and only keep the image at that index visible.
You also have to change this:
var cur = $('.ppt li:first');To:
var cur = $( '.ppt li:eq(' + index + ')' );This will set
curto the correct image, as the index is now random.Thanks, Karthik, it works! Happy New Year