Defus Defus - 28 days ago 20
CSS Question

Ebay template - thumbnails of images

I'm making a simple template for eBay

I would like to get this effect, like here:

enter image description here

I want that when you click the thumbnails would jump in place of the large photographs. As an example
My code:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład</title>
<style>
*, *:after, *:before {margin: 0; padding: 0; -moz-box-sizing: border-box; box-sizing: border-box}
.visuallyhidden {position:absolute;overflow:hidden;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;padding:0;border:0}
body {width: 100%; height: 100%}
header[role="banner"] {width: 100%; height: 100px; background-color: green}
header[role="banner"] h1, main[role="main"], .lewo h3, .lewo article h4, footer[role="contentinfo"] {color: white; text-align: center}
main[role="main"] {width: 998px; margin: 30px auto 0 auto}
.lewo {float: left}
.lewo article {background-color: green; width: 400px; height: 200px}
.lewo article:not(:first-of-type) {margin-top: 30px}
.lewo article:last-of-type {width: 400px; height: 100px}
.srodek {width: 568px; height: 30px; margin-left: 30px; background-color: green; float: right}
.srodek2 {width: 568px; height: 100px; margin-left: 30px; margin-top: 20px; background-color: green; float: right}
footer[role="contentinfo"] {margin-top: 30px; background-color: green; width: 100%; height: 100px; float: left; clear: both}
</style>
</head>
<body>
<header role="banner">
<h1>Nagłówek strony</h1>
</header>
<main role="main">
<h2 class="visuallyhidden">Nagłówek main</h2>
<section class="lewo">
<h3 class="visuallyhidden">Nagłówek sekcji</h3>
<article>
<h4>Nagłówek artykułu</h4>
</article>
<article>
<h4>Nagłówek artykułu</h4>
</article>
<article>
<h4>Nagłówek artykułu</h4>
</article>
</section>
<article class="srodek">
<h3>Środek</h3>
</main>
<footer role="contentinfo">
Stopka
</footer>
</body>
</html>

Answer

Here's a quick example I came up with, it should point you in the right direction:

http://jsfiddle.net/cjC32/

HMTL

<div class="gallery-wrapper">
    <div class="main-img">
        <img src="http://cache.desktopnexus.com/thumbnails/1671826-bigthumbnail.jpg" alt="" />
    </div>
    <ul class="thumbnails">
        <li class="thumb">
            <img src="http://cache.desktopnexus.com/thumbnails/1671826-bigthumbnail.jpg" alt="" />
        </li>
        <li class="thumb">
            <img src="http://cache.desktopnexus.com/thumbnails/1689654-bigthumbnail.jpg" alt="" />
        </li>
    </ul>
</div>

CSS

ul {
    margin:0 padding:0;
    list-style-type:none;
}
.gallery-wrapper {
}
.main-img {
    width:300px;
}
.main-img img, .thumb img {
    width:100%;
}
.thumbnails {
}
.thumb {
    display:inline-block;
    width:100px;
    height:100px;
    margin-left:10px;
}
.thumb:first-child {
    margin-left:0;
}

JS

$('.thumb').each(function () {
    var imgSRC = $('img', this).attr('src');
});

$('.thumb').on('click', function () {
    var imgSRC = $('img', this).attr('src');
    $('.main-img img').attr('src', imgSRC);
});
Comments